add useful aliases for frontend

front/src/components/app.ts

@@ -2,9 +2,9 @@ import Vue from 'vue'
 import store from '../store'
 import { Component, Watch } from "vue-property-decorator";
 import { Action, Mutation } from 'vuex-class'
-import { Stop } from "../model";
-import { DeparturesSettingsState } from "../store/settings/departures";
-import { MessagesSettingsState } from "../store/settings/messages";
+import { Stop } from "@/model";
+import { DeparturesSettingsState } from "@/store/settings/departures";
+import { MessagesSettingsState } from "@/store/settings/messages";
 
 @Component({ store })
 export class Application extends Vue {

front/src/components/departures.ts

@@ -1,18 +1,18 @@
 import Vue from 'vue'
-import { Departure } from "../model";
+import { Departure } from "@/model";
 import { Component, Prop, Watch } from "vue-property-decorator";
 import store, { Departures, DeparturesSettings } from '../store'
-import { Trip } from "../model/trip";
+import { Trip } from "@/model/trip";
 import urls from "../urls";
-import { Jsonified } from "../utils";
+import { Jsonified } from "@/utils";
 import * as moment from "moment";
 
-@Component({ template: require("../../templates/departures.html"), store })
+@Component({ template: require("@templates/departures.html"), store })
 export class DeparturesComponent extends Vue {
     @Departures.State departures: Departure[];
 }
 
-@Component({ template: require("../../templates/departures/departure.html"), store })
+@Component({ template: require("@templates/departures/departure.html"), store })
 export class DepartureComponent extends Vue {
     @Prop(Object) departure: Departure;
     scheduledTrip: Trip = null;

front/src/components/favourites.ts

@@ -1,13 +1,13 @@
 import Vue from 'vue'
 import { Component, Watch } from 'vue-property-decorator'
 import { Mutation, State } from "vuex-class";
-import { Favourite } from "../store/favourites";
-import { Stop } from "../model";
+import { Favourite } from "@/store/favourites";
+import { Stop } from "@/model";
 import * as uuid from "uuid";
-import { Favourites } from "../store";
+import { Favourites } from "@/store";
 
 
-@Component({ template: require('../../templates/favourites.html' )})
+@Component({ template: require('@templates/favourites.html' )})
 export class FavouritesComponent extends Vue {
     @Favourites.State favourites: Favourite[];
     @Favourites.Mutation remove: (fav: Favourite) => void;
@@ -26,7 +26,7 @@ function createFavouriteEntry(name: string, stops: Stop[]): Favourite {
     }
 }
 
-@Component({ template: require('../../templates/favourites/save.html' )})
+@Component({ template: require('@templates/favourites/save.html' )})
 export class FavouritesAdderComponent extends Vue {
     @State stops: Stop[];
 

front/src/components/history.ts

@@ -1,11 +1,11 @@
 import Component from "vue-class-component";
 import Vue from "vue";
-import { History } from "../store";
-import { HistoryEntry } from "../store/history";
+import { History } from "@/store";
+import { HistoryEntry } from "@/store/history";
 import { Mutation } from "vuex-class";
-import { Stop } from "../model";
+import { Stop } from "@/model";
 
-@Component({ template: require('../../templates/stop/history.html' )})
+@Component({ template: require('@templates/stop/history.html' )})
 export class StopHistory extends Vue {
     @History.Getter all: HistoryEntry[];
 

front/src/components/line.ts

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
-import { Line } from "../model";
+import { Line } from "@/model";
 
-@Component({ template: require('../../templates/line.html' )})
+@Component({ template: require('@templates/line.html' )})
 export class LineComponent extends Vue {
     @Prop(Object)
     public line: Line;

front/src/components/messages.ts

@@ -1,9 +1,9 @@
 import Vue from 'vue';
 import { Component } from "vue-property-decorator";
-import { Message } from "../model/message";
+import { Message } from "@/model/message";
 import store, { Messages, MessagesSettings } from '../store'
 
-@Component({ template: require("../../templates/messages.html"), store })
+@Component({ template: require("@templates/messages.html"), store })
 export class MessagesComponent extends Vue {
     @Messages.State('messages')
     public allMessages: Message[];

front/src/components/page/providers.ts

@@ -1,11 +1,11 @@
 import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
-import { Provider } from "../../model";
-import { Jsonified } from "../../utils";
+import { Provider } from "@/model";
+import { Jsonified } from "@/utils";
 import * as moment from 'moment';
 
 @Component({
-    template: require('../../../templates/page/providers.html'),
+    template: require('@templates/page/providers.html'),
 })
 export class PageProviderList extends Vue {
     private providers: Provider[] = [];

front/src/components/picker.ts

@@ -2,14 +2,14 @@ import Component from "vue-class-component";
 import Vue from "vue";
 import { Line, StopGroup, StopGroups, StopWithDestinations as Stop } from "../model";
 import { Prop, Watch } from "vue-property-decorator";
-import { FetchingState, filter, map, match, unique } from "../utils";
-import { debounce } from "../decorators";
+import { FetchingState, filter, map, match, unique } from "@/utils";
+import { debounce } from "@/decorators";
 import urls from '../urls';
 import { Mutation } from "vuex-class";
-import { HistoryEntry } from "../store/history";
+import { HistoryEntry } from "@/store/history";
 import { StopHistory } from "./history";
 
-@Component({ template: require('../../templates/picker/stop.html') })
+@Component({ template: require('@templates/picker/stop.html') })
 export class PickerStopComponent extends Vue {
     @Prop(Object)
     public stop: Stop;
@@ -50,7 +50,7 @@ export class PickerStopComponent extends Vue {
 }
 
 @Component({
-    template: require('../../templates/finder.html'),
+    template: require('@templates/finder.html'),
     components: {
         "PickerStop": PickerStopComponent,
         "StopHistory": StopHistory,

front/src/components/settings/departures.ts

@@ -1,9 +1,9 @@
 import { Component } from "vue-property-decorator";
 import store, { DeparturesSettings } from "../../store";
 import Vue from "vue";
-import { DeparturesSettingsState } from "../../store/settings/departures";
+import { DeparturesSettingsState } from "@/store/settings/departures";
 
-@Component({ template: require("../../../templates/settings/departures.html"), store })
+@Component({ template: require("@templates/settings/departures.html"), store })
 export class SettingsDepartures extends Vue {
     @DeparturesSettings.State
     public autorefresh: boolean;

front/src/components/settings/messages.ts

@@ -1,9 +1,9 @@
 import { Component } from "vue-property-decorator";
 import store, { MessagesSettings } from "../../store";
 import Vue from "vue";
-import { MessagesSettingsState } from "../../store/settings/messages";
+import { MessagesSettingsState } from "@/store/settings/messages";
 
-@Component({template: require("../../../templates/settings/messages.html"), store})
+@Component({template: require("@templates/settings/messages.html"), store})
 export class SettingsMessages extends Vue {
     @MessagesSettings.State
     public autorefresh: boolean;

front/src/components/stop.ts

@@ -3,7 +3,7 @@ import { Line, Stop, Track } from "../model";
 import Vue from 'vue';
 import urls from "../urls";
 
-@Component({ template: require('../../templates/stop/details.html') })
+@Component({ template: require('@templates/stop/details.html') })
 class StopDetailsComponent extends Vue {
     @Prop(Object)
     public stop: Stop;
@@ -35,13 +35,13 @@ class StopDetailsComponent extends Vue {
     }
 }
 
-@Component({ template: require('../../templates/stop.html') })
+@Component({ template: require('@templates/stop.html') })
 export class StopComponent extends Vue {
     @Prop(Object)
     public stop: Stop;
 }
 
-@Component({ template: require('../../templates/stop/map.html') })
+@Component({ template: require('@templates/stop/map.html') })
 export class StopMapComponent extends Vue {
     @Prop(Object)
     public stop: Stop;

front/src/components/tooltip.ts

@@ -10,7 +10,7 @@ type Trigger = "hover" | "focus" | "long-press";
 
 const longPressTimeout = 1000;
 
-@Component({ template: require('../../templates/tooltip.html') })
+@Component({ template: require('@templates/tooltip.html') })
 export class TooltipComponent extends Vue {
     @Prop({ type: String, default: "top" }) public placement: string;
     @Prop({ type: Number, default: 400 }) public delay: number;

front/src/components/trip.ts

@@ -1,13 +1,13 @@
 import Vue from "vue";
 import Component from "vue-class-component";
 import { Prop } from "vue-property-decorator";
-import { ScheduledStop } from "../model/trip";
-import { Stop } from "../model";
+import { ScheduledStop } from "@/model/trip";
+import { Stop } from "@/model";
 import * as moment from 'moment';
 
 type ScheduledStopInfo = ScheduledStop & { visited: boolean, current: boolean };
 
-@Component({ template: require("../../templates/trip.html") })
+@Component({ template: require("@templates/trip.html") })
 export class TripComponent extends Vue {
     @Prop(Array) public schedule: ScheduledStop[];
     @Prop(Object) public current: Stop;

front/src/components/ui/dialog.ts

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import { Component, Prop, Watch } from "vue-property-decorator";
 import Popper, { Placement } from "popper.js";
-import { defaultBreakpoints } from "../../filters";
+import { defaultBreakpoints } from "@/filters";
 
 /**
  * How popup will be presented to user:
@@ -34,7 +34,7 @@ function computeZIndexOfElement(element: HTMLElement): number {
 
 @Component({
     inheritAttrs: false,
-    template: require('../../../templates/ui/dialog.html'),
+    template: require('@templates/ui/dialog.html'),
 })
 export default class UiDialog extends Vue {
     @Prop({ type: String, default: "popup" })

front/src/components/ui/icon.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
 import { IconDefinition, library } from "@fortawesome/fontawesome-svg-core"
-import { Dictionary } from "../../utils";
+import { Dictionary } from "@/utils";
 import {
     faBullhorn,
     faCheck,
@@ -34,7 +34,7 @@ import {
     faSpinnerThird
 } from "@fortawesome/pro-regular-svg-icons";
 import { faExclamationTriangle as faSolidExclamationTriangle, faWalking } from "@fortawesome/pro-solid-svg-icons";
-import { fac } from "../../icons";
+import { fac } from "@/icons";
 import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from "@fortawesome/vue-fontawesome";
 
 type IconDescription = { icon: IconDefinition, [prop: string]: any }
@@ -117,7 +117,7 @@ const extractAllIcons = (icons: Icon[]) => icons.map(icon => {
 library.add(...extractAllIcons(Object.values(definitions)));
 
 @Component({
-    template: require('../../../templates/ui/icon.html'),
+    template: require('@templates/ui/icon.html'),
     components: {
         fa: FontAwesomeIcon,
         faLayers: FontAwesomeLayers,

front/src/components/ui/numeric-input.ts

@@ -3,7 +3,7 @@ import { Component, Prop } from 'vue-property-decorator'
 import * as uuid from "uuid";
 
 @Component({
-    template: require('../../../templates/ui/numeric.html'),
+    template: require('@templates/ui/numeric.html'),
     inheritAttrs: false
 })
 export class UiNumericInput extends Vue {

front/src/components/ui/switch.ts

@@ -3,7 +3,7 @@ import { Component, Prop } from 'vue-property-decorator'
 import * as uuid from "uuid";
 
 @Component({
-    template: require('../../../templates/ui/switch.html'),
+    template: require('@templates/ui/switch.html'),
     inheritAttrs: false
 })
 export class UiSwitch extends Vue {

front/src/components/utils.ts

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { Component, Prop, Watch } from "vue-property-decorator";
 
 
-@Component({ template: require('../../templates/fold.html') })
+@Component({ template: require('@templates/fold.html') })
 export class FoldComponent extends Vue {
     private observer: MutationObserver;
 
@@ -34,7 +34,7 @@ export class FoldComponent extends Vue {
     }
 }
 
-@Component({ template: require("../../templates/lazy.html") })
+@Component({ template: require("@templates/lazy.html") })
 export class LazyComponent extends Vue {
     @Prop(Boolean)
     public    activate: boolean;

front/src/store/common.ts

@@ -1,7 +1,7 @@
-import { FetchingState } from "../utils";
-import { Moment } from "moment";
-import { Module, MutationTree } from "vuex";
+import { FetchingState } from "@/utils";
 import * as moment from "moment";
+import { Moment } from "moment";
+import { MutationTree } from "vuex";
 
 export interface CommonState {
     state: FetchingState,

front/src/store/departures.ts

@@ -1,10 +1,10 @@
 import { Module } from "vuex";
 import { RootState } from "./root";
-import { Departure, Line, Stop } from "../model";
+import { Departure, Line } from "../model";
 import * as moment from 'moment'
 import common, { CommonState } from './common'
 import urls from "../urls";
-import { Jsonified } from "../utils";
+import { Jsonified } from "@/utils";
 
 export interface DeparturesState extends CommonState {
     departures: Departure[],

front/src/store/favourites.ts

@@ -1,7 +1,7 @@
 import { RootState } from "./root";
 import { Module } from "vuex";
-import { Stop } from "../model";
-import { except } from "../utils";
+import { Stop } from "@/model";
+import { except } from "@/utils";
 
 export interface Favourite {
     id: string;

front/src/store/history.ts

@@ -1,9 +1,9 @@
-import { Stop } from "../model";
+import { Stop } from "@/model";
 import { Module } from "vuex";
 import { RootState } from "./root";
 import * as moment from "moment";
 import { Moment } from "moment";
-import { Jsonified } from "../utils";
+import { Jsonified } from "@/utils";
 
 export interface HistoryEntry {
     stop: Stop,

front/src/store/messages.ts

@@ -1,9 +1,9 @@
 import { ActionContext, Module } from "vuex";
 import { RootState } from "./root";
-import { Message, MessageType } from "../model/message";
+import { Message, MessageType } from "@/model/message";
 import common, { CommonState } from "./common";
 import urls from "../urls";
-import { Jsonified } from "../utils";
+import { Jsonified } from "@/utils";
 import * as moment from 'moment';
 
 export interface MessagesState extends CommonState {

front/src/store/migrations.ts

@@ -1,4 +1,4 @@
-import { distinct } from "../utils";
+import { distinct } from "@/utils";
 import urls from "../urls";
 import * as uuid from "uuid";
 

front/src/store/root.ts

@@ -1,7 +1,7 @@
-import { Stop } from "../model";
+import { Stop } from "@/model";
 import { ActionTree, MutationTree } from "vuex";
 import urls from "../urls";
-import { ensureArray } from "../utils";
+import { ensureArray } from "@/utils";
 
 export interface RootState {
     stops: Stop[],

front/webpack.config.js

@@ -24,7 +24,7 @@ const config = {
             "@templates": path.resolve(__dirname, "./templates"),
             "@resources": path.resolve(__dirname, "./resources"),
             "@styles": path.resolve(__dirname, "./styles"),
-            "@/": path.resolve(__dirname, "/src"),
+            "@": path.resolve(__dirname, "./src"),
         }
     },
     module: {