Documentation and versioning

- Refactor and add documentation
- Pull the version number into the UI
- No need to do a yarn install before deployment in GitLab CI
- Make CI generate a version json file

.gitlab-ci.yml

@@ -5,40 +5,50 @@ stages:
   - build
   - deploy
 
-before_script:
-  - yarn install
-
 lint:
   stage: test
   script:
+    - yarn install
     - yarn lint
+  except:
+    - tags
 
 test:
   stage: test
   script:
+    - yarn install
     - yarn test --no-progress --no-watch --browsers=ChromiumHeadlessCI
+  except:
+    - tags
 
 build:
   stage: build
   script:
+    - yarn install
     - yarn build --no-progress --prod --aot
   artifacts:
     paths:
       - dist/
+  only:
+    - tags
 
 deploy:
   stage: deploy
   script:
-    - if [[ "$CI_COMMIT_TAG" == "" ]]; then exit 0; fi
     - cd dist/web-remote
     - zip -r ../../remote-$CI_COMMIT_TAG.zip *
-    - d ../../
+    - cd ../../
-    - cho "$CI_COMMIT_TAG" > version.txt
+    - export CHECK_SUM=`sha256sum remote-$CI_COMMIT_TAG.zip | cut -d' ' -f1`
-    - kdir -p ~/.ssh
+    - export FILE_SIZE=`stat -c '%s' remote-$CI_COMMIT_TAG.zip`
-    - cho "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
+    - 'echo -e "{\"latest\": {\"version\": \"$CI_COMMIT_TAG\", \"sha256\": \"$CHECK_SUM\", \"filename\": \"remote-$CI_COMMIT_TAG.zip\", \"size\": $FILE_SIZE}}" > version.json'
-    - hmod 600 ~/.ssh/id_rsa
+    - mkdir -p ~/.ssh
-    - val $(ssh-agent -s)
+    - echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
-    - sh-add ~/.ssh/id_rsa
+    - chmod 600 ~/.ssh/id_rsa
-    - '[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
+    - eval $(ssh-agent -s)
-    - sh openlp@openlp.io "mkdir -p /home/openlp/sites/get.openlp.org/www/remote/$CI_COMMIT_TAG"
+    - ssh-add ~/.ssh/id_rsa
-    - cp version.txt remote-$CI_COMMIT_TAG.zip openlp@openlp.io:/home/openlp/sites/get.openlp.org/www/remote/$CI_COMMIT_TAG/
+    - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
+    - ssh openlp@openlp.io "mkdir -p /home/openlp/sites/get.openlp.org/www/remote/$CI_COMMIT_TAG"
+    - scp remote-$CI_COMMIT_TAG.zip openlp@openlp.io:/home/openlp/sites/get.openlp.org/www/remote/$CI_COMMIT_TAG/
+    - scp version.json openlp@openlp.io:/home/openlp/sites/get.openlp.org/www/remote/
+  only:
+    - tags

README.md

@@ -1,27 +0,0 @@
-# OpenlpRemote
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

README.rst

@@ -0,0 +1,17 @@
+OpenLP Web Remote
+=================
+
+This is the web remote that is integrated into OpenLP.
+
+Installation
+------------
+To download and install this web remote, you need to install OpenLP 3.0 or higher, go into the configuration, select
+"Remote" and update the web remote from there.
+
+Development
+-----------
+
+To get started with development of the web remote, see the `Developer Guide`_ in the ``docs`` directory.
+
+
+.. _Developer Guide: docs/developer_guide.rst

docs/deployment.rst

@@ -0,0 +1,23 @@
+Deployment
+==========
+
+Deploying the web remote is done via the GitLab CI system, but there are some manual steps that need to take place
+first.
+
+Version and Tag
+---------------
+
+In order to deploy the web remote, an new tag needs to be created. Having said that, before a new tag can be created,
+we need to set up a new version of the web remote.
+
+This is just three simple steps:
+
+1. Update the version number in the ``package.json`` file
+2. Commit the changes in git, push the changes up to GitLab, and request a merge
+3. Once your merge request has been merged, create a new tag in GitLab
+
+GitLab CI
+---------
+
+When a new tag is created, GitLab CI will automatically run, and the new version of the web remote will be deployed to
+the download server.

docs/developer_guide.rst

@@ -0,0 +1,43 @@
+Developer Guide
+===============
+
+Prerequisites
+-------------
+
+In order to get started developing the web remote, you'll need to install the following on your computer:
+
+- NodeJS
+- NPM
+- Yarn
+
+Get Started
+-----------
+
+Once you have the prerequisites installed, in the root directory, run the following command:
+
+.. code::
+
+  yarn install
+
+
+To run the web remote, run the following command:
+
+.. code::
+
+  yarn run
+
+
+To build the web remote manually for deployment:
+
+.. code::
+
+  yarn build --prod --aot
+
+
+Deployment
+----------
+
+For deployment, see the `Deployment`_ page.
+
+
+.. _Deployment: docs/deployment.rst

src/app/app.component.html

@@ -2,6 +2,8 @@
   <mat-toolbar-row>
     <button mat-icon-button (click)="menu.toggle()"><mat-icon>menu</mat-icon></button>
     <span class="page-title">{{pageTitle}}</span>
+    <span class="spacer"></span>
+    <span class="app-version">v{{appVersion}}</span>
   </mat-toolbar-row>
 </mat-toolbar>
 <mat-sidenav-container>

src/app/app.component.scss

@@ -2,6 +2,14 @@ mat-divider {
   border-color: rgb(175, 175, 175);
 }
 
+mat-toolbar-row .spacer {
+  flex: 1 1 auto;
+}
+
+.app-version {
+  font-size: 70%;
+}
+
 mat-sidenav {
   background: white;
 }

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { State } from './responses';
 import { OpenLPService } from './openlp.service';
 import { PageTitleService } from './page-title.service';
 import { LoginComponent } from './components/login/login.component';
+import { version } from '../../package.json';
 
 @Component({
   selector: 'app-root',
@@ -16,6 +17,7 @@ export class AppComponent implements OnInit {
   state = new State();
   showLogin = false;
   pageTitle = 'OpenLP Remote';
+  appVersion = version;
 
   constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService,
               private dialog: MatDialog) {

src/tsconfig.app.json

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "resolveJsonModule": true,
     "outDir": "../out-tsc/app",
     "module": "es2015",
     "types": []

tsconfig.json

@@ -8,6 +8,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "resolveJsonModule": true,
     "target": "es5",
     "typeRoots": [
       "node_modules/@types"