mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 21:38:13 +00:00
format & lint
This commit is contained in:
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<button class="action-btn btn--filled">
|
||||
<div class="button_content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/variables";
|
||||
@import "../../styles/responsive";
|
||||
|
||||
.button_content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<button class="action-btn btn--filled">
|
||||
<div class="button_content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../styles/variables';
|
||||
@import '../../styles/responsive';
|
||||
|
||||
.button_content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -15,18 +15,18 @@ export default defineComponent({
|
||||
props: {
|
||||
scrollNoMoreData: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
|
||||
scrollDataLoaded: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
|
||||
list: {
|
||||
type: Array as PropType<any[]>,
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
emits: ['addHistoryData'],
|
||||
@@ -34,8 +34,8 @@ export default defineComponent({
|
||||
methods: {
|
||||
addHistoryData() {
|
||||
this.$emit('addHistoryData');
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,62 +1,65 @@
|
||||
<template>
|
||||
<div class="progress-bar">
|
||||
<span class="bar-bg"></span>
|
||||
<span class="bar-fg" :style="{ width: `${~~progressPercent}%`, backgroundColor: bgColor }"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
progressPercent: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
progressType: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
bgColor() {
|
||||
switch (this.progressType) {
|
||||
case 'abandoned':
|
||||
return 'salmon';
|
||||
|
||||
default:
|
||||
return 'springgreen';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
|
||||
width: 6em;
|
||||
height: 1em;
|
||||
margin: 0.5em 0;
|
||||
|
||||
.bar-fg,
|
||||
.bar-bg {
|
||||
position: absolute;
|
||||
height: 1em;
|
||||
width: 100%;
|
||||
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bar-fg {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.bar-bg {
|
||||
background-color: #5b5b5b;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="progress-bar">
|
||||
<span class="bar-bg"></span>
|
||||
<span
|
||||
class="bar-fg"
|
||||
:style="{ width: `${~~progressPercent}%`, backgroundColor: bgColor }"
|
||||
></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
progressPercent: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
progressType: {
|
||||
type: String,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
bgColor() {
|
||||
switch (this.progressType) {
|
||||
case 'abandoned':
|
||||
return 'salmon';
|
||||
|
||||
default:
|
||||
return 'springgreen';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
|
||||
width: 6em;
|
||||
height: 1em;
|
||||
margin: 0.5em 0;
|
||||
|
||||
.bar-fg,
|
||||
.bar-bg {
|
||||
position: absolute;
|
||||
height: 1em;
|
||||
width: 100%;
|
||||
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bar-fg {
|
||||
background-color: springgreen;
|
||||
}
|
||||
|
||||
.bar-bg {
|
||||
background-color: #5b5b5b;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,39 +7,34 @@
|
||||
@keypress="updateValue"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="search-exit"
|
||||
:src="getIcon('exit')"
|
||||
alt="exit-icon"
|
||||
@click="clearValue"
|
||||
/>
|
||||
<img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="clearSearchValue" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watch } from "vue";
|
||||
import imageMixin from "../../mixins/imageMixin";
|
||||
import { defineComponent, ref, watch } from 'vue';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [imageMixin],
|
||||
|
||||
emits: ["update:searchedValue", "clearValue"],
|
||||
emits: ['update:searchedValue', 'clearValue'],
|
||||
props: {
|
||||
searchedValue: {
|
||||
type: String,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
updateOnInput: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: true
|
||||
},
|
||||
titleToTranslate: {
|
||||
type: String,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
clearValue: {
|
||||
type: Function,
|
||||
},
|
||||
type: Function
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, { emit }) {
|
||||
@@ -49,32 +44,32 @@ export default defineComponent({
|
||||
watch(
|
||||
() => compSearchedValue.value,
|
||||
(value) => {
|
||||
emit("update:searchedValue", value);
|
||||
emit('update:searchedValue', value);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const clearValue = () => {
|
||||
compSearchedValue.value = "";
|
||||
emit("clearValue");
|
||||
const clearSearchValue = () => {
|
||||
compSearchedValue.value = '';
|
||||
emit('clearValue');
|
||||
};
|
||||
|
||||
const updateValue = (e: any) => {
|
||||
if (!props.updateOnInput && e.keyCode == 13)
|
||||
emit("update:searchedValue", compSearchedValue.value);
|
||||
emit('update:searchedValue', compSearchedValue.value);
|
||||
};
|
||||
|
||||
return {
|
||||
compSearchedValue,
|
||||
updateValue,
|
||||
clearValue,
|
||||
clearSearchValue
|
||||
};
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive";
|
||||
@import '../../styles/responsive';
|
||||
|
||||
.search {
|
||||
&-box {
|
||||
@@ -109,4 +104,4 @@ export default defineComponent({
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+224
-217
@@ -1,217 +1,224 @@
|
||||
<template>
|
||||
<div class="select-box">
|
||||
<div class="select-box_content">
|
||||
<button class="selected" @click="toggleBox">
|
||||
<span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
|
||||
|
||||
<div class="arrow">
|
||||
<img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<ul class="options" :ref="(el) => (listRef = el as Element)">
|
||||
<li class="option" v-for="(item, i) in itemList" :key="item.id">
|
||||
<transition
|
||||
name="unfold"
|
||||
:style="`
|
||||
--delay-in: ${i * 55}ms;
|
||||
--delay-out: ${(itemList.length - 1 - i) * 55}ms`"
|
||||
>
|
||||
<label :for="item.id" v-if="listOpen">
|
||||
<input type="button" :id="item.id" name="select-box" @click="selectOption(item)" />
|
||||
<span :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''" v-html="item.value"> </span>
|
||||
</label>
|
||||
</transition>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, Ref, ref, computed } from 'vue';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
|
||||
interface Item {
|
||||
id: string;
|
||||
value: string;
|
||||
selectedValue?: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['selected'],
|
||||
mixins: [imageMixin],
|
||||
|
||||
props: {
|
||||
itemList: {
|
||||
type: Array as () => Item[],
|
||||
required: true,
|
||||
},
|
||||
|
||||
defaultItemIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
|
||||
prefix: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
let listRef: Ref<Element | null> = ref(null);
|
||||
let buttonRef: Ref<HTMLButtonElement | null> = ref(null);
|
||||
|
||||
let activeEl: Ref<Element | null> = ref(document.activeElement);
|
||||
|
||||
let listOpen = ref(false);
|
||||
let selectedItem: Ref<Item> = ref(props.itemList[props.defaultItemIndex]);
|
||||
|
||||
const computedSelectedItem = computed(() => {
|
||||
return props.itemList.find((item) => item.id === selectedItem.value.id) || props.itemList[props.defaultItemIndex];
|
||||
});
|
||||
|
||||
return {
|
||||
computedSelectedItem,
|
||||
listOpen,
|
||||
selectedItem,
|
||||
listRef,
|
||||
buttonRef,
|
||||
activeEl,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectOption(item: Item) {
|
||||
this.selectedItem = item;
|
||||
this.listOpen = false;
|
||||
|
||||
this.$emit('selected', item);
|
||||
},
|
||||
|
||||
toggleBox(e: Event) {
|
||||
this.listOpen = !this.listOpen;
|
||||
|
||||
if (!this.listOpen) (e.target as HTMLButtonElement).blur();
|
||||
},
|
||||
|
||||
clickedOutside() {
|
||||
this.listOpen = false;
|
||||
this.buttonRef?.blur();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/variables.scss';
|
||||
|
||||
.unfold {
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.85);
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 110ms ease-out;
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
transition-delay: var(--delay-in);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transition-delay: var(--delay-out);
|
||||
}
|
||||
}
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
img {
|
||||
vertical-align: middle;
|
||||
width: 1.35em;
|
||||
}
|
||||
}
|
||||
|
||||
button.selected {
|
||||
color: paleturquoise;
|
||||
|
||||
font-weight: bold;
|
||||
padding: 0.1em 0.5em;
|
||||
|
||||
&:focus {
|
||||
background-color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.select-box_content {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
||||
height: 100%;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.options {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
height: auto;
|
||||
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
li.option {
|
||||
input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
|
||||
&:focus + span {
|
||||
color: $accentCol;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child label {
|
||||
border-radius: 0 0 1em 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
background-color: #262626f2;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #333333f2;
|
||||
}
|
||||
|
||||
padding: 0.5em 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="select-box">
|
||||
<div class="select-box_content">
|
||||
<button class="selected" @click="toggleBox">
|
||||
<span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
|
||||
|
||||
<div class="arrow">
|
||||
<img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<ul class="options" :ref="(el) => (listRef = el as Element)">
|
||||
<li class="option" v-for="(item, i) in itemList" :key="item.id">
|
||||
<transition
|
||||
name="unfold"
|
||||
:style="`
|
||||
--delay-in: ${i * 55}ms;
|
||||
--delay-out: ${(itemList.length - 1 - i) * 55}ms`"
|
||||
>
|
||||
<label :for="item.id" v-if="listOpen">
|
||||
<input type="button" :id="item.id" name="select-box" @click="selectOption(item)" />
|
||||
<span
|
||||
:style="computedSelectedItem.id == item.id ? 'color: gold;' : ''"
|
||||
v-html="item.value"
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
</transition>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, Ref, ref, computed } from 'vue';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
|
||||
interface Item {
|
||||
id: string;
|
||||
value: string;
|
||||
selectedValue?: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['selected'],
|
||||
mixins: [imageMixin],
|
||||
|
||||
props: {
|
||||
itemList: {
|
||||
type: Array as () => Item[],
|
||||
required: true
|
||||
},
|
||||
|
||||
defaultItemIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
let listRef: Ref<Element | null> = ref(null);
|
||||
let buttonRef: Ref<HTMLButtonElement | null> = ref(null);
|
||||
|
||||
let activeEl: Ref<Element | null> = ref(document.activeElement);
|
||||
|
||||
let listOpen = ref(false);
|
||||
let selectedItem: Ref<Item> = ref(props.itemList[props.defaultItemIndex]);
|
||||
|
||||
const computedSelectedItem = computed(() => {
|
||||
return (
|
||||
props.itemList.find((item) => item.id === selectedItem.value.id) ||
|
||||
props.itemList[props.defaultItemIndex]
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
computedSelectedItem,
|
||||
listOpen,
|
||||
selectedItem,
|
||||
listRef,
|
||||
buttonRef,
|
||||
activeEl
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectOption(item: Item) {
|
||||
this.selectedItem = item;
|
||||
this.listOpen = false;
|
||||
|
||||
this.$emit('selected', item);
|
||||
},
|
||||
|
||||
toggleBox(e: Event) {
|
||||
this.listOpen = !this.listOpen;
|
||||
|
||||
if (!this.listOpen) (e.target as HTMLButtonElement).blur();
|
||||
},
|
||||
|
||||
clickedOutside() {
|
||||
this.listOpen = false;
|
||||
this.buttonRef?.blur();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/variables.scss';
|
||||
|
||||
.unfold {
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.85);
|
||||
}
|
||||
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 110ms ease-out;
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
transition-delay: var(--delay-in);
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transition-delay: var(--delay-out);
|
||||
}
|
||||
}
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
img {
|
||||
vertical-align: middle;
|
||||
width: 1.35em;
|
||||
}
|
||||
}
|
||||
|
||||
button.selected {
|
||||
color: paleturquoise;
|
||||
|
||||
font-weight: bold;
|
||||
padding: 0.1em 0.5em;
|
||||
|
||||
&:focus {
|
||||
background-color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.select-box_content {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
|
||||
height: 100%;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.options {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
height: auto;
|
||||
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
li.option {
|
||||
input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
|
||||
&:focus + span {
|
||||
color: $accentCol;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child label {
|
||||
border-radius: 0 0 1em 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
background-color: #262626f2;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #333333f2;
|
||||
}
|
||||
|
||||
padding: 0.5em 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,90 +1,90 @@
|
||||
<template>
|
||||
<span class="status-badge" :class="statusID" v-if="isOnline">
|
||||
{{ $t(`status.${statusID}`) }}
|
||||
{{ statusID == 'online' ? timestampToString(statusTimestamp!) : '' }}
|
||||
</span>
|
||||
|
||||
<span class="status-badge free" v-else>
|
||||
{{ $t('status.free') }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import dateMixin from '../../mixins/dateMixin';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
statusID: {
|
||||
type: String,
|
||||
},
|
||||
statusTimestamp: {
|
||||
type: Number,
|
||||
},
|
||||
isOnline: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
mixins: [dateMixin],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$free: #8a8a8a;
|
||||
$ending: #e6c300;
|
||||
$no-limit: #117fc9;
|
||||
$unav: #ff3d5d;
|
||||
$brb: #e6a100;
|
||||
$no-space: #222;
|
||||
$online: #09a116;
|
||||
$unknown: rgb(185, 60, 60);
|
||||
|
||||
.status-badge {
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
padding: 0.2em 0.55em;
|
||||
|
||||
background-color: $online;
|
||||
|
||||
&.free {
|
||||
background-color: $free;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
&.ending {
|
||||
background-color: $ending;
|
||||
color: black;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&.no-limit {
|
||||
background-color: $no-limit;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
&.not-signed,
|
||||
&.unavailable {
|
||||
background-color: $unav;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
&.brb {
|
||||
background-color: $brb;
|
||||
color: black;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
&.no-space {
|
||||
background-color: $no-space;
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
&.unknown {
|
||||
background-color: $unknown;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<span class="status-badge" :class="statusID" v-if="isOnline">
|
||||
{{ $t(`status.${statusID}`) }}
|
||||
{{ statusID == 'online' ? timestampToString(statusTimestamp!) : '' }}
|
||||
</span>
|
||||
|
||||
<span class="status-badge free" v-else>
|
||||
{{ $t('status.free') }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import dateMixin from '../../mixins/dateMixin';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
statusID: {
|
||||
type: String
|
||||
},
|
||||
statusTimestamp: {
|
||||
type: Number
|
||||
},
|
||||
isOnline: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
mixins: [dateMixin]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$free: #8a8a8a;
|
||||
$ending: #e6c300;
|
||||
$no-limit: #117fc9;
|
||||
$unav: #ff3d5d;
|
||||
$brb: #e6a100;
|
||||
$no-space: #222;
|
||||
$online: #09a116;
|
||||
$unknown: rgb(185, 60, 60);
|
||||
|
||||
.status-badge {
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
padding: 0.2em 0.55em;
|
||||
|
||||
background-color: $online;
|
||||
|
||||
&.free {
|
||||
background-color: $free;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
&.ending {
|
||||
background-color: $ending;
|
||||
color: black;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&.no-limit {
|
||||
background-color: $no-limit;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
&.not-signed,
|
||||
&.unavailable {
|
||||
background-color: $unav;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
&.brb {
|
||||
background-color: $brb;
|
||||
color: black;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
&.no-space {
|
||||
background-color: $no-space;
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
&.unknown {
|
||||
background-color: $unknown;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<div class="stock-list">
|
||||
<ul>
|
||||
<li v-for="(stockName, i) in trainStockList">
|
||||
<p>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</p>
|
||||
<li v-for="(stockName, i) in trainStockList" :key="i">
|
||||
<p>
|
||||
{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }}
|
||||
{{ stockName.split(':')[1] }}
|
||||
</p>
|
||||
|
||||
<span>
|
||||
<img
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${/^EN/.test(stockName) ? 'rb' : ''}.png`"
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
|
||||
/^EN/.test(stockName) ? 'rb' : ''
|
||||
}.png`"
|
||||
@error="onImageError($event, stockName)"
|
||||
width="400"
|
||||
height="60"
|
||||
@@ -15,21 +20,27 @@
|
||||
<img
|
||||
v-if="/^(EN|2EN)/.test(stockName)"
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
|
||||
@error="(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')"
|
||||
@error="
|
||||
(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
|
||||
"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="train-thumbnail"
|
||||
v-if="/^EN71/.test(stockName)"
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
|
||||
@error="(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')"
|
||||
@error="
|
||||
(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
|
||||
"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="train-thumbnail"
|
||||
v-if="/^(EN|2EN)/.test(stockName)"
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
|
||||
@error="(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')"
|
||||
@error="
|
||||
(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
@@ -49,13 +60,13 @@ export default defineComponent({
|
||||
props: {
|
||||
trainStockList: {
|
||||
type: Array as PropType<string[]>,
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
store: useStore(),
|
||||
store: useStore()
|
||||
};
|
||||
},
|
||||
|
||||
@@ -63,12 +74,14 @@ export default defineComponent({
|
||||
onImageError(event: Event, stockName: string) {
|
||||
const fallbackName =
|
||||
Object.keys(this.store.rollingStockData!.info).find((type) => {
|
||||
return this.store.rollingStockData!.info[type as keyof RollingStockInfo].find((v) => v[0] === stockName.split(':')[0]);
|
||||
return this.store.rollingStockData!.info[type as keyof RollingStockInfo].find(
|
||||
(v) => v[0] === stockName.split(':')[0]
|
||||
);
|
||||
}) || 'vehicle-unknown';
|
||||
|
||||
(event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
+123
-119
@@ -1,119 +1,123 @@
|
||||
<template>
|
||||
<span class="stop-date">
|
||||
<span
|
||||
class="date arrival"
|
||||
v-if="!stop.beginsHere"
|
||||
:class="{
|
||||
delayed: stop.arrivalDelay > 0 && (stop.confirmed || stop.stopped),
|
||||
preponed: stop.arrivalDelay < 0 && (stop.confirmed || stop.stopped),
|
||||
'on-time': stop.arrivalDelay == 0 && stop.confirmed,
|
||||
}"
|
||||
>
|
||||
<span v-if="stop.arrivalDelay != 0 && (stop.confirmed || stop.stopped)">
|
||||
<s>{{ timestampToString(stop.arrivalTimestamp) }}</s>
|
||||
{{ timestampToString(stop.arrivalRealTimestamp) }}
|
||||
({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
{{ timestampToString(stop.arrivalTimestamp) }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="date stop" v-if="stop.stopTime || stop.stopped" :class="stop.stopType.replace(', ', '-')">
|
||||
{{ stop.stopTime }} {{ stop.stopType == '' ? 'pt' : stop.stopType }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="date departure"
|
||||
v-if="!stop.terminatesHere && (stop.stopTime != 0 || stop.stopped)"
|
||||
:class="{
|
||||
delayed: stop.departureDelay > 0 && stop.confirmed,
|
||||
preponed: stop.departureDelay < 0 && stop.confirmed,
|
||||
}"
|
||||
>
|
||||
<span v-if="stop.departureDelay != 0 && stop.confirmed">
|
||||
<s>{{ timestampToString(stop.departureTimestamp) }}</s>
|
||||
{{ timestampToString(stop.departureRealTimestamp) }}
|
||||
|
||||
({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
{{ timestampToString(stop.departureTimestamp) }}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import dateMixin from '../../mixins/dateMixin';
|
||||
import TrainStop from '../../scripts/interfaces/TrainStop';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [dateMixin],
|
||||
|
||||
props: {
|
||||
stop: {
|
||||
type: Object as () => TrainStop,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$preponedClr: lime;
|
||||
$delayedClr: salmon;
|
||||
$dateClr: #525151;
|
||||
$stopExchangeClr: #db8e29;
|
||||
$stopDefaultClr: #252525;
|
||||
|
||||
.stop-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.date {
|
||||
background: $dateClr;
|
||||
padding: 0.3em 0.5em;
|
||||
}
|
||||
|
||||
.stop {
|
||||
&.ph,
|
||||
&.ph-pm,
|
||||
&.pm {
|
||||
background: $stopExchangeClr;
|
||||
}
|
||||
|
||||
background: $stopDefaultClr;
|
||||
}
|
||||
|
||||
.arrival,
|
||||
.departure {
|
||||
&.delayed {
|
||||
s {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $delayedClr;
|
||||
}
|
||||
}
|
||||
|
||||
&.preponed {
|
||||
s {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $preponedClr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<span class="stop-date">
|
||||
<span
|
||||
class="date arrival"
|
||||
v-if="!stop.beginsHere"
|
||||
:class="{
|
||||
delayed: stop.arrivalDelay > 0 && (stop.confirmed || stop.stopped),
|
||||
preponed: stop.arrivalDelay < 0 && (stop.confirmed || stop.stopped),
|
||||
'on-time': stop.arrivalDelay == 0 && stop.confirmed
|
||||
}"
|
||||
>
|
||||
<span v-if="stop.arrivalDelay != 0 && (stop.confirmed || stop.stopped)">
|
||||
<s>{{ timestampToString(stop.arrivalTimestamp) }}</s>
|
||||
{{ timestampToString(stop.arrivalRealTimestamp) }}
|
||||
({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
{{ timestampToString(stop.arrivalTimestamp) }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="date stop"
|
||||
v-if="stop.stopTime || stop.stopped"
|
||||
:class="stop.stopType.replace(', ', '-')"
|
||||
>
|
||||
{{ stop.stopTime }} {{ stop.stopType == '' ? 'pt' : stop.stopType }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="date departure"
|
||||
v-if="!stop.terminatesHere && (stop.stopTime != 0 || stop.stopped)"
|
||||
:class="{
|
||||
delayed: stop.departureDelay > 0 && stop.confirmed,
|
||||
preponed: stop.departureDelay < 0 && stop.confirmed
|
||||
}"
|
||||
>
|
||||
<span v-if="stop.departureDelay != 0 && stop.confirmed">
|
||||
<s>{{ timestampToString(stop.departureTimestamp) }}</s>
|
||||
{{ timestampToString(stop.departureRealTimestamp) }}
|
||||
|
||||
({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
{{ timestampToString(stop.departureTimestamp) }}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import dateMixin from '../../mixins/dateMixin';
|
||||
import TrainStop from '../../scripts/interfaces/TrainStop';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [dateMixin],
|
||||
|
||||
props: {
|
||||
stop: {
|
||||
type: Object as () => TrainStop,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
setup() {
|
||||
return {};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$preponedClr: lime;
|
||||
$delayedClr: salmon;
|
||||
$dateClr: #525151;
|
||||
$stopExchangeClr: #db8e29;
|
||||
$stopDefaultClr: #252525;
|
||||
|
||||
.stop-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.date {
|
||||
background: $dateClr;
|
||||
padding: 0.3em 0.5em;
|
||||
}
|
||||
|
||||
.stop {
|
||||
&.ph,
|
||||
&.ph-pm,
|
||||
&.pm {
|
||||
background: $stopExchangeClr;
|
||||
}
|
||||
|
||||
background: $stopDefaultClr;
|
||||
}
|
||||
|
||||
.arrival,
|
||||
.departure {
|
||||
&.delayed {
|
||||
s {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $delayedClr;
|
||||
}
|
||||
}
|
||||
|
||||
&.preponed {
|
||||
s {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $preponedClr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,7 +27,7 @@ export default defineComponent({
|
||||
|
||||
data() {
|
||||
return {
|
||||
isTopBarVisible: false,
|
||||
isTopBarVisible: false
|
||||
};
|
||||
},
|
||||
|
||||
@@ -35,7 +35,7 @@ export default defineComponent({
|
||||
const store = useStore();
|
||||
|
||||
return {
|
||||
store,
|
||||
store
|
||||
};
|
||||
},
|
||||
|
||||
@@ -49,12 +49,14 @@ export default defineComponent({
|
||||
|
||||
methods: {
|
||||
handleContentScroll(e: Event) {
|
||||
const trainInfoCompHeight: number = (this.$refs['trainInfo'] as any).$el.getBoundingClientRect().height;
|
||||
const trainInfoCompHeight: number = (
|
||||
this.$refs['trainInfo'] as any
|
||||
).$el.getBoundingClientRect().height;
|
||||
|
||||
const posTop = (e.target as HTMLElement).scrollTop;
|
||||
this.isTopBarVisible = posTop > trainInfoCompHeight;
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -144,7 +146,6 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
|
||||
.modal_content {
|
||||
max-height: 85vh;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
<img
|
||||
class="train-thumbnail"
|
||||
v-else
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}${stockType == 'loco-ezt' ? 'rb' : ''}.png`"
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}${
|
||||
stockType == 'loco-ezt' ? 'rb' : ''
|
||||
}.png`"
|
||||
@error="onImageError"
|
||||
@load="onImageLoad"
|
||||
width="220"
|
||||
@@ -14,7 +16,6 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import { useStore } from '../../store/store';
|
||||
import { RollingStockInfo } from '../../scripts/interfaces/github_api/StockInfoGithubData';
|
||||
|
||||
@@ -22,20 +23,20 @@ export default defineComponent({
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
|
||||
onlyFirstSegment: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
store: useStore(),
|
||||
isNotFound: false,
|
||||
isLoaded: false,
|
||||
isLoaded: false
|
||||
};
|
||||
},
|
||||
|
||||
@@ -53,10 +54,12 @@ export default defineComponent({
|
||||
|
||||
return (
|
||||
Object.keys(this.store.rollingStockData.info).find((type) => {
|
||||
return this.store.rollingStockData?.info[type as keyof RollingStockInfo].find((v) => v[0] === this.name.split(':')[0]);
|
||||
return this.store.rollingStockData?.info[type as keyof RollingStockInfo].find(
|
||||
(v) => v[0] === this.name.split(':')[0]
|
||||
);
|
||||
}) || 'vehicle-unknown'
|
||||
);
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -68,8 +71,8 @@ export default defineComponent({
|
||||
onImageLoad() {
|
||||
this.isNotFound = false;
|
||||
this.isLoaded = true;
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user