Commit 62d73518 authored by dagal's avatar dagal
Browse files

Line filter

parent 4639fc4e
......@@ -11,9 +11,16 @@
</div>
<div class="trippy-map-filters">
<stop-search v-model="startStop" v-bind:stops="stops" v-on:input="selectStop" placeholder="Find starting stop"></stop-search>
<stop-search v-model="endStop" v-bind:stops="stops" v-on:input="(s) => selectStop(s, true)" placeholder="Find ending stop"></stop-search>
<time-filter v-model="selectedDate" v-bind:min-date="minDate" v-bind:max-date="maxDate"></time-filter>
<div class="filter-column">
<stop-search v-model="startStop" v-bind:stops="startStops" v-on:input="selectStop" placeholder="Find starting stop"></stop-search>
<stop-search v-model="endStop" v-bind:stops="startStops" v-on:input="(s) => selectStop(s, true)" placeholder="Find ending stop"></stop-search>
<time-filter v-model="selectedDate" v-bind:min-date="minDate" v-bind:max-date="maxDate"></time-filter>
</div>
<div class="filter-column">
<line-filter v-model="startLine" v-bind:lines="startLines" v-on:input="selectLine"></line-filter>
<line-filter v-model="endLine" v-bind:lines="endLines" v-on:input="(l) => selectLine(l, true)"></line-filter>
</div>
</div>
<stop-popup ref="hiddenStopPopup" v-bind:stop="selectedStop"></stop-popup>
......
<template>
<div class="trippy-search-field">
<autocomplete v-model="selectedLine" :options="lines" option-key="id" option-label="long_name" :placeholder="placeholder"></autocomplete>
</div>
</template>
<script>
import Autocomplete from "vue-single-select";
export default {
name: "LineFilter",
components: {Autocomplete},
props: {
lines: {
type: Array,
required: true,
default: []
},
value: {},
placeholder: {
type: String,
default: "Any line"
}
},
computed: {
selectedLine: {
get() {
return this.value;
},
set(s) {
this.$emit("input", s);
}
}
}
}
</script>
<style scoped>
.trippy-search-field {
}
</style>
......@@ -19,3 +19,8 @@ html,body, #app {
margin-top: 1rem;
}
.filter-column {
display: inline-block;
float: left;
margin-right: 5px;
}
......@@ -8,6 +8,7 @@ import XYPopup from "./components/XYPopup.vue";
import DateTimePicker from "./components/DateTimePicker.vue";
import TimeFilter from "./components/TimeFilter.vue";
import StopSearch from "./components/StopSearch.vue";
import LineFilter from "./components/LineFilter.vue";
import Datepicker from "vuejs-datepicker";
import VueTimepicker from "vuejs-timepicker";
import { PulseLoader } from "vue-spinner/dist/vue-spinner";
......@@ -24,7 +25,7 @@ Vue.use(VueRouter);
let app = new Vue({
el: "#app",
router,
components: {StopPopup, XYPopup, DateTimePicker, TimeFilter, StopSearch, Datepicker, PulseLoader, VueTimepicker, Autocomplete},
components: {LineFilter, StopPopup, XYPopup, DateTimePicker, TimeFilter, StopSearch, Datepicker, PulseLoader, VueTimepicker, Autocomplete},
data: {
minDate: new Date(0),
maxDate: null,
......@@ -35,11 +36,18 @@ let app = new Vue({
selectedStop: {id: 0, name: ""},
startStop: null,
endStop: null,
startLine: null,
endLine: null,
xyStops: {
start: null,
end: null
},
stops: [],
lines: [],
startStops: [],
endStops: [],
startLines: [],
endLines: [],
stopMarkers: {},
contextStop: null
},
......@@ -76,6 +84,22 @@ let app = new Vue({
}
}
},
selectLine(l, isEndLine) {
if (isEndLine) {
if (!l) {
this.endStops = this.stops;
} else {
this.endStops = this.stops.filter(s => l.stops.indexOf(s.id) > -1);
}
} else {
if (!l) {
this.startStops = this.stops;
} else {
this.startStops = this.stops.filter(s => l.stops.indexOf(s.id) > -1);
}
}
},
secondsFromMinDate(d) {
if (this.minDate) {
return (d.getTime() - this.minDate.getTime())/1000;
......@@ -169,6 +193,8 @@ map.on("contextmenu.hide", (e) => {
getty.jsonGet("/stops").then(function (fc) {
stopLayer.addData(fc);
app.stops = fc.features.map(f => f.properties);
app.startStops = app.stops;
app.endStops = app.stops;
app.stops.sort((f1,f2) => {
if (f1.name < f2.name) {
return -1;
......@@ -182,6 +208,9 @@ getty.jsonGet("/stops").then(function (fc) {
getty.jsonGet("/lines").then(function (fc) {
lineLayer.addData(fc);
app.lines = fc.features.map(f => f.properties);
app.startLines = app.lines;
app.endLines = app.lines;
});
getty.jsonGet("/time").then(function (timeRange) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment