diff --git a/package.json b/package.json index 371bce0..4a2e80a 100644 --- a/package.json +++ b/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", diff --git a/resources/components/favourites/save.html b/resources/components/favourites/save.html index cf6d8f6..f65d937 100644 --- a/resources/components/favourites/save.html +++ b/resources/components/favourites/save.html @@ -1,14 +1,21 @@
- -
- - -
-

{{ error }}

+
+ +
+ + +
+

{{ error }}

+
+
    +
  • + +
  • +
diff --git a/resources/styles/_fabourites.scss b/resources/styles/_fabourites.scss index 0e7609a..9309cce 100644 --- a/resources/styles/_fabourites.scss +++ b/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; } } diff --git a/resources/styles/_form.scss b/resources/styles/_form.scss index 37df9bb..501fd56 100644 --- a/resources/styles/_form.scss +++ b/resources/styles/_form.scss @@ -5,3 +5,7 @@ label { margin-top: -0.2rem; display: block; } + +.form-group:last-child { + margin-bottom: 0; +} diff --git a/resources/styles/_stop.scss b/resources/styles/_stop.scss index c6d5346..f8191cc 100644 --- a/resources/styles/_stop.scss +++ b/resources/styles/_stop.scss @@ -7,10 +7,7 @@ .stop__name { flex: 1 0; line-height: 1.1; -} - -.stop__variant { - margin: 0 .5rem; + margin-right: .5em; } .stop__actions { diff --git a/resources/ts/components/favourites.ts b/resources/ts/components/favourites.ts index 68f9aaa..10c11fa 100644 --- a/resources/ts/components/favourites.ts +++ b/resources/ts/components/favourites.ts @@ -1,33 +1,46 @@ import Vue from 'vue' -import { Component } from 'vue-property-decorator' -import { namespace } from "vuex-class"; +import { Component, Prop } from 'vue-property-decorator' +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[]; - @Mutation remove: (fav: Favourite) => void; + @Favourites.State favourites: Favourite[]; + @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 name = this.name; - - const favourite: Favourite = { name, state }; + const favourite: Favourite = createFavouriteEntry(this.name, this.stops); if (this.validate(favourite)) { this.add(favourite); diff --git a/resources/ts/store/favourites.ts b/resources/ts/store/favourites.ts index 51d711c..ebc27eb 100644 --- a/resources/ts/store/favourites.ts +++ b/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; } @@ -34,4 +37,4 @@ export const localStorageSaver = (path: string, key: string): Plugin => (st }) }; -export default favourites; \ No newline at end of file +export default favourites; diff --git a/resources/ts/store/index.ts b/resources/ts/store/index.ts index a8820a0..0719309 100644 --- a/resources/ts/store/index.ts +++ b/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'); diff --git a/yarn.lock b/yarn.lock index 6aedee3..79c4d8d 100644 --- a/yarn.lock +++ b/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"