From f8c3f77c83534a10c94fa915b3a8aae34616eda8 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Mon, 17 Sep 2018 22:46:02 +0200 Subject: [PATCH] new layout --- resources/components/departures.html | 21 ++--------- resources/components/finder.html | 2 +- resources/components/picker.html | 2 -- resources/components/stop.html | 4 +-- resources/styles/_common.scss | 7 ++++ resources/styles/_departure.scss | 41 +++++++++++---------- resources/styles/main.scss | 2 ++ resources/ts/app.ts | 6 +++- resources/ts/components/departures.ts | 20 ++++++++--- resources/ts/components/picker.ts | 15 ++++---- resources/ts/decorators.ts | 24 +++++++++++++ resources/ts/font-awesome.ts | 6 ++-- resources/ts/utils.ts | 5 +++ templates/app.html.twig | 51 ++++++++++++++++++++------- templates/base.html.twig | 2 +- 15 files changed, 137 insertions(+), 71 deletions(-) diff --git a/resources/components/departures.html b/resources/components/departures.html index dd4ea85..c114968 100644 --- a/resources/components/departures.html +++ b/resources/components/departures.html @@ -1,21 +1,4 @@ -
-
-
-
- - -
-
- - s -
-
- - -
- +
  • @@ -35,7 +18,7 @@
    - +
    • diff --git a/resources/components/finder.html b/resources/components/finder.html index cc35fd5..37bebdd 100644 --- a/resources/components/finder.html +++ b/resources/components/finder.html @@ -10,7 +10,7 @@

    {{ name }}

    - diff --git a/resources/components/picker.html b/resources/components/picker.html index 19c7f8d..78bb361 100644 --- a/resources/components/picker.html +++ b/resources/components/picker.html @@ -1,6 +1,4 @@
    - -
    @@ -20,7 +20,7 @@ - +
    diff --git a/resources/styles/_common.scss b/resources/styles/_common.scss index 3817c30..a93e881 100644 --- a/resources/styles/_common.scss +++ b/resources/styles/_common.scss @@ -54,7 +54,14 @@ padding-top: .5rem; padding-bottom: .5rem; + line-height: $btn-line-height; + &:hover { background: none; } + + .btn { + margin-top: -.5rem; + margin-bottom: -.5rem; + } } \ No newline at end of file diff --git a/resources/styles/_departure.scss b/resources/styles/_departure.scss index 926a346..b6d54c7 100644 --- a/resources/styles/_departure.scss +++ b/resources/styles/_departure.scss @@ -7,7 +7,7 @@ flex: 3 0; .line__symbol { - min-width: 5rem; + min-width: 6rem; } } @@ -28,6 +28,28 @@ text-decoration: line-through; } } + + + +} + +.departures { + &.size-md { + .departure__time { + order: 2; + } + + .departure__stop { + flex: 2 0; + width: auto; + } + } + + &.size-sm { + .departure__time { + margin-left: auto; + } + } } .departures__actions { @@ -41,20 +63,3 @@ width: auto; } } - -@include media-breakpoint-up(lg) { - .departure__time { - order: 2; - } - - .departure__stop { - flex: 2 0; - width: auto; - } -} - -@include media-breakpoint-up(sm) { - .departure__time { - margin-left: auto; - } -} \ No newline at end of file diff --git a/resources/styles/main.scss b/resources/styles/main.scss index f0456a7..8fb025e 100644 --- a/resources/styles/main.scss +++ b/resources/styles/main.scss @@ -20,6 +20,8 @@ $default-spacing: .5rem; $alert-margin-bottom: $default-spacing; $headings-margin-bottom: $default-spacing; +$container-max-widths: map-merge($container-max-widths, ( xl: 1320px )); + @import "~bootstrap/scss/bootstrap"; @import "common"; diff --git a/resources/ts/app.ts b/resources/ts/app.ts index a58d8c2..c50ddbe 100644 --- a/resources/ts/app.ts +++ b/resources/ts/app.ts @@ -12,6 +12,7 @@ window['$'] = window['jQuery'] = $; window['Popper'] = Popper; // dependencies +import './font-awesome'; import 'bootstrap' import { Vue } from "vue-property-decorator"; @@ -19,7 +20,6 @@ import './filters' // async dependencies (async function () { - import ('./font-awesome'); })(); // here goes "public" API @@ -30,9 +30,13 @@ window['czydojade'] = { window['app'] = new Vue({ el: '#app', data: { + stops: [], messages: { count: 0, visible: true + }, + departures: { + state: '' } }, methods: { handleMessagesUpdate(messages) { diff --git a/resources/ts/components/departures.ts b/resources/ts/components/departures.ts index 7a968de..ea6ef3d 100644 --- a/resources/ts/components/departures.ts +++ b/resources/ts/components/departures.ts @@ -3,23 +3,31 @@ import { Departure, Stop } from "../model"; import { Component, Prop, Watch } from "vue-property-decorator"; import urls from '../urls'; import * as moment from "moment"; -import { Jsonified } from "../utils"; -import { debounce } from "../decorators"; +import { FetchingState, Jsonified } from "../utils"; +import { debounce, Notify } from "../decorators"; @Component({ template: require("../../components/departures.html") }) export class Departures extends Vue { private _intervalId: number; - autoRefresh: boolean = false; departures: Departure[] = []; - interval: number = 20; @Prop(Array) stops: Stop[]; + @Prop({ default: false, type: Boolean }) + autoRefresh: boolean; + + @Prop({ default: 20, type: Number }) + interval: number; + + @Notify() + state: FetchingState; + @Watch('stops') @debounce(300) async update() { + this.state = 'fetching'; const response = await fetch(urls.prepare(urls.departures, { stop: this.stops.map(stop => stop.id), })); @@ -33,6 +41,10 @@ export class Departures extends Vue { return departure as Departure; }); + + this.state = 'ready'; + } else { + this.state = 'error'; } } diff --git a/resources/ts/components/picker.ts b/resources/ts/components/picker.ts index 511b4bc..bb87513 100644 --- a/resources/ts/components/picker.ts +++ b/resources/ts/components/picker.ts @@ -2,30 +2,29 @@ import Component from "vue-class-component"; import Vue from "vue"; import { Stop, StopGroup, StopGroups } from "../model"; import { Prop, Watch } from "vue-property-decorator"; -import { filter, map } from "../utils"; +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 { - protected stops?: Stop[] = []; + @Prop({ default: () => [], type: Array }) + protected stops?: Stop[]; private remove(stop: Stop) { - this.stops = this.stops.filter(s => s != stop); + this.$emit('update:stops', this.stops.filter(s => s != stop)); } - private add(stop: Stop) { - this.stops.push(stop); + private add(stop: Stop|Stop[]) { + this.$emit('update:stops', [...this.stops, ...ensureArray(stop)]); } } -type FinderState = 'fetching' | 'ready' | 'error'; - @Component({ template: require('../../components/finder.html') }) export class FinderComponent extends Vue { protected found?: StopGroups = {}; - public state: FinderState = 'ready'; + public state: FetchingState = 'ready'; public filter: string = ""; @Prop({default: [], type: Array}) diff --git a/resources/ts/decorators.ts b/resources/ts/decorators.ts index 4f229a8..7dcda85 100644 --- a/resources/ts/decorators.ts +++ b/resources/ts/decorators.ts @@ -1,3 +1,6 @@ +import Vue from 'vue'; +import getOwnPropertyDescriptor = Reflect.getOwnPropertyDescriptor; + export interface Decorator { decorate(f: (...farg: FArgs) => any, ...args: TArgs): (...farg: FArgs) => TRet; @@ -51,3 +54,24 @@ export const condition = decorator(function createDecorator((options, key) => { + const symbol = Symbol(key); + + if (typeof options.computed === 'undefined') { + options.computed = {}; + } + + options.computed[key] = { + get: function (this: Vue) { + return this[symbol]; + }, + set: function (this: Vue, value: any) { + this[symbol] = value; + this.$emit(name ? name : `update:${key}`, value); + } + } +}); \ No newline at end of file diff --git a/resources/ts/font-awesome.ts b/resources/ts/font-awesome.ts index 492b18d..184cfd6 100644 --- a/resources/ts/font-awesome.ts +++ b/resources/ts/font-awesome.ts @@ -7,8 +7,10 @@ import { fas } from "@fortawesome/pro-solid-svg-icons"; import { fal } from "@fortawesome/pro-light-svg-icons"; import { fac } from "./icons"; -import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' +import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome' library.add(far, fas, fal, fac); -Vue.component('fa', FontAwesomeIcon); \ No newline at end of file +Vue.component('fa', FontAwesomeIcon); +Vue.component('fa-layers', FontAwesomeLayers); +Vue.component('fa-text', FontAwesomeLayersText); diff --git a/resources/ts/utils.ts b/resources/ts/utils.ts index a42cf3b..8fa607c 100644 --- a/resources/ts/utils.ts +++ b/resources/ts/utils.ts @@ -10,6 +10,7 @@ export type Optionalify = { [K in keyof T]?: T[K] } export type Dictionary = { [key: string]: T }; export type Index = string | symbol | number; +export type FetchingState = 'fetching' | 'ready' | 'error' | 'not-initialized'; export function map(source: T, mapper: (value: T[KT], key: KT) => R[KT]): R { const result: R = {} as R; @@ -36,3 +37,7 @@ export function filter(source: T, filter: (value: T[KT], export function signed(number: number): string { return number > 0 ? `+${number}` : number.toString(); } + +export function ensureArray(x: T[]|T): T[] { + return x instanceof Array ? x : [ x ]; +} \ No newline at end of file diff --git a/templates/app.html.twig b/templates/app.html.twig index 6be5333..f6b6719 100644 --- a/templates/app.html.twig +++ b/templates/app.html.twig @@ -2,19 +2,44 @@ {% block title "#{parent()} - #{provider.name}" %} {% block body %} -
    -

    - - Komunikaty {{ '{{ messages.count }}' }} - -

    - - - -
    - +
    +
    +
    +

    + + Przystanki +

    + +
    +
    +
    +
    +

    + + Komunikaty {{ '{{ messages.count }}' }} + +

    + + + +
    + +
    +

    + + Odjazdy + +

    + +
    +
    +
    {% endblock %} {% block javascripts %} diff --git a/templates/base.html.twig b/templates/base.html.twig index 31bee37..d36c3fe 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -8,7 +8,7 @@ {% block title %}Czy dojadę?{% endblock %} -
    +
    {% block body %}{% endblock %}