Add stop names in favourite save dialog

package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@types/mapbox-gl-leaflet": "^0.0.1",
+    "@types/uuid": "^3.4.6",
     "@types/workbox-window": "^4.3.3",
     "babel-minify-webpack-plugin": "^0.3.1",
     "clean-webpack-plugin": "^3.0.0",

resources/components/favourites/save.html

@@ -1,14 +1,21 @@
 <form class="favourite-add-form" @submit="save">
-    <label for="favourite_add_name">Nazwa</label>
+    <div class="form-group">
-    <div class="input-group">
+        <label for="favourite_add_name">Nazwa</label>
-        <input class="form-control form-control-sm" placeholder="np. Z pracy"
+        <div class="input-group">
-               :class="{ 'is-invalid': errors.name.length > 0 }" id="favourite_add_name"
+            <input class="form-control form-control-sm" placeholder="np. Z pracy"
-               v-model="name" v-autofocus/>
+                   :class="{ 'is-invalid': errors.name.length > 0 }" id="favourite_add_name"
-        <button class="btn btn-sm btn-dark" type="submit">
+                   v-model="name" v-autofocus/>
-            <fa :icon="['fal', 'check']"></fa>
+            <button class="btn btn-sm btn-dark" type="submit">
-        </button>
+                <fa :icon="['fal', 'check']"></fa>
-        <div v-if="errors.name.length > 0" class="invalid-feedback">
+            </button>
-            <p v-for="error in errors.name">{{ error }}</p>
+            <div v-if="errors.name.length > 0" class="invalid-feedback">
+                <p v-for="error in errors.name">{{ error }}</p>
+            </div>
         </div>
     </div>
+    <ul class="favourite__stops">
+        <li class="favourite__stop" v-for="stop in stops" :key="stop.id">
+            <stop :stop="stop"/>
+        </li>
+    </ul>
 </form>

resources/styles/_fabourites.scss

@@ -1,5 +1,32 @@
 @include media-breakpoint-up('sm') {
   .favourite-add-form {
-    width: 250px;
+    width: 300px;
+  }
+}
+
+.favourite__stops {
+  display: block;
+  white-space: nowrap;
+  padding-left: 0;
+  font-size: $small-font-size;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.favourite__stop {
+  display: inline-flex;
+
+  &::after {
+    content: ", ";
+    margin-right: .5em;
+  }
+
+  &:last-child::after {
+    content: none;
+    margin-right: 0;
   }
 }

resources/styles/_form.scss

@@ -5,3 +5,7 @@ label {
   margin-top: -0.2rem;
   display: block;
 }
+
+.form-group:last-child {
+  margin-bottom: 0;
+}

resources/styles/_stop.scss

@@ -7,10 +7,7 @@
 .stop__name {
   flex: 1 0;
   line-height: 1.1;
-}
+  margin-right: .5em;
-
-.stop__variant {
-  margin: 0 .5rem;
 }
 
 .stop__actions {

resources/ts/components/favourites.ts

@@ -1,33 +1,46 @@
 import Vue from 'vue'
-import { Component } from 'vue-property-decorator'
+import { Component, Prop } from 'vue-property-decorator'
-import { namespace } from "vuex-class";
+import { namespace, State } from "vuex-class";
 import { Favourite } from "../store/favourites";
 import { SavedState } from "../store/root";
+import { Stop } from "../model";
+import * as uuid from "uuid";
+import { Favourites } from "../store";
 
-const { State, Mutation } = namespace('favourites');
 
 @Component({ template: require('../../components/favourites.html' )})
 export class FavouritesComponent extends Vue {
-    @State favourites: Favourite[];
+    @Favourites.State favourites: Favourite[];
-    @Mutation remove: (fav: Favourite) => void;
+    @Favourites.Mutation remove: (fav: Favourite) => void;
 
     choose(favourite: Favourite) {
         this.$store.dispatch('load', favourite.state);
     }
 }
 
+function createFavouriteEntry(name: string, stops: Stop[]): Favourite {
+    return {
+        id: uuid.v4(),
+        name,
+        stops,
+        state: {
+            version: 1,
+            stops: stops.map(stop => stop.id),
+        },
+    }
+}
+
 @Component({ template: require('../../components/favourites/save.html' )})
 export class FavouritesAdderComponent extends Vue {
+    @State stops: Stop[];
+
     private name = "";
     private errors = { name: [] };
 
-    @Mutation add: (fav: Favourite) => void;
+    @Favourites.Mutation add: (favourite: Favourite) => void;
 
     async save() {
-        const state = await this.$store.dispatch('save') as SavedState;
+        const favourite: Favourite = createFavouriteEntry(this.name, this.stops);
-        const name  = this.name;
-
-        const favourite: Favourite = { name, state };
 
         if (this.validate(favourite)) {
             this.add(favourite);

resources/ts/store/favourites.ts

@@ -1,9 +1,12 @@
 import { RootState, SavedState } from "./root";
 import { Module, Plugin, Store } from "vuex";
 import * as utils from "../utils";
+import { Stop } from "../model";
 
 export interface Favourite {
+    id: string;
     name:  string;
+    stops: Stop[];
     state: SavedState;
 }
 

resources/ts/store/index.ts

@@ -6,6 +6,7 @@ import favourites, { FavouritesState, localStorageSaver } from './favourites'
 
 import { state, mutations, actions, RootState } from "./root";
 import VuexPersistence from "vuex-persist";
+import { namespace } from "vuex-class";
 
 export type State = {
     messages: MessagesState;
@@ -34,3 +35,5 @@ const store = new Vuex.Store({
 });
 
 export default store;
+
+export const Favourites = namespace('favourites');

yarn.lock

@@ -308,6 +308,13 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/uuid@^3.4.6":
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.6.tgz#d2c4c48eb85a757bf2927f75f939942d521e3016"
+  integrity sha512-cCdlC/1kGEZdEglzOieLDYBxHsvEOIg7kp/2FYyVR9Pxakq+Qf/inL3RKQ+PA8gOlI/NnL+fXmQH12nwcGzsHw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/webpack-sources@*":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.5.tgz#be47c10f783d3d6efe1471ff7f042611bd464a92"