Automatically build Docker image

Author: alexandrevryghem

.dockerignore

@@ -0,0 +1,9 @@
+/.git
+/.github
+/.idea
+/dist
+/node_modules
+/out
+/.gitignore
+/main.js
+*.md

.github/workflows/build-docker-image.yml

@@ -0,0 +1,24 @@
+---
+name: Build Docker image
+on:
+  push:
+    branches:
+      - main
+jobs:
+  push_to_dockerhub:
+    name: Push to docker hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - uses: docker/setup-buildx-action@v1
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Push to Docker Hub
+        uses: docker/build-push-action@v2
+        with:
+          push: true
+          tags: alexandrevryghem/guido-desktop:latest

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:latest as build
+
+WORKDIR /usr/local/app
+COPY . /usr/local/app/
+RUN npm install
+RUN npm run build
+
+FROM nginx:latest
+
+EXPOSE 80
+COPY --from=build /usr/local/app/dist /usr/share/nginx/html

README.md

@@ -1,12 +1,54 @@
 # Guido Desktop App
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.3.
+[![Deploy on GitHub pages](https://github.com/ucll-ap-guide/guideApp-desktop/actions/workflows/deploy-to-github-pages.yml/badge.svg?branch=main)](https://github.com/ucll-ap-guide/guideApp-desktop/actions/workflows/deploy-to-github-pages.yml)
+[![Build Docker image](https://github.com/ucll-ap-guide/guideApp-desktop/actions/workflows/build-docker-image.yml/badge.svg?branch=main)](https://github.com/ucll-ap-guide/guideApp-desktop/actions/workflows/build-docker-image.yml)
 
-## Development server
+## Requirements
 
-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.
+- npm 8.5 and higher (probably also lower versions)
 
-## Build
+## How to run
+
+⚠ Don't forget to first edit the apiUrl in the `environment.prod.ts` & `environment.ts` file.
+
+### Build
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+### For development
+
+Run `ng serve` for a development server. Navigate to `http://localhost:4200/`. The app will automatically reload if you
+change any of the source files.
+
+### Build Docker image
+
+(⚠ Don't forget to start Docker Desktop on Windows)
+
+Use the `docker pull alexandrevryghem/guido-desktop:latest` command to get the latest version of the image (or build it
+yourself with the command `docker build -t guido-desktop .`).
+
+To run the image run the command `docker run -d -p PORT:80 alexandrevryghem/guido-desktop:latest` and don't forget to
+change the `PORT`.
+
+### Run docker-compose file
+
+Use the `docker pull alexandrevryghem/guido-desktop:latest` command to get the latest version of the image (or build it
+yourself with the command `docker build -t guido-desktop .`).
+
+To run the docker-compose file run the command `docker-compose up -d` and don't forget to change the `PORT`
+inside the `docker-compose.yml` file.
+
+## How to use GitHub actions
+
+### Deploy on GitHub pages
+
+This action is automatically triggered when new code is pushed on `main` and will update the GitHub page, this doesn't
+require any additional setup.
+
+### Build Docker image
+
+This action is automatically triggered when new code is pushed on `main`, this will automatically build a Docker image
+and push it to your DockerHub repository. This image can be used to run the project on a production server.
+
+⚠ Don't forget to create the `DOCKER_USERNAME` and `DOCKER_PASSWORD` secrets in the repository
+`Settings>Secrets>Actions`. The `DOCKER_PASSWORD` can also be an Access Token from DockerHub

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3.7'
+
+services:
+  website:
+    image: alexandrevryghem/guido-desktop:latest
+    container_name: guido-desktop
+    networks:
+      - guido
+    ports:
+      - PORT:80
+    restart: always
+
+networks:
+  guido:
+    name: guido

src/app/create-floor/create-floor.component.ts

@@ -109,10 +109,9 @@ export class CreateFloorComponent implements AfterViewInit {
     }
 
     /**
-     * The **loadData()** function resets the whole map layer by removing all the D3 elements inside the
-     * {@link SVGElement} and then reloading all the elements with D3 floorplan.
+     * The **loadData()** function resets the object layer of the {@link GuidoMap} and then redraws them accordingly.
      *
-     * @param floor The {@link Floor} who needs to be reloaded.
+     * @param floor The {@link Floor} which needs to be redrawn.
      */
     loadData(floor: Floor): void {
         let svg = d3.select("#demo" + this.floorNumber).select("svg");
@@ -137,7 +136,7 @@ export class CreateFloorComponent implements AfterViewInit {
 
     /**
      * The **setEventListeners()** function adds {@link EventListener}s to update and remove {@link Polygon}s and
-     * {@link GuidoNode}s.
+     * {@link GuidoNode}s. The {@link MutationObserver} is also setup here.
      *
      * @param floor The {@link Floor} for which the {@link EventListener}s need to be added.
      */
@@ -329,8 +328,8 @@ export class CreateFloorComponent implements AfterViewInit {
     }
 
     /**
-     * The **removeElement()** function removes the {@link Polygon}, {@link GuidoNode} or {@link Label} from the
-     * {@link jsonData} and then reloads the floorplan again with the new {@link Overlays}.
+     * The **removeElement()** function removes the {@link Polygon}, {@link GuidoNode} (points of interests, doors and
+     * nodes) or {@link Label} from the {@link jsonData} and then reloads the floorplan again with the new {@link Overlays}.
      *
      * @param event The {@link Event} that triggered the delete action.
      */
@@ -479,7 +478,8 @@ export class CreateFloorComponent implements AfterViewInit {
 
     /**
      * The **changeVerticeCountOfPolygon()** function adds an extra vertice between the nearest {@link Polygon} point
-     * and the neighboring point that is the closest to the {@link MouseEvent} click OR removes the clicked vertice.
+     * and the neighboring point that is the closest to the {@link MouseEvent} click OR removes the nearest vertice of
+     * the {@link Polygon} that has been clicked.
      *
      * @param event The {@link MouseEvent} that triggered this function.
      * @param isAdding The `boolean` indicating if a vertice needs to be added or removed.
@@ -629,7 +629,7 @@ export class CreateFloorComponent implements AfterViewInit {
     }
 
     /**
-     * The **getDoorDimensions()** function returns the door dimensions given his corners.
+     * The **getDoorDimensions()** function returns the door dimensions given its corners.
      *
      * @param doorCoords The {@link Array} containing the {@link Point}s of the door.
      * @return A map containing the length and width of the door.
@@ -651,7 +651,6 @@ export class CreateFloorComponent implements AfterViewInit {
      * @param neighbors The {@link Array} of id's of all the neighbors.
      * @param self The instance of the {@link CreateFloorComponent}.
      */
-
     setNeighbors(id: number, neighbors: [string, boolean][], self: CreateFloorComponent = this): void {
         let newNeighbors: number[] = [];
         for (const neighbor of neighbors) {
@@ -764,8 +763,8 @@ export class CreateFloorComponent implements AfterViewInit {
      * @param name The name of the {@link Polygon}.
      * @param amountOfVertices The amount of vertices of the {@link Polygon}.
      * @param description The description of {@link Polygon}s purpose.
-     * @param color The color of the {@link Polygon}, it is represented as an {@link Array} of `integers` between 0 and
-     *              255.
+     * @param color The color of the {@link Polygon}, it is represented as an {@link Array} of `integers` between
+     *              `0-255`.
      * @param self The instance of the {@link CreateFloorComponent}.
      */
     createPolygon(id: number | null = null, name: string, amountOfVertices: number, description: string, color: [number, number, number] = [204, 204, 204], self: CreateFloorComponent = this): void {
@@ -880,7 +879,7 @@ export class CreateFloorComponent implements AfterViewInit {
      * {@link setNeighborMode}.
      *
      * @param id The unique identifier of the {@link Point} that needs to be found.
-     * @return The point to which the line needs to be connected.
+     * @return The {@link Point} to which the line needs to be connected.
      */
     getConnectablePoint(id: number): Point {
         let elem = d3.select(`[id='${id}']`);

src/app/create-map/create-map.component.ts

@@ -18,7 +18,7 @@ declare var d3: any;
     styleUrls: ['create-map.component.css']
 })
 /**
- * A component that can be used to create a {@link Map} using a {@link CreateFloorComponent} to represent each
+ * A component that can be used to create a {@link Map} using {@link CreateFloorComponent}s to represent each
  * {@link Floor}.
  */
 export class CreateMapComponent implements AfterViewInit {
@@ -65,7 +65,7 @@ export class CreateMapComponent implements AfterViewInit {
 
     /**
      * The **moveFileInputField()** function moves the file {@link HTMLInputElement} from the first page to the taskbar
-     * on the map editor screen (this way there is one {@link EventListener} less).
+     * on the map editor screen (this way there is one less {@link EventListener}).
      */
     moveFileInputField(): void {
         let toBeMoved = document.getElementById("uploadedMapFromComputer");
@@ -169,7 +169,7 @@ export class CreateMapComponent implements AfterViewInit {
 
     /**
      * The **saveMapLocally()** function downloads the current state of the {@link jsonData} by downloading it as a
-     * JSON file.
+     * {@link JSON} file.
      */
     saveMapLocally(): void {
         let downloadLink = document.createElement("a");
@@ -192,7 +192,7 @@ export class CreateMapComponent implements AfterViewInit {
     }
 
     /**
-     * The **saveMapRemotely()** function saves the {@link Map} {@link jsonData} on the server.
+     * The **saveMapRemotely()** function saves the {@link GuidoMap}'s {@link jsonData} on the server.
      */
     saveMapRemotely(): void {
         let copy = GuidoMap.copy(this.jsonData);
@@ -249,7 +249,7 @@ export class CreateMapComponent implements AfterViewInit {
     }
 
     /**
-     * The **deleteMap()** function deletes the {@link GuidoMap} with the given.
+     * The **deleteMap()** function deletes the {@link GuidoMap} with the given {@link name}.
      *
      * @param name The name of the {@link GuidoMap} on the server that needs to be deleted.
      * @param self The instance of the {@link CreateMapComponent}.
@@ -272,7 +272,7 @@ export class CreateMapComponent implements AfterViewInit {
 
     /**
      * The **toggleDeleteMode()** function switches the {@link deleteMode} to `true` when it was `false` and the other
-     * way around, and it displays a warning message.
+     * way around, and it also displays the necessary warning messages for the users.
      */
     toggleDeleteMode(): void {
         this.jsonData.deleteMode = !this.jsonData.deleteMode;
@@ -386,7 +386,7 @@ export class CreateMapComponent implements AfterViewInit {
 
     /**
      * The **toggleEditMode()** function switches the {@link editMode} to `true` when it was `false` and the other way
-     * around, and it displays a warning message.
+     * around, and it also displays the necessary warning messages for the users.
      */
     toggleEditMode() {
         if (!this.jsonData.editMode) {

src/app/d3/floorplan.ts

@@ -3,6 +3,12 @@ import {Overlays} from "./overlays";
 
 declare var d3: any
 
+/**
+ * A class that manages and scales the different layers.
+ *
+ * Code partially from {@link https://dciarletta.github.io/d3-floorplan/}, completely refactored to TypeScript and
+ * fitted to project.
+ */
 export class Floorplan {
     layers: any = [];
     panZoomEnabled = true;
@@ -18,7 +24,7 @@ export class Floorplan {
         groups.each(function(data: any){
             if(!data) return;
 
-           // @ts-ignore
+            // @ts-ignore
             let svg = d3.select(this);
 
             // define common graphical elements
@@ -54,25 +60,25 @@ export class Floorplan {
 
             // render and reorder layer controls
             let layerControls = controls.select("g.layer-controls").selectAll("g").data(self.layers, function (l: any) {
-                    return l.getId();
-                });
+                return l.getId();
+            });
             let layerControlsEnter = layerControls.enter()
-                    .append("g").attr("class", "ui-active")
-                    .style("cursor", "pointer")
-                    .on("click", function (l: any) {
-                        // @ts-ignore
-                        let button = d3.select(this);
-                        let layer = svg.selectAll("g." + l.getId());
-                        if (button.classed("ui-active")) {
-                            layer.style("display", "none");
-                            button.classed("ui-active", false)
-                                .classed("ui-default", true);
-                        } else {
-                            layer.style("display", "inherit");
-                            button.classed("ui-active", true)
-                                .classed("ui-default", false);
-                        }
-                    });
+                .append("g").attr("class", "ui-active")
+                .style("cursor", "pointer")
+                .on("click", function (l: any) {
+                    // @ts-ignore
+                    let button = d3.select(this);
+                    let layer = svg.selectAll("g." + l.getId());
+                    if (button.classed("ui-active")) {
+                        layer.style("display", "none");
+                        button.classed("ui-active", false)
+                            .classed("ui-default", true);
+                    } else {
+                        layer.style("display", "inherit");
+                        button.classed("ui-active", true)
+                            .classed("ui-default", false);
+                    }
+                });
 
             layerControlsEnter.append("rect")
                 .attr("x", 0)

src/app/d3/imagelayer.ts

@@ -1,5 +1,11 @@
 declare var d3: any;
 
+/**
+ * A class that is used to display the background images of the {@link Floor}s.
+ *
+ * Code partially from {@link https://dciarletta.github.io/d3-floorplan/}, completely refactored to TypeScript and
+ * fitted to project.
+ */
 export class Imagelayer {
     x = d3.scale.linear()
     y = d3.scale.linear();
@@ -13,7 +19,7 @@ export class Imagelayer {
             // @ts-ignore
             let g = d3.select(this);
 
-            let imgs = g.selectAll("image").data(data, function(img: any) {
+            let imgs = g.selectAll("image").data(data, function (img: any) {
                 return img.url;
             })