diff --git a/resources/components/finder.html b/resources/components/finder.html index 37bebdd..93597df 100644 --- a/resources/components/finder.html +++ b/resources/components/finder.html @@ -1,5 +1,5 @@
- +
@@ -30,8 +30,4 @@ Nie znaleziono więcej przystanków, spełniających te kryteria.
-
- - Wprowadź zapytanie powyżej, aby wyszukać przystanek. -
\ No newline at end of file diff --git a/resources/components/picker.html b/resources/components/picker.html deleted file mode 100644 index 78bb361..0000000 --- a/resources/components/picker.html +++ /dev/null @@ -1,12 +0,0 @@ -
- - - -
\ No newline at end of file diff --git a/resources/styles/_common.scss b/resources/styles/_common.scss index 0e8f0e2..ba1d4b6 100644 --- a/resources/styles/_common.scss +++ b/resources/styles/_common.scss @@ -79,8 +79,7 @@ font-size: medium; background: transparent; - padding-top: .5rem; - padding-bottom: .5rem; + padding: .5rem .75rem; line-height: $btn-line-height; diff --git a/resources/ts/app.ts b/resources/ts/app.ts index 0bdb0d6..5db619f 100644 --- a/resources/ts/app.ts +++ b/resources/ts/app.ts @@ -25,103 +25,11 @@ Vue.use(Vuex); import('bootstrap'), ]); - // here goes "public" API - window['czydojade'] = Object.assign({}, window['czydojade'], { - components - }); - store.dispatch('messages/update'); store.dispatch('load', window['czydojade'].state); - let intervals = { messages: null, departures: null }; - - window['app'] = new Vue({ - el: '#app', - store: store, - data: { - sections: { - messages: true - }, - settings: { - messages: false, - departures: false - }, - autorefresh: { - messages: { - active: true, - interval: 60 - }, - departures: { - active: true, - interval: 10 - } - }, - - }, - computed: { - messages(this: any) { - return { - count: this.$store.getters['messages/count'], - counts: this.$store.getters['messages/counts'], - state: this.$store.state.messages.state - }; - }, - departures(this: any) { - return { - state: this.$store.state.departures.state - }; - }, - stops: { - get(this: Vue) { - return this.$store.state.stops; - }, - set(this: Vue, value) { - this.$store.commit('updateStops', value); - } - } - }, - watch: { - stops(this: any, stops) { - this.updateDepartures({ stops }); - }, - autorefresh: { - immediate: true, - deep: true, - handler(this: any, settings) { - if (intervals.messages) { - clearInterval(intervals.messages); - intervals.messages = null; - } - - if (intervals.departures) { - clearInterval(intervals.departures); - intervals.messages = null; - } - - if (settings.messages.active) { - intervals.messages = setInterval(() => this.updateMessages(), Math.max(5, settings.messages.interval) * 1000); - } - - if (settings.departures.active) { - intervals.departures = setInterval(() => this.updateDepartures({ stops: this.stops }), Math.max(5, settings.departures.interval) * 1000); - } - } - } - }, - methods: { - ...mapActions({ - updateMessages: 'messages/update', - updateDepartures: 'departures/update' - }), - ...mapMutations({ - updateStops: 'updateStops' - }), - save(this: Vue) { - this.$store.dispatch('save').then(x => console.log(x)); - } - }, - mounted() { - this.$el.classList.remove('not-ready'); - } + // here goes "public" API + window['czydojade'] = Object.assign({}, window['czydojade'], { + components, application: new components.Application({ el: '#app' }) }); })(); diff --git a/resources/ts/components/app.ts b/resources/ts/components/app.ts index 4790a56..e664444 100644 --- a/resources/ts/components/app.ts +++ b/resources/ts/components/app.ts @@ -1,5 +1,94 @@ import Vue from 'vue' +import store from '../store' +import { Component, Watch } from "vue-property-decorator"; +import { Mutation, Action } from 'vuex-class' +import { ObtainPayload } from "../store/departures"; +import { Stop } from "../model"; +@Component({ store }) export class Application extends Vue { - private messages: boolean = true; + private sections = { + messages: true + }; + + private settings = { + messages: false, + departures: false + }; + + private autorefresh = { + messages: { + active: true, + interval: 60 + }, + departures: { + active: true, + interval: 10 + } + }; + + private intervals = { messages: null, departures: null }; + + get messages() { + return { + count: this.$store.getters['messages/count'], + counts: this.$store.getters['messages/counts'], + state: this.$store.state.messages.state + }; + } + + get departures() { + return { + state: this.$store.state.departures.state + }; + } + + get stops() { + return this.$store.state.stops; + } + + set stops(value) { + this.$store.commit('updateStops', value); + } + + mounted() { + this.$el.classList.remove('not-ready'); + } + + @Action('messages/update') updateMessages: () => void; + @Action('departures/update') updateDepartures: (payload: ObtainPayload) => void; + + @Mutation add: (stops: Stop[]) => void; + @Mutation remove: (stop: Stop) => void; + @Mutation clear: () => void; + + save() { + this.$store.dispatch('save').then(x => console.log(x)); + } + + @Watch('stops') + onStopUpdate(this: any, stops) { + this.updateDepartures({ stops }); + } + + @Watch('settings', { immediate: true, deep: true }) + onAutorefreshUpdate(settings) { + if (this.intervals.messages) { + clearInterval(this.intervals.messages); + this.intervals.messages = null; + } + + if (this.intervals.departures) { + clearInterval(this.intervals.departures); + this.intervals.messages = null; + } + + if (settings.messages.active) { + this.intervals.messages = setInterval(() => this.updateMessages(), Math.max(5, settings.messages.interval) * 1000); + } + + if (settings.departures.active) { + this.intervals.departures = setInterval(() => this.updateDepartures({ stops: this.stops }), Math.max(5, settings.departures.interval) * 1000); + } + } } \ No newline at end of file diff --git a/resources/ts/components/index.ts b/resources/ts/components/index.ts index b7d91f8..ce46728 100644 --- a/resources/ts/components/index.ts +++ b/resources/ts/components/index.ts @@ -5,3 +5,4 @@ export * from './departures' export * from './stop' export * from './messages' export * from './map' +export * from './app' \ No newline at end of file diff --git a/resources/ts/components/picker.ts b/resources/ts/components/picker.ts index bb87513..c88ba33 100644 --- a/resources/ts/components/picker.ts +++ b/resources/ts/components/picker.ts @@ -6,20 +6,6 @@ import { ensureArray, FetchingState, filter, map } from "../utils"; import { debounce } from "../decorators"; import urls from '../urls'; -@Component({ template: require("../../components/picker.html") }) -export class PickerComponent extends Vue { - @Prop({ default: () => [], type: Array }) - protected stops?: Stop[]; - - private remove(stop: Stop) { - this.$emit('update:stops', this.stops.filter(s => s != stop)); - } - - private add(stop: Stop|Stop[]) { - this.$emit('update:stops', [...this.stops, ...ensureArray(stop)]); - } -} - @Component({ template: require('../../components/finder.html') }) export class FinderComponent extends Vue { protected found?: StopGroups = {}; @@ -64,5 +50,4 @@ export class FinderComponent extends Vue { } } -Vue.component('StopPicker', PickerComponent); Vue.component('StopFinder', FinderComponent); diff --git a/resources/ts/filters.ts b/resources/ts/filters.ts index edf0d3f..8ca0110 100644 --- a/resources/ts/filters.ts +++ b/resources/ts/filters.ts @@ -33,13 +33,15 @@ Vue.directive('hover', { el.addEventListener('focusout', deactivate); }, unbind(el, binding) { - const { activate, deactivate, keyboard } = binding['events']; + if (typeof binding['events'] !== 'undefined') { + const { activate, deactivate, keyboard } = binding['events']; - el.removeEventListener('mouseenter', activate); - el.removeEventListener('click', activate); - el.removeEventListener('keydown', keyboard); - el.removeEventListener('mouseleave', deactivate); - el.removeEventListener('focusout', deactivate); + el.removeEventListener('mouseenter', activate); + el.removeEventListener('click', activate); + el.removeEventListener('keydown', keyboard); + el.removeEventListener('mouseleave', deactivate); + el.removeEventListener('focusout', deactivate); + } } }); @@ -72,6 +74,8 @@ Vue.directive('responsive', { } }, unbind(el, binding) { - window.removeEventListener('resize', binding['resize']); + if (typeof binding['resize'] !== 'undefined') { + window.removeEventListener('resize', binding['resize']); + } } }); diff --git a/resources/ts/store/departures.ts b/resources/ts/store/departures.ts index 012c69f..de3f585 100644 --- a/resources/ts/store/departures.ts +++ b/resources/ts/store/departures.ts @@ -10,7 +10,7 @@ export interface DeparturesState extends CommonState { departures: Departure[], } -interface ObtainPayload { +export interface ObtainPayload { stops: Stop[] } diff --git a/resources/ts/store/root.ts b/resources/ts/store/root.ts index 57b1120..a549eeb 100644 --- a/resources/ts/store/root.ts +++ b/resources/ts/store/root.ts @@ -1,6 +1,7 @@ import { Stop } from "../model"; import { ActionTree, MutationTree } from "vuex"; import urls from "../urls"; +import { ensureArray } from "../utils"; export interface RootState { stops: Stop[], @@ -16,7 +17,9 @@ export const state: RootState = { }; export const mutations: MutationTree = { - updateStops: (state, stops) => state.stops = stops, + add: (state, stops) => state.stops = [...state.stops, ...ensureArray(stops)], + remove: (state, stop) => state.stops = state.stops.filter(s => s != stop), + clear: (state) => state.stops = [], }; export const actions: ActionTree = { diff --git a/templates/app.html.twig b/templates/app.html.twig index 221839e..3342741 100644 --- a/templates/app.html.twig +++ b/templates/app.html.twig @@ -46,6 +46,7 @@ Odjazdy + @@ -77,12 +78,32 @@
+
+
+

+ + Przystanki +

+ +
+ +
    +
  • + + +
    • +
+

- - Przystanki + + Wybierz przystanki

- +