diff --git a/docker/nginx/czydojade b/docker/nginx/czydojade
index e9fbde6..0a33eed 100644
--- a/docker/nginx/czydojade
+++ b/docker/nginx/czydojade
@@ -26,4 +26,4 @@ server {
internal;
}
}
-}
\ No newline at end of file
+}
diff --git a/resources/components/departures.html b/resources/components/departures.html
index e2f02b8..20a1c04 100644
--- a/resources/components/departures.html
+++ b/resources/components/departures.html
@@ -2,8 +2,4 @@
<ul class="departures__list list-underlined">
<departure :departure="departure" :key="departure.key" v-for="departure in departures"/>
</ul>
- <div class="alert alert-info" v-if="stops.length === 0">
- <ui-icon icon="info"/>
- Wybierz przystanki korzystając z wyszukiwarki poniżej, aby zobaczyć listę odjazdów.
- </div>
</div>
diff --git a/resources/components/settings/departures.html b/resources/components/settings/departures.html
new file mode 100644
index 0000000..402fca6
--- /dev/null
+++ b/resources/components/settings/departures.html
@@ -0,0 +1,31 @@
+<fragment>
+ <div class="form-group">
+ <h3 class="popper__heading flex">
+ <label class="text" for="departures-auto-refresh-interval">
+ <ui-icon icon="refresh" fixed-width/>
+ autoodświeżanie
+ </label>
+ <ui-switch id="departures-auto-refresh" :value="autorefresh" @input="update({ autorefresh: $event })" class="flex-space-left"/>
+ </h3>
+ <div class="flex " v-if="autorefresh">
+ <label for="departures-auto-refresh-interval" class="text">
+ <span class="sr-only">częstotliwość odświeżania</span>
+ co
+ </label>
+ <div class="input-group input-group-sm">
+ <input type="text" class="form-control form-control-sm form-control-simple" id="departures-auto-refresh-interval"
+ :value="autorefreshInterval" @input="update({ autorefreshInterval: Number.parseInt($event.target.value) })" />
+ <div class="input-group-append">
+ <span class="input-group-text" aria-label="sekund">s</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="text" for="departures-count">
+ <ui-icon icon="line-bus" fixed-width/>
+ liczba wpisów
+ </label>
+ <ui-numeric-input id="departures-count" :value="displayedEntriesCount" @input="update({ displayedEntriesCount: $event })" :min="1" :max="20"/>
+ </div>
+</fragment>
diff --git a/resources/styles/_form.scss b/resources/styles/_form.scss
index 7e14acc..14da9d3 100644
--- a/resources/styles/_form.scss
+++ b/resources/styles/_form.scss
@@ -38,6 +38,11 @@ label {
margin-left: 0;
}
+.btn-addon:disabled {
+ opacity: 1;
+ color: rgba($dark, .5)
+}
+
.input-group-prepend {
margin-right: 0;
}
diff --git a/resources/ts/components/app.ts b/resources/ts/components/app.ts
index c8cfd93..0d06caa 100644
--- a/resources/ts/components/app.ts
+++ b/resources/ts/components/app.ts
@@ -2,9 +2,8 @@ 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";
-import { PopperComponent } from "./utils";
+import { DeparturesSettingsState } from "../store/settings/departures";
@Component({ store })
export class Application extends Vue {
@@ -23,15 +22,9 @@ export class Application extends Vue {
messages: {
active: true,
interval: 60
- },
- departures: {
- active: true,
- interval: 10
}
};
- private count = 8;
-
private intervals = { messages: null, departures: null };
get messages() {
@@ -60,16 +53,39 @@ export class Application extends Vue {
this.$el.classList.remove('not-ready');
}
+ created() {
+ this.initDeparturesRefreshInterval();
+ }
+
+ private initDeparturesRefreshInterval() {
+ const departuresAutorefreshCallback = () => {
+ const {autorefresh, autorefreshInterval} = this.$store.state['departures-settings'] as DeparturesSettingsState;
+
+ if (this.intervals.departures) {
+ clearInterval(this.intervals.departures);
+ }
+
+ if (autorefresh) {
+ this.intervals.departures = setInterval(() => this.updateDepartures(), Math.max(5, autorefreshInterval) * 1000)
+ }
+ };
+
+ this.$store.watch(({"departures-settings": state}) => state.autorefresh, departuresAutorefreshCallback);
+ this.$store.watch(({"departures-settings": state}) => state.autorefreshInterval, departuresAutorefreshCallback);
+
+ departuresAutorefreshCallback();
+ }
+
@Action('messages/update') updateMessages: () => void;
- @Action('departures/update') updateDepartures: (payload: ObtainPayload) => void;
+ @Action('departures/update') updateDepartures: () => void;
@Mutation add: (stops: Stop[]) => void;
@Mutation remove: (stop: Stop) => void;
@Mutation clear: () => void;
@Watch('stops')
- onStopUpdate(this: any, stops) {
- this.updateDepartures({ stops });
+ onStopUpdate() {
+ this.updateDepartures();
}
@Watch('autorefresh', { immediate: true, deep: true })
@@ -79,17 +95,8 @@ export class Application extends Vue {
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);
- }
}
}
diff --git a/resources/ts/components/departures.ts b/resources/ts/components/departures.ts
index 7668877..f85e846 100644
--- a/resources/ts/components/departures.ts
+++ b/resources/ts/components/departures.ts
@@ -1,21 +1,15 @@
import Vue from 'vue'
-import { Departure, Stop } from "../model";
+import { Departure } from "../model";
import { Component, Prop, Watch } from "vue-property-decorator";
-import { namespace } from 'vuex-class';
-import store from '../store'
+import store, { Departures } from '../store'
import { Trip } from "../model/trip";
import urls from "../urls";
import { Jsonified } from "../utils";
import * as moment from "moment";
-const { State } = namespace('departures');
-
@Component({ template: require("../../components/departures.html"), store })
export class DeparturesComponent extends Vue {
- @State departures: Departure[];
-
- @Prop(Array)
- stops: Stop[];
+ @Departures.State departures: Departure[];
}
@Component({ template: require("../../components/departures/departure.html") })
diff --git a/resources/ts/components/index.ts b/resources/ts/components/index.ts
index cda0742..337f4e2 100644
--- a/resources/ts/components/index.ts
+++ b/resources/ts/components/index.ts
@@ -10,3 +10,5 @@ export * from './app'
export * from './favourites'
export * from './trip'
export * from './ui'
+export * from './settings'
+export { Departures } from "../store";
diff --git a/resources/ts/components/settings/departures.ts b/resources/ts/components/settings/departures.ts
new file mode 100644
index 0000000..c7b2499
--- /dev/null
+++ b/resources/ts/components/settings/departures.ts
@@ -0,0 +1,21 @@
+import { Component, Prop } 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 })
+export class SettingsDepartures extends Vue {
+ @DeparturesSettings.State
+ public autorefresh: boolean;
+
+ @DeparturesSettings.State
+ public autorefreshInterval: number;
+
+ @DeparturesSettings.State
+ public displayedEntriesCount: number;
+
+ @DeparturesSettings.Mutation
+ public update: (state: Partial<DeparturesSettingsState>) => void;
+}
+
+Vue.component('SettingsDepartures', SettingsDepartures);
diff --git a/resources/ts/components/settings/index.ts b/resources/ts/components/settings/index.ts
new file mode 100644
index 0000000..10d35a6
--- /dev/null
+++ b/resources/ts/components/settings/index.ts
@@ -0,0 +1 @@
+export * from "./departures"
diff --git a/resources/ts/store/common.ts b/resources/ts/store/common.ts
index 49e12c0..9daa91b 100644
--- a/resources/ts/store/common.ts
+++ b/resources/ts/store/common.ts
@@ -1,7 +1,6 @@
import { FetchingState } from "../utils";
import { Moment } from "moment";
import { Module, MutationTree } from "vuex";
-import { RootState } from "./root";
import * as moment from "moment";
export interface CommonState {
@@ -24,4 +23,4 @@ export const mutations: MutationTree<CommonState> = {
}
};
-export default { state, mutations };
\ No newline at end of file
+export default { state, mutations };
diff --git a/resources/ts/store/departures.ts b/resources/ts/store/departures.ts
index 220ac06..201cbca 100644
--- a/resources/ts/store/departures.ts
+++ b/resources/ts/store/departures.ts
@@ -10,10 +10,6 @@ export interface DeparturesState extends CommonState {
departures: Departure[],
}
-export interface ObtainPayload {
- stops: Stop[]
-}
-
export const departures: Module<DeparturesState, RootState> = {
namespaced: true,
state: {
@@ -29,10 +25,15 @@ export const departures: Module<DeparturesState, RootState> = {
...common.mutations
},
actions: {
- async update({ commit }, { stops }: ObtainPayload) {
+ async update({ commit }) {
+ const count = this.state['departures-settings'].displayedEntriesCount;
+ const stops = this.state.stops;
+
commit('fetching');
+
const response = await fetch(urls.prepare(urls.departures, {
stop: stops.map(stop => stop.id),
+ limit: count || 8,
}));
if (!response.ok) {
diff --git a/resources/ts/store/index.ts b/resources/ts/store/index.ts
index 0719309..0feca3b 100644
--- a/resources/ts/store/index.ts
+++ b/resources/ts/store/index.ts
@@ -4,9 +4,10 @@ import messages, { MessagesState } from './messages';
import departures, { DeparturesState } from './departures'
import favourites, { FavouritesState, localStorageSaver } from './favourites'
-import { state, mutations, actions, RootState } from "./root";
+import { actions, mutations, RootState, state } from "./root";
import VuexPersistence from "vuex-persist";
import { namespace } from "vuex-class";
+import departureSettings from "./settings/departures";
export type State = {
messages: MessagesState;
@@ -15,7 +16,7 @@ export type State = {
} & RootState;
const localStoragePersist = new VuexPersistence<State>({
- reducer: state => ({ favourites: state.favourites })
+ modules: ['favourites', 'departures-settings'],
});
const sessionStoragePersist = new VuexPersistence<State>({
@@ -25,7 +26,12 @@ const sessionStoragePersist = new VuexPersistence<State>({
const store = new Vuex.Store({
state, mutations, actions,
- modules: { messages, departures, favourites },
+ modules: {
+ messages,
+ departures,
+ favourites,
+ 'departures-settings': departureSettings
+ },
plugins: [
// todo: remove after some time
localStorageSaver('favourites.favourites', 'favourites'),
@@ -37,3 +43,5 @@ const store = new Vuex.Store({
export default store;
export const Favourites = namespace('favourites');
+export const DeparturesSettings = namespace('departures-settings');
+export const Departures = namespace('departures');
diff --git a/resources/ts/store/settings/departures.ts b/resources/ts/store/settings/departures.ts
new file mode 100644
index 0000000..919c984
--- /dev/null
+++ b/resources/ts/store/settings/departures.ts
@@ -0,0 +1,24 @@
+import { ActionContext, Module } from "vuex";
+import { RootState } from "../root";
+
+export type DeparturesSettingsState = {
+ autorefresh: boolean;
+ autorefreshInterval?: number;
+ displayedEntriesCount?: number;
+}
+
+const departureSettings: Module<DeparturesSettingsState, RootState> = {
+ namespaced: true,
+ state: {
+ autorefresh: true,
+ autorefreshInterval: 10,
+ displayedEntriesCount: 10
+ },
+ mutations: {
+ update(state: DeparturesSettingsState, patch: Partial<DeparturesSettingsState>) {
+ Object.assign(state, patch);
+ }
+ }
+};
+
+export default departureSettings;
diff --git a/src/Controller/Api/v1/DeparturesController.php b/src/Controller/Api/v1/DeparturesController.php
index afa0798..2f98869 100644
--- a/src/Controller/Api/v1/DeparturesController.php
+++ b/src/Controller/Api/v1/DeparturesController.php
@@ -68,7 +68,7 @@ class DeparturesController extends Controller
*/
public function stops(DepartureRepository $departures, StopRepository $stops, Request $request)
{
- $stops = $stops->all(new IdFilter($request->query->get('stop')));
+ $stops = $stops->all(new IdFilter($request->query->get('stop', [])));
$result = $departures->current($stops, ...$this->getModifiersFromRequest($request));
return $this->json(
diff --git a/templates/app.html.twig b/templates/app.html.twig
index eb64bd6..d3b9f5f 100644
--- a/templates/app.html.twig
+++ b/templates/app.html.twig
@@ -73,38 +73,15 @@
</button>
<portal to="popups">
<popper reference="settings-departures" v-if="visibility.departures" arrow placement="left-start" @leave="visibility.departures = false">
- <div class="form-group">
- <h3 class="popper__heading flex">
- <label class="text" for="departures-auto-refresh-interval">
- <ui-icon icon="refresh" fixed-width></ui-icon>
- autoodświeżanie
- </label>
- <ui-switch id="departures-auto-refresh" v-model="autorefresh.departures.active" class="flex-space-left"></ui-switch>
- </h3>
- <div class="flex " v-if="autorefresh.departures.active">
- <label for="departures-auto-refresh-interval" class="text">
- <span class="sr-only">częstotliwość odświeżania</span>
- co
- </label>
- <div class="input-group input-group-sm">
- <input type="text" class="form-control form-control-sm form-control-simple" id="departures-auto-refresh-interval" v-model="autorefresh.departures.interval"/>
- <div class="input-group-append">
- <span class="input-group-text" aria-label="sekund">s</span>
- </div>
- </div>
- </div>
- </div>
- <div class="form-group">
- <label class="text" for="departures-count">
- <ui-icon icon="line-bus" fixed-width></ui-icon>
- Liczba wpisów
- </label>
- <ui-numeric-input id="departures-count" v-model="count" :min="1" :max="16"></ui-numeric-input>
- </div>
+ <settings-departures></settings-departures>
</popper>
</portal>
</header>
- <departures :stops="stops"></departures>
+ <departures :stops="stops" v-if="stops.length > 0"></departures>
+ <div class="alert alert-info" v-else>
+ <ui-icon icon="info"></ui-icon>
+ Wybierz przystanki korzystając z wyszukiwarki poniżej, aby zobaczyć listę odjazdów.
+ </div>
{% if provider.attribution %}
<div class="attribution">
<ui-icon icon="info"></ui-icon>