cleanup frontend directory structure

api/templates/bundles/NelmioApiDocBundle/SwaggerUi/index.html.twig

@@ -5,5 +5,5 @@
 {% block stylesheets %}
     {{ parent() }}
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700">
-    <link rel="stylesheet" href="{{ asset('dist/api.css') }}" />
-{% endblock stylesheets %}
+    <link rel="stylesheet" href="dist/api.css" />
+{% endblock stylesheets %}

front/src/components/departures.ts

@@ -7,12 +7,12 @@ import urls from "../urls";
 import { Jsonified } from "../utils";
 import * as moment from "moment";
 
-@Component({ template: require("../../components/departures.html"), store })
+@Component({ template: require("../../templates/departures.html"), store })
 export class DeparturesComponent extends Vue {
     @Departures.State departures: Departure[];
 }
 
-@Component({ template: require("../../components/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

@@ -7,7 +7,7 @@ import * as uuid from "uuid";
 import { Favourites } from "../store";
 
 
-@Component({ template: require('../../components/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('../../components/favourites/save.html' )})
+@Component({ template: require('../../templates/favourites/save.html' )})
 export class FavouritesAdderComponent extends Vue {
     @State stops: Stop[];
 

front/src/components/history.ts

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

front/src/components/line.ts

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

front/src/components/messages.ts

@@ -3,7 +3,7 @@ import { Component } from "vue-property-decorator";
 import { Message } from "../model/message";
 import store, { Messages, MessagesSettings } from '../store'
 
-@Component({ template: require("../../components/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

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

front/src/components/picker.ts

@@ -9,7 +9,7 @@ import { Mutation } from "vuex-class";
 import { HistoryEntry } from "../store/history";
 import { StopHistory } from "./history";
 
-@Component({ template: require('../../components/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('../../components/finder.html'),
+    template: require('../../templates/finder.html'),
     components: {
         "PickerStop": PickerStopComponent,
         "StopHistory": StopHistory,

front/src/components/settings/departures.ts

@@ -1,9 +1,9 @@
-import { Component, Prop } from "vue-property-decorator";
+import { Component } from "vue-property-decorator";
 import store, { DeparturesSettings } from "../../store";
 import Vue from "vue";
 import { DeparturesSettingsState } from "../../store/settings/departures";
 
-@Component({ template: require("../../../components/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

@@ -3,7 +3,7 @@ import store, { MessagesSettings } from "../../store";
 import Vue from "vue";
 import { MessagesSettingsState } from "../../store/settings/messages";
 
-@Component({template: require("../../../components/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('../../components/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('../../components/stop.html') })
+@Component({ template: require('../../templates/stop.html') })
 export class StopComponent extends Vue {
     @Prop(Object)
     public stop: Stop;
 }
 
-@Component({ template: require('../../components/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('../../components/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

@@ -7,7 +7,7 @@ import * as moment from 'moment';
 
 type ScheduledStopInfo = ScheduledStop & { visited: boolean, current: boolean };
 
-@Component({ template: require("../../components/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

@@ -34,7 +34,7 @@ function computeZIndexOfElement(element: HTMLElement): number {
 
 @Component({
     inheritAttrs: false,
-    template: require('../../../components/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

@@ -117,7 +117,7 @@ const extractAllIcons = (icons: Icon[]) => icons.map(icon => {
 library.add(...extractAllIcons(Object.values(definitions)));
 
 @Component({
-    template: require('../../../components/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('../../../components/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('../../../components/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('../../components/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("../../components/lazy.html") })
+@Component({ template: require("../../templates/lazy.html") })
 export class LazyComponent extends Vue {
     @Prop(Boolean)
     public    activate: boolean;

front/src/icons.ts

@@ -1,11 +1,11 @@
-import { IconPack, IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition, IconPack } from '@fortawesome/fontawesome-svg-core';
 
-import * as bus from "../icons/light/bus.svg";
-import * as tram from "../icons/light/tram.svg";
-import * as trolleybus from "../icons/light/trolleybus.svg";
-import * as metro from "../icons/light/metro.svg";
-import * as train from "../icons/light/train.svg";
-import * as unknown from "../icons/light/unknown.svg";
+import * as bus from "@resources/icons/light/bus.svg";
+import * as tram from "@resources/icons/light/tram.svg";
+import * as trolleybus from "@resources/icons/light/trolleybus.svg";
+import * as metro from "@resources/icons/light/metro.svg";
+import * as train from "@resources/icons/light/train.svg";
+import * as unknown from "@resources/icons/light/unknown.svg";
 
 export const faBus: IconDefinition = <any>{
     prefix:   'fac',
@@ -45,4 +45,4 @@ export const faUnknown = <any>{
 
 export const fac: IconPack = {
     faBus, faTram, faTrain, faTrolleybus, faMetro, faUnknown
-};
+};

front/tsconfig.json

@@ -7,8 +7,16 @@
     "sourceMap": true,
     "noImplicitThis": true,
     "moduleResolution": "node",
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "paths": {
+      "@templates/*": ["./templates/*"],
+      "@resources/*": ["./resources/*"],
+      "@styles/*": ["./styles/*"],
+      "@/*": ["./src/*"]
+    }
   },
-  "files": ["resources/ts/app.ts"],
-  "include": ["resources/ts/**/*.ts"]
+  "files": ["src/app.ts"],
+  "include": ["src/**/*.ts"]
 }

front/webpack.config.js

@@ -7,8 +7,8 @@ const { GenerateSW } = require('workbox-webpack-plugin');
 
 const config = {
     entry: {
-        main: ['./resources/ts/app.ts'],
-        api: ['./resources/styles/api.scss']
+        main: ['./src/app.ts'],
+        api: ['./styles/api.scss']
     },
     output: {
         path: path.resolve('./public/dist/'),
@@ -20,7 +20,11 @@ const config = {
         extensions: ['.tsx', '.ts', '.js'],
         alias: {
             'vue$': 'vue/dist/vue.esm.js',
-            'mapbox-gl$': 'mapbox-gl/dist/mapbox-gl-unminified'
+            'mapbox-gl$': 'mapbox-gl/dist/mapbox-gl-unminified',
+            "@templates": path.resolve(__dirname, "./templates"),
+            "@resources": path.resolve(__dirname, "./resources"),
+            "@styles": path.resolve(__dirname, "./styles"),
+            "@/": path.resolve(__dirname, "/src"),
         }
     },
     module: {