Merge branch 'develop'

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+/public/config.json
+/Dockerfile

.eslintrc.js

@@ -1,20 +1,20 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/typescript/recommended",
     "@vue/prettier",
-    "@vue/prettier/@typescript-eslint"
+    "@vue/prettier/@typescript-eslint",
   ],
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
-  }
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
 };

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+/public/config.json
 
 # local env files
 .env.local

Dockerfile

@@ -1,22 +1,25 @@
-FROM node:14
-
+# Working Node.js 14 base image
+FROM node:14 AS nodebase
+RUN mkdir -p /home/node/.npm /app/ && \
+    chown -R node:node /home/node/ /app/
 USER node
-RUN mkdir -p /home/node/.npm-global \
-             /home/node/waarzitjenu/map \
-             /home/node/waarzitjenu/map/dist
-
-ENV NPM_CONFIG_PREFIX=/home/node/.npm-global
+ENV NPM_CONFIG_PREFIX=/home/node/.npm
 ENV PATH=$NPM_CONFIG_PREFIX/bin:$PATH
 RUN npm -g config set user "$USER" && \
     npm i -g yarn && \
     printf "Node version %s, npm version %s, yarn version %s\n\n" "$(node -v)" "$(npm -v)" "$(yarn -v)"
 
-WORKDIR /home/node/waarzitjenu/map
-COPY ["package.json", "yarn.lock", "babel.config.js", "tsconfig.json", "vue.config.js", ".browserslistrc", ".env", ".env.local", ".eslintrc.js", "./"]
-COPY ["public/", "./public/"]
-COPY ["src/", "./src/"]
-
+# Builder
+FROM nodebase AS builder
+WORKDIR /app/
+RUN mkdir -p map/ map/dist/
+WORKDIR /app/map
+COPY ./ ./
 RUN yarn install
+RUN yarn build
 
-ENTRYPOINT ["yarn", "run"]
-CMD ["build"]
+# Nginx
+FROM nginx:1.20-alpine
+COPY --from=builder /app/map/dist /usr/share/nginx/html
+COPY ./docker-entrypoint.sh /docker-entrypoint.sh
+ENTRYPOINT ["/docker-entrypoint.sh"]

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: ["@vue/cli-plugin-babel/preset"],
 };

docker-entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+ROOT_DIR=/usr/share/nginx/html
+envsubst < "$ROOT_DIR/config.template.json" > "$ROOT_DIR/config.json"
+
+nginx -g "daemon off;"

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --no-clean",
+    "dev": "yarn serve",
+    "serve": "yarn subst && vue-cli-service serve",
+    "subst": "envsubst < public/config.template.json > public/config.json",
+    "build": "yarn lint && yarn subst && vue-cli-service build --no-clean",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -51,4 +53,4 @@
       "git add"
     ]
   }
-}
+}

public/config.template.json

@@ -0,0 +1,4 @@
+{
+    "MAPBOX_ACCESS_TOKEN": "${MAPBOX_ACCESS_TOKEN}",
+    "LOCATION_API_ENDPOINT": "${LOCATION_API_ENDPOINT}"
+}

src/App.vue

@@ -3,12 +3,12 @@
 </template>
 
 <style lang="stylus">
-  body
-    background #000
+body
+  background #000
 
-  #app
-    height 100vh
-    font-family Avenir, Helvetica, Arial, sans-serif
-    -webkit-font-smoothing antialiased
-    -moz-osx-font-smoothing grayscale
+#app
+  height 100vh
+  font-family Avenir, Helvetica, Arial, sans-serif
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
 </style>

src/components/Console.vue

@@ -5,13 +5,13 @@
 </template>
 
 <script lang="ts">
-  import { Vue } from "vue-class-component";
+import { Vue } from "vue-class-component";
 
-  export default class Console extends Vue {}
+export default class Console extends Vue {}
 </script>
 
 <style lang="stylus">
 .console
     pre
         color #fff
-</style>
+</style>

src/components/InformationWidget.vue

@@ -16,68 +16,71 @@
 </template>
 
 <script lang="ts">
-  import { Vue } from "vue-class-component";
-  import { Prop } from "vue-property-decorator";
+import { Vue } from "vue-class-component";
+import { Prop } from "vue-property-decorator";
 
