diff --git a/resources/components/ui/numeric.html b/resources/components/ui/numeric.html new file mode 100644 index 0000000..c2cb1ce --- /dev/null +++ b/resources/components/ui/numeric.html @@ -0,0 +1,11 @@ +
+ +
+ + +
+
diff --git a/resources/styles/_form.scss b/resources/styles/_form.scss index 1101da9..7e14acc 100644 --- a/resources/styles/_form.scss +++ b/resources/styles/_form.scss @@ -3,17 +3,18 @@ label { margin-bottom: 0; margin-top: -0.2rem; display: block; + font-size: .8rem; } .label-sm { - font-size: .8rem; + font-size: .6rem; } .form-group:last-child { margin-bottom: 0; } -.form-control, .input-group-text { +.form-control, .input-group-text, .btn-addon { background: rgba($dark, .06); border: none; border-bottom: 2px solid $dark; @@ -32,7 +33,8 @@ label { } } -.input-group-append { +.input-group-append, +.input-group-append .btn + .btn { margin-left: 0; } diff --git a/resources/styles/main.scss b/resources/styles/main.scss index 58b6f1b..6be0b6c 100644 --- a/resources/styles/main.scss +++ b/resources/styles/main.scss @@ -2,9 +2,11 @@ $border-radius: 0; $border-radius-lg: $border-radius; $border-radius-sm: $border-radius; + @import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; +$form-group-margin-bottom: $form-group-margin-bottom / 2; $primary: #005ea8; $custom-control-indicator-checked-bg: $dark; diff --git a/resources/ts/components/app.ts b/resources/ts/components/app.ts index 2f74e9f..c8cfd93 100644 --- a/resources/ts/components/app.ts +++ b/resources/ts/components/app.ts @@ -30,6 +30,8 @@ export class Application extends Vue { } }; + private count = 8; + private intervals = { messages: null, departures: null }; get messages() { diff --git a/resources/ts/components/ui/icon.ts b/resources/ts/components/ui/icon.ts index 419db53..e2928d5 100644 --- a/resources/ts/components/ui/icon.ts +++ b/resources/ts/components/ui/icon.ts @@ -23,7 +23,7 @@ import { faTimes, faTrashAlt } from "@fortawesome/pro-light-svg-icons"; -import { faClock as faClockBold, faCodeCommit, faSpinnerThird } from "@fortawesome/pro-regular-svg-icons"; +import { faClock as faClockBold, faCodeCommit, faMinus, faPlus, faSpinnerThird } from "@fortawesome/pro-regular-svg-icons"; import { faExclamationTriangle as faSolidExclamationTriangle, faWalking } from "@fortawesome/pro-solid-svg-icons"; import { fac } from "../../icons"; import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from "@fortawesome/vue-fontawesome"; @@ -81,6 +81,8 @@ const definitions: Dictionary = { 'map': simple(faMapMarkerAlt), 'stop': simple(faSign), 'spinner': simple(faSpinnerThird, { spin: true }), + 'increment': simple(faPlus, { "fixed-width": true }), + 'decrement': simple(faMinus, { "fixed-width": true }), 'departure-warning': stack([ {icon: faClockBold}, {icon: faSolidExclamationTriangle, transform: "shrink-5 down-4 right-6"} diff --git a/resources/ts/components/ui/index.ts b/resources/ts/components/ui/index.ts index 9647ef5..8814273 100644 --- a/resources/ts/components/ui/index.ts +++ b/resources/ts/components/ui/index.ts @@ -1,2 +1,3 @@ export * from './switch'; export * from './icon'; +export * from './numeric-input' diff --git a/resources/ts/components/ui/numeric-input.ts b/resources/ts/components/ui/numeric-input.ts new file mode 100644 index 0000000..f8ef7e9 --- /dev/null +++ b/resources/ts/components/ui/numeric-input.ts @@ -0,0 +1,53 @@ +import Vue from 'vue' +import { Component, Prop } from 'vue-property-decorator' +import * as uuid from "uuid"; + +@Component({ + template: require('../../../components/ui/numeric.html'), + inheritAttrs: false +}) +export class UiNumericInput extends Vue { + @Prop({ + type: String, + default: () => `uuid-${uuid.v4()}` + }) + id: string; + + @Prop(Number) + value: number; + + @Prop({ type: Number, default: 1 }) + step: number; + + @Prop({ type: Number, default: -Infinity }) + min: number; + + @Prop({ type: Number, default: Infinity }) + max: number; + + update(ev) { + this.$emit('input', this.clamp(Number.parseInt(ev.target.value))); + } + + increment() { + this.$emit('input', this.clamp(this.value + this.step)); + } + + decrement() { + this.$emit('input', this.clamp(this.value - this.step)); + } + + clamp(value: number) { + return Math.max(Math.min(value, this.max), this.min); + } + + get canIncrement(): boolean { + return this.max - this.value > Number.EPSILON * 2; + } + + get canDecrement(): boolean { + return this.value - this.min > Number.EPSILON * 2; + } +} + +Vue.component('UiNumericInput', UiNumericInput); diff --git a/templates/app.html.twig b/templates/app.html.twig index 0817d50..eb64bd6 100644 --- a/templates/app.html.twig +++ b/templates/app.html.twig @@ -73,25 +73,34 @@ -

- - -

-
- -
- -
- s +
+

+ + +

+
+ +
+ +
+ s +
+
+ + +