Merge branch 'dev'

.gitignore

@@ -1,3 +1,10 @@
 # Server side
 server/server
 server/server.debug
+server/coverage.out
+
+# IDE stuff
+**.idea
+
+# Docker stuff
+postgres-data

README.md

@@ -1,6 +1,6 @@
 # SimpleTaskManager
 
-Prototype of a simple mapping tasking manager for e.g. [https://openstreetmap.org](OpenStreetMap (OSM)).
+Prototype of a simple mapping tasking manager for e.g. [OpenStreetMap (OSM)](https://openstreetmap.org).
 
 Take a look at the latest version at [https://stm.hauke-stieler.de/](https://stm.hauke-stieler.de/).
 
@@ -10,8 +10,8 @@ Usually such region is divided into squares and only one mapper at a time works
 
 # Usage workflow
 
-A user can create a *project* with constists of a large region on the map (e.g. a city district).
-This region is devided into smaller areas (e.g. 1x1km large squares) the so called *tasks*.
+A user can create a *project* with consists of a large region on the map (e.g. a city district).
+This region is divided into smaller areas (e.g. 1x1km large squares) the so called *tasks*.
 One user at a time can now work on such task and this user is able to update the process of the task by setting the *process points*.
 Once the region is fully mapped, the user finishes it by setting all process points and maybe starts working on the next task.
 
@@ -74,9 +74,9 @@ This will enable you to invite other to tasks.
 
 Stage 5 finalizes things and adds the needed details to finish the prototype.
 
-* [ ] Abstract storage
-* [ ] Use real database (probably `postgresql`) and keep current in-memory storage (maybe useful for development)
-* [ ] Put Database into own docker container
+* [x] Abstract storage
+* [x] Use real database (probably `postgresql`) and keep current in-memory storage (maybe useful for development)
+* [x] Put Database into own docker container
 
 ### Post Stage 5
 Things to do after finishing this stage (which will probably be version 1.0.0)
@@ -97,7 +97,7 @@ Things that would be nice but are not necessary for a prototype.
 * [ ] WebSocket connections for live updates
 * [ ] Chat in the project
 * [ ] Validation of tasks
-  * [ ] Choose between optional validations (uses can mark a task as valid but that doesn't change anything) and mandatory validations (at leaxt *x* validations are needed to finish a task)
+  * [ ] Choose between optional validations (uses can mark a task as valid but that doesn't change anything) and mandatory validations (at least *x* validations are needed to finish a task)
 * [ ] Load regions
   * [ ] From `.osm` and/or `.gpx` file
   * [ ] From overpass-query / -result
@@ -109,102 +109,17 @@ Things that would be nice but are not necessary for a prototype.
 
 ## Client
 
-The client is an angular based web application and can be found in the `client` folder.
-The readme in this folder gives you further instruction on the setup, running, building, etc.
-
-### Run
-
-1. Go into the package.json and change the settings as you need them (URLs, OAuth keys, etc.)
-2. Go into the `client` folder
-3. Execute `npm run dev` which uses the `environment.ts` file as config
-
-### Build
-
-Same as above but with `npm run build`.
-
-### Configuration
-
-Currently the client is not very mich configurable.
-This has a reason: Currently the code is very simple and the authentication with the OSM servers is done by the server (s. below).
-
-Encryption (HTTPS) and HTTP-Server configs depend on the used Server (Apache-HTTP, nginx, ...), so take a look at their documentation or at the `./client/nginx.conf` for my nginx config.
+The client is an Angular based web application and can be found in the `client/` folder.
+The `README.md` in this folder gives you further instruction on the setup, running, building, etc.
 
 ## Server
 
-The server is written in go (aka *golang*) so you need to install go and setup your development environment (paths, IDE, etc.)
-
-### Setup
-This project uses some frameworks/libraries to make the development easier:
-
-* [https://github.com/gorilla/mux](gorilla/mux) to easily create REST endpoints
-* [https://github.com/kurrik/oauth1a](kurrik/oauth1a) for the OAuth1a authentication
-* [https://github.com/hauke96/sigolo](hauke96/sigolo) for logging
-* [https://github.com/hauke96/kingpin](hauke96/kingpin) for CLI parameter and flag parsing
-
-You need to install these using `go get github.com/gorilla/mux` and so on.
-
-### Run
-
-*You need to go throuth the "Setup" section first ;)*
-
-Just go into the `server` folder and execute `go run .`.
-
-### Build
-
-*You need to go throuth the "Setup" section first ;)*
-
-Just go into the `server` folder and execute `go build .`.
-
-### Configuration
-
-There are already some configuration files in the folder `./server/configs/`.
-Until there's further documentation, just take a look, the properties are quite simple and straight forward.
-
-### HTTPS
-
-I only tried it with letsencrypt certificates.
-At least for them, you only need to set the following properties in your configuration (next to the others of course):
-
-```json
-{
-	"server-url": "https://your.domain.com",
-	"ssl-cert-file": "/etc/letsencrypt/live/your.domain.com/fullchain.pem",
-	"ssl-key-file": "/etc/letsencrypt/live/your.domain.com/privkey.pem",
-	...
-}
-```
-
-**Important:** The `server-url` property has to begin with `https` in order to activate HTTPS.
-
-## Docker
-
-Client and Server can easily be started/deployed as docker containers.
-Both cotainers do not clone any repo but copy the source files into the container.
-
-The according configuration and definition of the build process are in the `./server/Dockerfile` and `./client/Dockerfile` files.
-To make things easier there's also the `./docker-compose.yml` file combining the two docker files and adding port forwarding, mounts etc..
-
-The default docker configuration uses the production configurations for the `stm.hauke-stieler.de` server, you probably want to change that.
-
-The `stm.hauke-stieler.de` uses Ubuntu so here's a workflow for Ubuntu:
-
-```bash
-# 1. install docker, docker-compose and git
-apt install docker docker-compose git
-
-# 2. Setup letsencrypt
-#    It's best to look at their guidelines and tutorials
-
-# 3. clone repo
-git clone https://github.com/hauke96/simple-task-manager.git
-
-# 4. Go into the repo
-cd simple-task-manager
+The server is written in go (aka golang) and can be found in the `server/` folder.
+The `README.md` there also gives you instructions on setup, running, building, etc.
 
-# 5. Change configs to your needs
+# Deployment
 
-# 6. Start the whole thing
-docker-compose up --build
-```
+The `docker-compose.yml` creates three docker container for the client, server and the database.
+Because the container build and test themselves, starting everything probably takes a few minutes.
 
-There are several more CLI options, just take a look at `docker` and `docker-compose` guides/tutorials/documentation.
+During development I recommend to manually start the client and server (see according `README.md` files) and just use the docker container for the database.

client/Dockerfile

@@ -11,6 +11,14 @@ COPY . ./stm-client/
 WORKDIR ./stm-client/
 RUN cp -r /tmp/node_modules ./
 
+# Tests
+RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
+RUN echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' | tee /etc/apt/sources.list.d/google-chrome.list
+RUN apt update
+RUN apt install -y google-chrome-stable
+RUN npm run docker-test
+RUN apt remove -y google-chrome-stable
+
 RUN NODE_OPTIONS="--max_old_space_size=4096" npm run build
 
 ## STAGE 2 : Configure nginx and run client

client/README.md

@@ -1,4 +1,4 @@
-# SimpleTaskManager
+# Client
 
 This is the web application of the simple task manager.
 It's based on [Angular](https://angular.io) and uses `npm` as a package manager.
@@ -7,15 +7,34 @@ It's based on [Angular](https://angular.io) and uses `npm` as a package manager.
 
 1. Download/clone this repo and go into this client folder.
 2. I assume you have `npm` installed (if not: install it using your package manager)
-3. You need to globally install the Angular CLI (in oder to use the `ng` command line tool) and install the needed packages
+3. You need to globally install the Angular CLI (in order to use the `ng` command line tool) and install the needed packages
 
 ```bash
 npm install -g @angular/cli
 npm install
 ```
 
-## Development server
+## Run locally
 
 Run `npm run dev` to start a development server.
 Then open `http://localhost:4200/` in your browser.
 The app will automatically recompile and reload if you change any of the source files.
+
+## Run tests
+
+This can be done using `npm run test`.
+This script uses Firefox as default browser where the tests run in.
+
+You can also use Chrome with `ng test --browsers=ChromeHeadless`.
+
+## Build
+
+Same as above but with `npm run build`.
+The output will be in `client/dist/simple-taskmanager/`.
+
+## Configuration
+
+Currently the client is not very mich configurable.
+This has a reason: Currently the code is very simple and the authentication with the OSM servers is done by the server (s. below).
+
+Encryption (HTTPS) and HTTP-Server configs depend on the used Server (Apache-HTTP, nginx, ...), so take a look at their documentation or at the `./client/nginx.conf` for my nginx config.

client/angular.json

@@ -59,7 +59,7 @@
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true,
+              "buildOptimizer": false,
               "budgets": [
                 {
                   "type": "initial",

client/karma.conf.js

@@ -8,6 +8,7 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
+      require('karma-firefox-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
@@ -25,7 +26,13 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadlessNoSandbox', 'FirefoxHeadless'],
+	customLaunchers: {
+        ChromeHeadlessNoSandbox: {
+            base: 'ChromeHeadless',
+            flags: ['--no-sandbox']
+        }
+    },
     singleRun: false,
     restartOnFileChange: true
   });

client/package.json

@@ -1,11 +1,12 @@
 {
   "name": "simple-task-manager",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "scripts": {
     "ng": "ng",
     "dev": "ng serve --watch",
     "build": "ng build --prod",
-    "test": "ng test",
+    "test": "ng test --watch=false --browsers=FirefoxHeadless",
+    "docker-test": "ng test --watch=false --browsers=ChromeHeadlessNoSandbox",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
@@ -39,6 +40,7 @@
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.4.1",
     "karma-chrome-launcher": "~3.1.0",
+    "karma-firefox-launcher": "~1.3.0",
     "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-jasmine": "~3.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",

client/src/app/app.component.spec.ts

@@ -19,17 +19,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have as title 'simple-task-manager'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('simple-task-manager');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('simple-task-manager app is running!');
-  });
 });

client/src/app/app.module.ts

@@ -42,7 +42,7 @@ import { UserInvitationComponent } from './user/user-invitation.component';
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-  HttpClientModule
+    HttpClientModule
   ],
   providers: [
     AuthGuard,

client/src/app/auth/auth.component.html

@@ -9,11 +9,21 @@
 		<button (click)="onLoginButtonClick()">Login</button>
 	</div>
 	<div class="notice">
-		<b>Warning</b>
+		<div class="notice-container">
 		<div class="notice-bar"></div>
-		<div class="notice-description">
-			Currently there is <b>no database</b>. When the server is restarted, everything will be reset. A database will be added in one of the following releases.<br><br>
-			So: Stay tuned ;)
+		<div class="notice-text">
+			<b>New in 0.5.0:</b>
+			<ul>
+				<li>Adding a database<br>(Changes are now saved permanently)</li>
+			</ul>
+			For developers:
+			<ul>
+				<li>Better error handling</li>
+				<li>Refactoring of the storage architecture</li>
+				<li>Updated tests and added new ones</li>
+				<li>Smaller bug fixes</li>
+			</ul>
+		</div>
 		</div>
 	</div>
 </div>

client/src/app/auth/auth.component.scss

@@ -31,22 +31,26 @@
 .notice {
 	display: flex;
 	justify-content: center;
-	padding-top: 10px; // compensate the -5px from below and get 5px actual space
+	padding-top: 25px; // compensate the -5px from below and get 5px actual space
 }
 
-.notice-text {
+.notice-container {
+	max-width: 500px;
+}
+
+.notice-text b {
 	font-weight: 500;
 }
 
+.notice-title {
+	text-align: right;
+}
+
 .notice-bar {
 	width: 1px;
 	background-color: $gray-mid;
 	margin-left: 15px;
 	margin-right: 15px;
-	margin-top: -5px;
+	margin-top: -20px;
 	margin-bottom: -5px;
 }
-
-.notice-description {
-	width: 380px;
-}