Merge branch 'release/1.0.0-beta.1'

Author: abrain

LICENSE

@@ -1,24 +1,20 @@
-# display-vue
+# Vue.js Display Frontend
 
-## Project setup
-```
-npm install
-```
+This is the web application, that runs on each Display unit.
+The app maintains a [Socket.IO](https://socket.io/) connection to the [Display Backend](https://github.com/alarmdisplay/display-backend) to get its configuration and data updates.
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## Development
+In order to run a development version on your local system, you need a [Node.js](https://nodejs.org/) environment.
+Clone the repository and run `npm install` inside the project folder to install all the dependencies.
 
-### Compiles and minifies for production
-```
-npm run build
-```
+Start the development server by running `npm run serve`, it will automatically restart when files have changed.
+Now you can access the server on http://localhost:8080 (may be a different port on your system, check the console output).
+If you run a development server of [Display Backend](https://github.com/alarmdisplay/display-backend) on http://localhost:3000, the requests are automatically proxied there.
+This allows for parallel development of the frontend and the backend.
 
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+## Deployment
+Run `npm run build`, which compiles and minifies the app for production.
+You find the result of the build process in a folder called `dist`.
+This folder only contains HTML, CSS, and JS files, which means they can be hosted as static files.
+By default, the app expects to be accessible under the path `/display/`.
+You can change this behaviour by adapting the `publicPath` in [vue.config.js](vue.config.js).

README.md

@@ -1,23 +1,37 @@
 {
   "name": "display-vue",
-  "version": "0.1.0",
-  "private": true,
+  "version": "1.0.0-beta.1",
+  "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alarmdisplay/display-frontend-vue.git"
+  },
+  "keywords": [],
+  "author": "Andreas Brain",
+  "license": "AGPL-3.0-only",
   "dependencies": {
-    "core-js": "^3.6.4",
-    "vue": "^2.6.11"
+    "@fortawesome/fontawesome-svg-core": "^1.2.29",
+    "@fortawesome/free-solid-svg-icons": "^5.13.1",
+    "@fortawesome/vue-fontawesome": "^0.1.10",
+    "core-js": "^3.6.5",
+    "moment": "^2.27.0",
+    "socket.io-client": "^2.3.0",
+    "vue": "^2.6.11",
+    "vue-moment": "^4.1.0",
+    "vue-toast-notification": "0.0.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.2.0",
-    "@vue/cli-plugin-eslint": "~4.2.0",
-    "@vue/cli-service": "~4.2.0",
+    "@vue/cli-plugin-babel": "^4.4.6",
+    "@vue/cli-plugin-eslint": "^4.4.6",
+    "@vue/cli-service": "^4.4.6",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.1.2",
+    "eslint-plugin-vue": "^6.2.2",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

package-lock.json

@@ -1,28 +1,59 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <SplashScreen v-if="showSplashScreen === true"/>
+    <DisplayApp v-else-if="authenticated === true" v-bind:views="views" :alerts="alerts"/>
+    <DisplaySetup v-else v-bind:display-identifier="displayId"/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import DisplayApp from "@/components/DisplayApp";
+import DisplaySetup from "@/components/DisplaySetup";
+import SplashScreen from "@/components/SplashScreen";
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    DisplayApp,
+    DisplaySetup,
+    SplashScreen
+  },
+  props: {
+    alerts: Array,
+    authenticated: Boolean,
+    displayId: String,
+    showSplashScreen: Boolean,
+    views: Array
   }
 }
 </script>
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Open Sans', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  height: 100vh;
+  background-color: #777777;
+  color: #dddddd;
+}
+
+.gridview-component {
+  overflow: hidden;
+  padding: 1em;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

package.json

@@ -0,0 +1,27 @@
+<template>
+    <DefaultAlertView :alert="mostRecentAlert"/>
+</template>
+
+<script>
+    import DefaultAlertView from "@/components/DefaultAlertView";
+
+    export default {
+        name: "AlertScreen",
+        components: {
+            DefaultAlertView
+        },
+        computed: {
+            mostRecentAlert: function () {
+                let alerts = Array.from(this.alerts)
+                alerts.sort((a, b) => b.time - a.time);
+                return alerts[0];
+            }
+        },
+        props: {
+            alerts: Array
+        }
+    }
+</script>
+
+<style scoped>
+</style>

src/App.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="gridview-component clock">
+        <div v-if="showTime" class="time">{{ time }}</div>
+        <div v-if="showDate" class="date">{{ date }}</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Clock',
+        computed: {
+            dateFormat: function () {
+                return Object.prototype.hasOwnProperty.call(this.options, 'dateFormat') ? this.options.dateFormat : 'll'
+            },
+            showDate: function () {
+                return Object.prototype.hasOwnProperty.call(this.options, 'showDate') ? this.options.showDate : true
+            },
+            showTime: function () {
+                return Object.prototype.hasOwnProperty.call(this.options, 'showTime') ? this.options.showTime : true
+            },
+            timeFormat: function () {
+                return Object.prototype.hasOwnProperty.call(this.options, 'timeFormat') ? this.options.timeFormat : 'LT'
+            }
+        },
+        data() {
+            return {
+                time: '',
+                date: ''
+            }
+        },
+        mounted: function() {
+            setInterval(this.updateTime, 1000);
+        },
+        methods: {
+            updateTime() {
+                this.time = this.$moment(Date.now()).format(this.timeFormat);
+                this.date = this.$moment(Date.now()).format(this.dateFormat);
+            }
+        },
+        props: {
+            instanceId: Number,
+            options: Object
+        },
+        watch: {
+            options: 'updateTime'
+        }
+    }
+</script>
+
+<style scoped>
+    .clock {
+        color: white;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .time {
+        font-size: 6em;
+        font-weight: bold;
+    }
+
+    .date {
+        font-size: 2.5em;
+    }
+</style>

src/components/AlertScreen.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="gridview-component">
+        <img :src="imgurl" alt="">
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DWDWarningMap",
+        computed: {
+            areaCode: function () {
+                return this.options.areaCode || 'DE';
+            },
+            baseUrl: function () {
+                switch (this.mapType) {
+                    case 'simple':
+                        return `https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_${this.stateCode}.png`;
+                    case 'area':
+                        return `https://www.dwd.de/DWD/warnungen/warnstatus/Schilder${this.schilderCode}.jpg`;
+                    default:
+                        return 'https://www.dwd.de/DWD/warnungen/warnapp_gemeinden/json/warnungen_gemeinde_map_de.png';
+                }
+            },
+            imgurl: function () {
+                return `${this.baseUrl}?${this.cacheBustingQuery}`;
+            },
+            mapType: function () {
+                return this.options.mapType || 'area';
+            },
+            schilderCode: function () {
+
+                switch (this.areaCode) {
+                    case 'DE':
+                        return 'D';
+                    case 'DE-BW':
+                        return 'SU';
+                    case 'DE-BY':
+                        return 'MS';
+                    case 'DE-BE':
+                    case 'DE-BB':
+                    case 'DE-MV':
+                        return 'PD';
+                    case 'DE-HB':
+                    case 'DE-HH':
+                    case 'DE-NI':
+                    case 'DE-SH':
+                        return 'HA';
+                    case 'DE-HE':
+                    case 'DE-RP':
+                    case 'DE-SL':
+                        return 'OF';
+                    case 'DE-NW':
+                        return 'EM';
+                    case 'DE-SN':
+                    case 'DE-ST':
+                    case 'DE-TH':
+                        return 'LZ';
+                    case 'Bodensee':
+                        return 'Bodensee';
+                    default:
+                        return 'D';
+                }
+            },
+            stateCode: function () {
+                switch (this.areaCode) {
+                    case 'DE-BW':
+                    case 'Bodensee':
+                        return 'baw';
+                    case 'DE-BY':
+                        return 'bay';
+                    case 'DE-BE':
+                    case 'DE-BB':
+                        return 'bbb';
+                    case 'DE-HB':
+                    case 'DE-NI':
+                        return 'nib';
+                    case 'DE-HH':
+                    case 'DE-SH':
+                        return 'shh';
+                    case 'DE-HE':
+                        return 'hes';
+                    case 'DE-MV':
+                        return 'mvp';
+                    case 'DE-NW':
+                        return 'nrw';
+                    case 'DE-RP':
+                    case 'DE-SL':
+                        return 'rps';
+                    case 'DE-SN':
+                        return 'sac';
+                    case 'DE-ST':
+                        return 'saa';
+                    case 'DE-TH':
+                        return 'thu';
+                    default:
+                        return 'de';
+                }
+            }
+        },
+        data: function () {
+            return {
+                cacheBustingQuery: Date.now()
+            }
+        },
+        mounted: function() {
+            // update the query part of the URL every 10 minutes, so it gets reloaded
+            setInterval(() => {
+                this.cacheBustingQuery = Date.now();
+            }, 600000);
+        },
+        props: {
+            /**
+             * Possible options:
+             * - areaCode: An ISO 3166-2 code for one of the 16 german states, 'DE' for entire Germany, or (only with
+             *   mapType = area) 'Bodensee' for the Bodensee region
+             * - mapType: Can be 'simple' for a map of a single state or entire Germany, or 'area' for a map of one or
+             *   more states including more detail about the warnings
+             */
+            options: Object
+        }
+    }
+</script>
+
+<style scoped>
+    img {
+        background-color: #ccc;
+        box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
+        max-height: 100%;
+        max-width: 100%;
+        object-fit: scale-down;
+    }
+</style>