-  export default class InformationWidget extends Vue {
-    toKmh = (speed: number) => (speed * 3.6).toPrecision(4).replace(".", ",");
-    toDMS = (input: { value: number; latitude: boolean }) => {
-      interface DMS extends Record<string, any> {
-        degrees: number;
-        minutes: number;
-        seconds: number;
-        bearing: "N" | "S" | "E" | "W";
-      }
+export default class InformationWidget extends Vue {
+  toKmh = (speed: number) => (speed * 3.6).toPrecision(4).replace(".", ",");
+  toDMS = (input: { value: number; latitude: boolean }) => {
+    interface DMS extends Record<string, number | string> {
+      degrees: number;
+      minutes: number;
+      seconds: number;
+    }
 
-      const dms: DMS = {
-        degrees: 0,
-        minutes: 0,
-        seconds: 0,
-        bearing: "N"
-      };
+    interface DMSB extends DMS {
+      bearing: "N" | "S" | "E" | "W";
+    }
 
-      dms.degrees = Math.floor(input.value);
-      dms.minutes = Math.floor((input.value - dms.degrees) * 60);
-      dms.seconds = Math.round(
-        ((input.value - dms.degrees) * 60 - dms.minutes) * 60
-      );
+    const dmsb: DMSB = {
+      degrees: 0,
+      minutes: 0,
+      seconds: 0,
+      bearing: "N",
+    };
 
-      // After rounding, the seconds might become 60. These two
-      // if-tests are not necessary if no rounding is done.
-      if (dms.seconds == 60) {
-        dms.minutes++;
-        dms.seconds = 0;
-      }
-      if (dms.minutes == 60) {
-        dms.degrees++;
-        dms.minutes = 0;
-      }
+    dmsb.degrees = Math.floor(input.value);
+    dmsb.minutes = Math.floor((input.value - dmsb.degrees) * 60);
+    dmsb.seconds = Math.round(
+      ((input.value - dmsb.degrees) * 60 - dmsb.minutes) * 60
+    );
+
+    // After rounding, the seconds might become 60. These two
+    // if-tests are not necessary if no rounding is done.
+    if (dmsb.seconds == 60) {
+      dmsb.minutes++;
+      dmsb.seconds = 0;
+    }
+    if (dmsb.minutes == 60) {
+      dmsb.degrees++;
+      dmsb.minutes = 0;
+    }
 
-      // Set the bearing (N, S or E, W)
-      if (input.latitude == true) {
-        if (input.value >= 0) {
-          dms.bearing = "N";
-        } else {
-          dms.bearing = "S";
-        }
+    // Set the bearing (N, S or E, W)
+    if (input.latitude == true) {
+      if (input.value >= 0) {
+        dmsb.bearing = "N";
       } else {
-        if (input.value >= 0) {
-          dms.bearing = "E";
-        } else {
-          dms.bearing = "W";
-        }
+        dmsb.bearing = "S";
       }
-      // Finally, make degrees always positive (so you won't get -60 degees south, for example)
-      dms.degrees = Math.abs(dms.degrees);
+    } else {
+      if (input.value >= 0) {
+        dmsb.bearing = "E";
+      } else {
+        dmsb.bearing = "W";
+      }
+    }
+    // Finally, make degrees always positive (so you won't get -60 degees south, for example)
+    dmsb.degrees = Math.abs(dmsb.degrees);
 
-      return `${dms.degrees}\u00B0 ${dms.minutes}' ${dms.seconds}" ${dms.bearing}`;
-    };
+    return `${dmsb.degrees}\u00B0 ${dmsb.minutes}' ${dmsb.seconds}" ${dmsb.bearing}`;
+  };
 
-    // Props
-    @Prop({ required: true, default: 52.132633 }) private latitude!: number;
-    @Prop({ required: true, default: 5.291266 }) private longitude!: number;
-    @Prop({ required: true, default: 13.3333 }) private speed!: number;
-  }
+  // Props
+  @Prop({ required: true, default: 52.132633 }) private latitude!: number;
+  @Prop({ required: true, default: 5.291266 }) private longitude!: number;
+  @Prop({ required: true, default: 13.3333 }) private speed!: number;
+}
 </script>
 
 <style lang="stylus">
@@ -96,5 +99,4 @@
     display grid
     grid-auto-flow column
     grid-gap .5rem
-
 </style>

src/components/LocationMap.vue

@@ -11,25 +11,28 @@
 </template>
 
 <script lang="ts">
-  // Imports
-  import { Vue, Options } from "vue-class-component";
-  import { Prop, Watch } from "vue-property-decorator";
-  import MapBoxComponent from "@/components/Mapbox.vue";
+// Imports
+import { Vue, Options } from "vue-class-component";
+import { Prop } from "vue-property-decorator";
+import MapBoxComponent from "@/components/Mapbox.vue";
+import { ConfigWindow } from "@/types/ConfigWindow";
 
-  // Component options
-  @Options({ components: { MapBoxComponent } })
-  export default class LocationMap extends Vue {
-    // Props
-    @Prop({ required: true, default: 52.132633 }) private latitude!: number;
-    @Prop({ required: true, default: 5.291266 }) private longitude!: number;
+declare let window: ConfigWindow;
 
-    get accessToken(): string {
-      return process.env.VUE_APP_MAPBOX_ACCESS_TOKEN || "";
-    }
+// Component options
+@Options({ components: { MapBoxComponent } })
+export default class LocationMap extends Vue {
+  // Props
+  @Prop({ required: true, default: 52.132633 }) private latitude!: number;
+  @Prop({ required: true, default: 5.291266 }) private longitude!: number;
+
+  get accessToken(): string {
+    return window.$config.MAPBOX_ACCESS_TOKEN || "";
   }
+}
 </script>
 
 <style lang="stylus">
 .map
   height 100%
-</style>
+</style>