mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
Dodano filtry do widoku historii rozkładów jazdy
This commit is contained in:
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="journal-options">
|
||||
<div class="options_wrapper">
|
||||
<div class="options_content">
|
||||
<div class="content_select">
|
||||
<select-box
|
||||
:title="$t('journal.option-distance')"
|
||||
:itemList="translatedSorterOptions"
|
||||
:defaultItemIndex="0"
|
||||
@selected="changeSorter"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content_search">
|
||||
<div class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="searchedTrain"
|
||||
:placeholder="$t('journal.search-train')"
|
||||
@keydown.enter="search"
|
||||
/>
|
||||
|
||||
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearTrain" />
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="searchedDriver"
|
||||
:placeholder="$t('journal.search-driver')"
|
||||
@keydown.enter="search"
|
||||
/>
|
||||
|
||||
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
|
||||
</div>
|
||||
|
||||
<action-button class="search-button" @click="search">
|
||||
{{ $t('history.search') }}
|
||||
</action-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, inject } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import ActionButton from '../Global/ActionButton.vue';
|
||||
import SelectBox from '../Global/SelectBox.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { SelectBox, ActionButton },
|
||||
emits: ['changedOptions'],
|
||||
|
||||
data: () => ({
|
||||
exitIcon: require('@/assets/icon-exit.svg'),
|
||||
}),
|
||||
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
|
||||
const sorterOptions = ['distance', 'total-stops'];
|
||||
|
||||
const translatedSorterOptions = computed(() =>
|
||||
sorterOptions.map((id) => ({
|
||||
id,
|
||||
value: t(`journal.option-${id}`),
|
||||
}))
|
||||
);
|
||||
|
||||
return {
|
||||
translatedSorterOptions,
|
||||
|
||||
searchedTrain: inject('searchedTrain') as string,
|
||||
searchedDriver: inject('searchedDriver') as string,
|
||||
sorterActive: inject('sorterActive') as { id: string | number; dir: number },
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeSorter(item: { id: string | number; value: string }) {
|
||||
this.sorterActive.id = item.id;
|
||||
this.sorterActive.dir = -1;
|
||||
},
|
||||
|
||||
search() {
|
||||
console.log('gituwa');
|
||||
|
||||
this.$emit('changedOptions');
|
||||
},
|
||||
|
||||
clearDriver() {
|
||||
this.searchedDriver = '';
|
||||
this.search();
|
||||
},
|
||||
|
||||
clearTrain() {
|
||||
this.searchedTrain = '';
|
||||
this.search();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive';
|
||||
|
||||
.journal-options {
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
&_wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
@include smallScreen() {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.content_search, .content_select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include smallScreen() {
|
||||
padding: 0 1em;
|
||||
|
||||
.content_select {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content_search {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_search .search {
|
||||
&-box {
|
||||
position: relative;
|
||||
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
min-width: 200px;
|
||||
|
||||
margin: 0.5em 0.5em 0.5em 0;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
border: none;
|
||||
|
||||
min-width: 100%;
|
||||
padding: 0.35em 0.5em;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="filter-option option">
|
||||
<label class="option-label">
|
||||
<label>
|
||||
<input
|
||||
class="option-input"
|
||||
type="checkbox"
|
||||
:name="option.name"
|
||||
:defaultValue="option.defaultValue"
|
||||
@@ -10,9 +9,7 @@
|
||||
v-model="option.value"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<span
|
||||
class="option-content"
|
||||
:class="option.section + (option.value ? ' checked' : '')"
|
||||
<span :class="option.section + (option.value ? ' checked' : '')"
|
||||
>{{ $t(`filters.${option.id}`) }}
|
||||
</span>
|
||||
</label>
|
||||
@@ -20,7 +17,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
interface FilterOption {
|
||||
id: string;
|
||||
@@ -37,10 +34,10 @@ export default defineComponent({
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["optionChange"],
|
||||
emits: ['optionChange'],
|
||||
methods: {
|
||||
handleChange() {
|
||||
this.$emit("optionChange", {
|
||||
this.$emit('optionChange', {
|
||||
name: this.option.name,
|
||||
value: this.option.value,
|
||||
});
|
||||
@@ -53,6 +50,8 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/option.scss";
|
||||
|
||||
$accessCol: #e03b07;
|
||||
$controlCol: #0085ff;
|
||||
$signalCol: #bf7c00;
|
||||
@@ -60,106 +59,74 @@ $statusCol: #349b32;
|
||||
$saveCol: #28a826;
|
||||
$routesCol: #9049c0;
|
||||
|
||||
.option {
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0.5em 0.55em;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
border-radius: 0.5em;
|
||||
|
||||
&:not(.checked) {
|
||||
background-color: #585858;
|
||||
.option span {
|
||||
&.checked {
|
||||
&.access {
|
||||
background-color: $accessCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
box-shadow: 0 0 6px 1px $accessCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
&.access {
|
||||
background-color: $accessCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $accessCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.control {
|
||||
background-color: $controlCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $controlCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.signals {
|
||||
background-color: $signalCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $signalCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.routes {
|
||||
background-color: $routesCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $routesCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.status {
|
||||
background-color: $statusCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $statusCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.save {
|
||||
background-color: $saveCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $saveCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.mode {
|
||||
background-color: lightgreen;
|
||||
color: black;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
&.control {
|
||||
background-color: $controlCol;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0 0 6px 1px $controlCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.signals {
|
||||
background-color: $signalCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $signalCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.routes {
|
||||
background-color: $routesCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $routesCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.status {
|
||||
background-color: $statusCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $statusCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.save {
|
||||
background-color: $saveCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $saveCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.mode {
|
||||
background-color: lightgreen;
|
||||
color: black;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+7
-1
@@ -143,7 +143,13 @@
|
||||
"journal": {
|
||||
"title": "DISPATCHER HISTORY",
|
||||
"loading": "Loading dispatcher history data...",
|
||||
"no-history": "No dispatcher history found!"
|
||||
"no-history": "No dispatcher history found!",
|
||||
|
||||
"search-train": "Train no.",
|
||||
"search-driver": "Driver name",
|
||||
|
||||
"option-distance": "distance",
|
||||
"option-total-stops": "total stops"
|
||||
},
|
||||
"scenery": {
|
||||
"users": "PLAYERS ONLINE",
|
||||
|
||||
+7
-1
@@ -143,7 +143,13 @@
|
||||
"journal": {
|
||||
"title": "HISTORIA DYŻURÓW",
|
||||
"loading": "Ładowanie historii dyżurów...",
|
||||
"no-history": "Brak historii dyżurów dla tej scenerii!"
|
||||
"no-history": "Brak historii dyżurów dla tej scenerii!",
|
||||
|
||||
"search-train": "Numer pociągu",
|
||||
"search-driver": "Nick maszynisty",
|
||||
|
||||
"option-distance": "kilometraż",
|
||||
"option-total-stops": "stacje"
|
||||
},
|
||||
"scenery": {
|
||||
"users": "GRACZE ONLINE",
|
||||
|
||||
+2
-2
@@ -22,8 +22,8 @@ const routes: Array<RouteRecordRaw> = [
|
||||
},
|
||||
{
|
||||
path: "/journal",
|
||||
name: "TimetableHistoryView",
|
||||
component: () => import("@/views/TimetableHistoryView.vue"),
|
||||
name: "JournalView",
|
||||
component: () => import("@/views/JournalView.vue"),
|
||||
},
|
||||
{
|
||||
path: '/:catchAll(.*)',
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export default interface FilterOption {
|
||||
id: string;
|
||||
name: string;
|
||||
value: boolean;
|
||||
defaultValue: boolean;
|
||||
}
|
||||
+7
-1
@@ -182,7 +182,13 @@ export const store = createStore<State>({
|
||||
async fetchTimetableData({ commit }) {
|
||||
|
||||
const reducedList = this.state.trainList.reduce(async (acc: Promise<Timetable[]>, train: Train) => {
|
||||
const timetable: TimetableAPIData = await (await axios.get(URLs.getTimetableURL(train.trainNo, this.state.region.id))).data.message;
|
||||
const data: { success: boolean; message: TimetableAPIData } = await (await axios.get(URLs.getTimetableURL(train.trainNo, this.state.region.id))).data;
|
||||
|
||||
if (!data.success) {
|
||||
return acc;
|
||||
}
|
||||
|
||||
const timetable = data.message;
|
||||
const trainInfo = timetable.trainInfo;
|
||||
|
||||
if (!timetable || !trainInfo) return acc;
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
|
||||
.option {
|
||||
font-size: 1em;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0.5em 0.55em;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
border-radius: 0.5em;
|
||||
|
||||
&:not(.checked) {
|
||||
background-color: #585858;
|
||||
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,25 +1,7 @@
|
||||
<template>
|
||||
<section class="history-view">
|
||||
<div class="history-wrapper">
|
||||
<h2>{{ $t('history.title') }}</h2>
|
||||
<form class="history_search" action="javascript:void(0);">
|
||||
<div class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="searchedTrain"
|
||||
:placeholder="$t('history.search-train')"
|
||||
@submit="test"
|
||||
/>
|
||||
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearTrain" />
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input class="search-input" v-model="searchedDriver" :placeholder="$t('history.search-driver')" />
|
||||
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
|
||||
</div>
|
||||
<action-button class="search-button" @click="search">
|
||||
{{ $t('history.search') }}
|
||||
</action-button>
|
||||
</form>
|
||||
<JournalOptions @changedOptions="search" />
|
||||
|
||||
<div class="history_list">
|
||||
<div class="list_wrapper">
|
||||
@@ -114,14 +96,18 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, Ref, ref } from 'vue';
|
||||
import { computed, defineComponent, provide, reactive, Ref, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
|
||||
import ActionButton from '@/components/Global/ActionButton.vue';
|
||||
import SearchBox from '@/components/Global/SearchBox.vue';
|
||||
import dateMixin from '@/mixins/dateMixin';
|
||||
import { DataStatus } from '@/scripts/enums/DataStatus';
|
||||
|
||||
import ActionButton from '@/components/Global/ActionButton.vue';
|
||||
import JournalOptions from '@/components/JournalView/JournalOptions.vue';
|
||||
|
||||
import FilterOption from '@/scripts/interfaces/FilterOption';
|
||||
|
||||
const PROD_MODE = true;
|
||||
|
||||
const API_URL = PROD_MODE
|
||||
@@ -160,82 +146,74 @@ interface TimetableHistory {
|
||||
fulfilled: boolean;
|
||||
}
|
||||
|
||||
const initFilters = {
|
||||
status: {
|
||||
active: {
|
||||
id: 'active',
|
||||
name: 'status',
|
||||
value: false,
|
||||
defaultValue: false,
|
||||
},
|
||||
|
||||
abandoned: {
|
||||
id: 'abandoned',
|
||||
name: 'status',
|
||||
value: false,
|
||||
defaultValue: false,
|
||||
},
|
||||
|
||||
fulfilled: {
|
||||
id: 'fulfilled',
|
||||
name: 'status',
|
||||
value: true,
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
components: { SearchBox, ActionButton },
|
||||
components: { SearchBox, ActionButton, JournalOptions },
|
||||
mixins: [dateMixin],
|
||||
|
||||
data: () => ({
|
||||
exitIcon: require('@/assets/icon-exit.svg'),
|
||||
}),
|
||||
|
||||
setup() {
|
||||
const historyList: Ref<TimetableHistory[]> = ref([]);
|
||||
const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
|
||||
status: DataStatus.Loading,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const sorterActive = ref({ id: 'distance', dir: -1 });
|
||||
const searchedDriver = ref('');
|
||||
const searchedTrain = ref('');
|
||||
const maxCount = ref(15);
|
||||
|
||||
const fetchHistoryData = async (
|
||||
props: {
|
||||
searchedDriver?: string;
|
||||
searchedTrain?: string;
|
||||
maxCount?: number;
|
||||
} = {}
|
||||
) => {
|
||||
historyDataStatus.value.status = DataStatus.Loading;
|
||||
|
||||
const queries: string[] = [];
|
||||
|
||||
if (!props.searchedDriver && !props.searchedTrain) queries.push('count=15');
|
||||
if (props.maxCount) queries.push(`count=${props.maxCount}`);
|
||||
if (props.searchedDriver) queries.push(`driver=${props.searchedDriver}`);
|
||||
if (props.searchedTrain) queries.push(`train=${props.searchedTrain}`);
|
||||
|
||||
try {
|
||||
const responseData: APIResponse | null = await (await axios.get(`${API_URL}?${queries.join('&')}`)).data;
|
||||
|
||||
if (!responseData) {
|
||||
historyDataStatus.value.status = DataStatus.Error;
|
||||
historyDataStatus.value.error = 'Brak danych!';
|
||||
return;
|
||||
}
|
||||
|
||||
if (responseData.errorMessage) {
|
||||
historyDataStatus.value.status = DataStatus.Error;
|
||||
historyDataStatus.value.error = responseData.errorMessage;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!responseData.response) return;
|
||||
|
||||
// Response data exists
|
||||
historyList.value = responseData.response;
|
||||
historyDataStatus.value.status = DataStatus.Loaded;
|
||||
} catch (error) {
|
||||
historyDataStatus.value.status = DataStatus.Error;
|
||||
historyDataStatus.value.error = 'Ups! Coś poszło nie tak!';
|
||||
}
|
||||
};
|
||||
|
||||
// on created
|
||||
fetchHistoryData();
|
||||
provide('searchedTrain', searchedTrain);
|
||||
provide('searchedDriver', searchedDriver);
|
||||
provide('sorterActive', sorterActive);
|
||||
|
||||
return {
|
||||
historyList,
|
||||
searchedDriver,
|
||||
searchedTrain,
|
||||
maxCount,
|
||||
fetchHistoryData,
|
||||
historyList: ref([]) as Ref<TimetableHistory[]>,
|
||||
historyDataStatus,
|
||||
|
||||
isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
|
||||
isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
|
||||
|
||||
searchedDriver,
|
||||
searchedTrain,
|
||||
sorterActive,
|
||||
|
||||
maxCount: ref(15),
|
||||
|
||||
filters: reactive({ ...initFilters }) as { [filterSection: string]: { [filterId: string]: FilterOption } },
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.fetchHistoryData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
navigateToTrain(trainNo: number | null) {
|
||||
if (!trainNo) return;
|
||||
@@ -246,23 +224,7 @@ export default defineComponent({
|
||||
});
|
||||
},
|
||||
|
||||
clearDriver() {
|
||||
this.searchedDriver = '';
|
||||
|
||||
this.search();
|
||||
},
|
||||
|
||||
test() {
|
||||
console.log('xd');
|
||||
},
|
||||
|
||||
clearTrain() {
|
||||
this.searchedTrain = '';
|
||||
|
||||
this.search();
|
||||
},
|
||||
|
||||
async search() {
|
||||
search() {
|
||||
this.fetchHistoryData({
|
||||
searchedDriver: this.searchedDriver,
|
||||
searchedTrain: this.searchedTrain,
|
||||
@@ -272,12 +234,58 @@ export default defineComponent({
|
||||
keyPressed({ keyCode }) {
|
||||
if (keyCode == 13) this.search();
|
||||
},
|
||||
|
||||
async fetchHistoryData(
|
||||
props: {
|
||||
searchedDriver?: string;
|
||||
searchedTrain?: string;
|
||||
maxCount?: number;
|
||||
} = {}
|
||||
) {
|
||||
this.historyDataStatus.status = DataStatus.Loading;
|
||||
|
||||
const queries: string[] = [];
|
||||
|
||||
if (!props.searchedDriver && !props.searchedTrain) queries.push('count=15');
|
||||
if (props.maxCount) queries.push(`count=${props.maxCount}`);
|
||||
if (props.searchedDriver) queries.push(`driver=${props.searchedDriver}`);
|
||||
if (props.searchedTrain) queries.push(`train=${props.searchedTrain}`);
|
||||
|
||||
console.log(this.sorterActive);
|
||||
|
||||
try {
|
||||
const responseData: APIResponse | null = await (await axios.get(`${API_URL}?${queries.join('&')}`)).data;
|
||||
|
||||
if (!responseData) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = 'Brak danych!';
|
||||
return;
|
||||
}
|
||||
|
||||
if (responseData.errorMessage) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = responseData.errorMessage;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!responseData.response) return;
|
||||
|
||||
// Response data exists
|
||||
this.historyList = responseData.response;
|
||||
this.historyDataStatus.status = DataStatus.Loaded;
|
||||
} catch (error) {
|
||||
this.historyDataStatus.status = DataStatus.Error;
|
||||
this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../styles/responsive.scss';
|
||||
@import '../styles/option.scss';
|
||||
|
||||
.warning {
|
||||
&-enter-from,
|
||||
@@ -302,13 +310,9 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.history-wrapper {
|
||||
width: 1000px;
|
||||
padding: 2em 1em;
|
||||
}
|
||||
width: 1300px;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1em 0.5em;
|
||||
}
|
||||
|
||||
.history_item {
|
||||
@@ -340,52 +344,12 @@ h2 {
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
@include smallScreen() {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
&-box {
|
||||
position: relative;
|
||||
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
min-width: 200px;
|
||||
|
||||
margin: 0.5em 0 0.5em 0.5em;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
border: none;
|
||||
|
||||
min-width: 85%;
|
||||
padding: 0.35em 0.5em;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.search-button {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.history_warning {
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
@@ -406,10 +370,5 @@ li,
|
||||
.history-view {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
margin-left: 0;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user