refreshing messages

resources/components/stop.html

@@ -10,7 +10,7 @@
                 <fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
             </button>
 
-            <button class="btn btn-action" ref="action-map" @click="map = true" @focusout="map = false">
+            <button class="btn btn-action" ref="action-map" v-hover:map>
                 <fa :icon="['fal', 'map-marked-alt']"/>
             </button>
         </slot>

resources/ts/components/departures.ts

@@ -2,12 +2,11 @@ import Vue from 'vue'
 import { Departure, Stop } from "../model";
 import { Component, Prop, Watch } from "vue-property-decorator";
 import urls from '../urls';
-import template = require("../../components/departures.html");
 import moment = require("moment");
 import { Jsonified } from "../utils";
 import { debounce } from "../decorators";
 
-@Component({ template })
+@Component({ template: require("../../components/departures.html") })
 export class Departures extends Vue {
     private _intervalId: number;
 

resources/ts/components/messages.ts

@@ -1,18 +1,17 @@
 import Vue from 'vue';
 import { Component, Prop, Watch } from "vue-property-decorator";
-
-import messages = require("../../components/messages.html");
 import { Message } from "../model/message";
 import urls from "../urls";
 
 import { faInfoCircle, faExclamationTriangle, faQuestionCircle } from "@fortawesome/pro-light-svg-icons";
 
-@Component({ template: messages })
+@Component({ template: require("../../components/messages.html") })
 export class MessagesComponent extends Vue {
     public messages: Message[] = [];
 
     async mounted() {
         this.update();
+        setInterval(() => this.update(), 5000);
     }
 
     async update() {

resources/ts/components/picker.ts

@@ -1,17 +1,12 @@
 import Component from "vue-class-component";
 import Vue from "vue";
 import { Stop, StopGroup, StopGroups } from "../model";
-import urls from '../urls';
-
-import picker = require("../../components/picker.html");
-import finder = require('../../components/finder.html');
-import stop   = require('../../components/stop.html');
-
 import { Prop, Watch } from "vue-property-decorator";
 import { filter, map } from "../utils";
 import { debounce } from "../decorators";
+import urls from '../urls';
 
-@Component({ template: picker })
+@Component({ template: require("../../components/picker.html") })
 export class PickerComponent extends Vue {
     protected stops?: Stop[] = [];
 
@@ -26,7 +21,7 @@ export class PickerComponent extends Vue {
 
 type FinderState = 'fetching' | 'ready' | 'error';
 
-@Component({ template: finder })
+@Component({ template: require('../../components/finder.html') })
 export class FinderComponent extends Vue {
     protected found?: StopGroups = {};
 

resources/ts/components/stop.ts

@@ -1,12 +1,9 @@
 import { Component, Prop } from "vue-property-decorator";
 import { Line, Stop, Track } from "../model";
 import Vue from 'vue';
-
-import template = require('../../components/stop.html');
-import details  = require('../../components/stop-details.html');
 import urls from "../urls";
 
-@Component({ template: details })
+@Component({ template: require('../../components/stop-details.html') })
 class StopDetailsComponent extends Vue {
     @Prop(Object)
     public stop: Stop;
@@ -38,7 +35,7 @@ class StopDetailsComponent extends Vue {
     }
 }
 
-@Component({ template })
+@Component({ template: require('../../components/stop.html') })
 export class StopComponent extends Vue {
     @Prop(Object)
     public stop: Stop;

resources/ts/components/utils.ts

@@ -2,11 +2,7 @@ import Vue from 'vue';
 import { Component, Prop, Watch } from "vue-property-decorator";
 import Popper, { Placement } from "popper.js";
 
-import popper   = require("../../components/popper.html");
+@Component({ template: require("../../components/popper.html") })
-import lazy     = require("../../components/lazy.html");
-import collapse = require("../../components/fold.html");
-
-@Component({ template: popper })
 export class PopperComponent extends Vue {
     @Prop(String)
     public reference: string;
@@ -43,7 +39,7 @@ export class PopperComponent extends Vue {
     }
 }
 
-@Component({ template: collapse })
+@Component({ template: require('../../components/fold.html') })
 export class FoldComponent extends Vue {
     private observer: MutationObserver;
 
@@ -55,8 +51,8 @@ export class FoldComponent extends Vue {
 
     mounted() {
         this.resize();
-        this.observer = new MutationObserver(() => this.resize());
 
+        this.observer = new MutationObserver(() => this.resize());
         this.observer.observe(this.$refs['inner'] as Node, {
             characterData: true,
             subtree: true,
@@ -75,7 +71,7 @@ export class FoldComponent extends Vue {
     }
 }
 
-@Component({ template: lazy })
+@Component({ template: require("../../components/lazy.html") })
 export class LazyComponent extends Vue {
     @Prop(Boolean)
     public    activate: boolean;

resources/ts/filters.ts

@@ -2,7 +2,22 @@ import { signed } from "./utils";
 import Vue from 'vue';
 
 Vue.filter('signed', signed);
-Vue.directive('hover', (el, binding) => {
+
-    el.addEventListener('mouseenter', binding.value);
+Vue.directive('hover', (el, binding, node) => {
-    el.addEventListener('mouseleave', binding.value);
+    const update = (hovered: boolean, e: Event) => {
+        if (typeof binding.value === 'function') {
+            binding.value(hovered, e);
+        }
+
+        if (typeof binding.value === 'boolean') {
+            node.context[binding.expression] = hovered;
+        }
+
+        if (typeof binding.arg !== 'undefined') {
+            node.context[binding.arg] = hovered;
+        }
+    };
+
+    el.addEventListener('mouseenter', e => update(true, e));
+    el.addEventListener('mouseleave', e => update(false, e));
 });

resources/ts/types/webpack.d.ts

@@ -9,3 +9,5 @@ declare module "*.svg" {
 }
 
 declare module "*.png" {}
+
+declare function require(path: string): any;