kadet/czydojade
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Remove stop details and map from Stop component

Browse Source
This commit is contained in:
Kacper Donat 2020-01-14 15:26:44 +01:00
parent ecd02d21bb
commit 3b7932b976
11 changed files with 69 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/components/favourites.html
View File

@ -2,9 +2,9 @@
<ul class="list-underlined" v-if="favourites.length > 0">
<li v-for="favourite in favourites" class="flex">
<a href="#" @click="choose(favourite)" class="btn btn-action pl-0 flex-grow-1 text-left">
<span class="icon">
<fa :icon="['fal', 'star']"></fa>
</span>
<span class="icon">
<fa :icon="['fal', 'star']"></fa>
</span>
<span class="text">{{ favourite.name }}</span>
</a>
<button class="btn btn-action" @click="remove(favourite)">

6
resources/components/finder.html
View File

@ -22,10 +22,10 @@
</div>
<ul class="stop-group__stops list-underlined">
<li v-for="stop in group" :key="stop.id" class="d-flex">
<button @click="select(stop, $event)" class="btn btn-action">
<button @click="select(stop, $event)" class="btn btn-action align-self-start">
<fa :icon="['fal', 'check']" />
</button>
<stop :stop="stop" class="flex-grow-1"></stop>
<picker-stop :stop="stop" class="flex-grow-1"></picker-stop>
</li>
</ul>
</div>
@ -34,4 +34,4 @@
<fa :icon="['far', 'exclamation-triangle']"></fa>
Nie znaleziono więcej przystanków, spełniających te kryteria.
</div>
</div>
</div>

27
resources/components/picker/stop.html Normal file
View File

@ -0,0 +1,27 @@
<div class="d-flex flex-wrap">
<stop :stop="stop" />
<slot/>
<div class="stop__actions flex-space-left">
<slot name="actions">
<button class="btn btn-action" ref="action-info" @click="details = !details">
<fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
</button>
<button class="btn btn-action" ref="action-map" v-hover:map>
<fa :icon="['fal', 'map-marker-alt']"/>
</button>
</slot>
</div>
<fold :visible="details" class="stop__details-fold" lazy>
<stop-details :stop="stop"/>
</fold>
<popper reference="action-map" :visible="map" arrow class="popper--no-padding" style="width: 500px;" placement="right-start">
<div style="height: 300px">
<stop-map :stop="stop" />
</div>
</popper>
</div>

31
resources/components/stop.html
View File

@ -1,31 +1,4 @@
<div class="stop">
<span class="stop__name">{{ stop.name }}</span>
<span class="stop__description badge badge-dark" v-if="stop.variant">{{ stop.variant }}</span>
<slot/>
<div class="stop__actions flex-space-left">
<slot name="actions">
<button class="btn btn-action" ref="action-info" @click="details = !details">
<fa :icon="['fal', details ? 'chevron-circle-up' : 'info-circle']"/>
</button>
<button class="btn btn-action" ref="action-map" v-hover:map>
<fa :icon="['fal', 'map-marker-alt']"/>
</button>
</slot>
</div>
<fold :visible="details" class="stop__details-fold" lazy>
<stop-details :stop="stop"></stop-details>
</fold>
<popper reference="action-map" :visible="map" arrow class="popper--no-padding" style="width: 500px;" placement="right-start">
<div style="height: 300px">
<l-map :center="stop.location" :zoom=17 :options="{ zoomControl: false, dragging: false }">
<l-tile-layer url="//{s}.tile.osm.org/{z}/{x}/{y}.png" attribution='&copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors'></l-tile-layer>
<l-marker :lat-lng="stop.location"></l-marker>
</l-map>
</div>
</popper>
</div>
<span class="stop__variant badge badge-dark" v-if="stop.variant">{{ stop.variant }}</span>
</div>

0
resources/components/stop-details.html → resources/components/stop/details.html
View File

5
resources/components/stop/map.html Normal file
View File

@ -0,0 +1,5 @@
<l-map :center="stop.location" :zoom=17 :options="{ zoomControl: false, dragging: false }">
<l-tile-layer url="//{s}.tile.osm.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors'/>
<l-marker :lat-lng="stop.location"/>
</l-map>

4
resources/styles/_stop.scss
View File

@ -7,7 +7,7 @@
.stop__name {
}
.stop__description {
.stop__variant {
margin: 0 .5rem;
}
@ -46,4 +46,4 @@
flex: 0 0 50%;
}
}
}
}

17
resources/ts/components/picker.ts
View File

@ -6,7 +6,21 @@ import { ensureArray, FetchingState, filter, map } from "../utils";
import { debounce } from "../decorators";
import urls from '../urls';
@Component({ template: require('../../components/finder.html') })
@Component({ template: require('../../components/picker/stop.html') })
export class PickerStopComponent extends Vue {
@Prop(Object)
public stop: Stop;
details: boolean = false;
map: boolean = false;
}
@Component({
template: require('../../components/finder.html'),
components: {
"PickerStop": PickerStopComponent
}
})
export class FinderComponent extends Vue {
protected found?: StopGroups = {};
@ -51,3 +65,4 @@ export class FinderComponent extends Vue {
}
Vue.component('StopFinder', FinderComponent);
Vue.component('PickerStop', PickerStopComponent);

10
resources/ts/components/stop.ts
View File

@ -3,7 +3,7 @@ import { Line, Stop, Track } from "../model";
import Vue from 'vue';
import urls from "../urls";
@Component({ template: require('../../components/stop-details.html') })
@Component({ template: require('../../components/stop/details.html') })
class StopDetailsComponent extends Vue {
@Prop(Object)
public stop: Stop;
@ -39,10 +39,14 @@ class StopDetailsComponent extends Vue {
export class StopComponent extends Vue {
@Prop(Object)
public stop: Stop;
}
details: boolean = false;
map: boolean = false;
@Component({ template: require('../../components/stop/map.html') })
export class StopMapComponent extends Vue {
@Prop(Object)
public stop: Stop;
}
Vue.component('Stop', StopComponent);
Vue.component('StopDetails', StopDetailsComponent);
Vue.component('StopMap', StopMapComponent);

3
resources/ts/types/webpack.d.ts vendored
View File

@ -10,4 +10,5 @@ declare module "*.svg" {
declare module "*.png" {}
declare function require(path: string): any;
// @ts-ignore
declare function require(path: string): any;

4
templates/app.html.twig
View File

@ -102,10 +102,10 @@
<ul class="picker__stops list-underlined">
<li v-for="stop in stops" :key="stop.id" class="d-flex align-items-center">
<button @click="remove(stop)" class="btn btn-action">
<button @click="remove(stop)" class="btn btn-action align-self-start">
<fa :icon="['fal', 'times']"></fa>
</button>
<stop :stop="stop" class="flex-grow-1"></stop>
<picker-stop :stop="stop" class="flex-grow-1"></picker-stop>
</li>
</ul>
</section>