Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 05:18:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Zmiana w działaniu filtrów

Browse Source
This commit is contained in:
Spythere
2020-07-07 23:32:57 +02:00
parent 05ccb4c74c
commit ccbce604c0
9 changed files with 167 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/states/Error.vue
+1 -1
View File
@@ -19,7 +19,7 @@ export default {
justify-content: center;
align-items: center;
min-height: 100vh;
min-height: 100%;
flex-direction: column;
src/components/states/Loading.vue
+1 -1
View File
@@ -13,7 +13,7 @@ export default Vue.extend({});
justify-content: center;
align-items: center;
min-height: 100vh;
min-height: 100%;
font-size: calc(0.75rem + 1vw);
src/components/ui/List.vue
+7 -9
View File
@@ -188,11 +188,6 @@ export default Vue.extend({
@import "../../styles/variables.scss";
@import "../../styles/responsive.scss";
ul {
list-style: none;
padding: 0;
}
.hour {
padding: 0.4em;
border-radius: 1rem;
@@ -247,17 +242,18 @@ ul {
}
display: block;
white-space: nowrap;
border-collapse: collapse;
font-size: calc(0.6rem + 0.4vw);
cursor: pointer;
@include smallScreen() {
font-size: 0.5rem;
}
thead th {
padding: 0.8rem;
padding: 0.2rem;
background-color: #444;
min-width: 100px;
}
tr {
@@ -284,6 +280,8 @@ ul {
text-align: center;
vertical-align: middle;
cursor: pointer;
@include smallScreen() {
margin: 0;
padding: 0.1rem 0.5rem;
src/components/ui/Options.vue
+2 -2
View File
@@ -51,14 +51,14 @@ export default Vue.extend({
.options {
position: relative;
font-size: calc(0.7rem + 0.5vw);
font-size: calc(0.6rem + 0.9vw);
display: flex;
}
button {
color: #e0e0e0;
font-size: 1em;
font-size: 0.8em;
display: flex;
align-items: center;
src/components/utils/ListFilter.vue
+92 -8
View File
@@ -12,6 +12,7 @@
:type="el.type"
:id="item.id"
:name="item.name"
v-model="item.value"
checked
@change="handleChange"
/>
@@ -30,15 +31,16 @@
<div class="item-content centered">
<div class="item-input" style="text-align: center;">
<input
v-model="levelFrom"
type="number"
name="level-from"
min="0"
max="25"
value="0"
@change="handleInput"
/>
<span>&nbsp;do&nbsp;</span>
<input
v-model="levelTo"
type="number"
name="level-to"
min="0"
@@ -63,6 +65,19 @@
<div class="item-content">
<div class="item-input">
<input
v-model="oneWay"
type="checkbox"
id="no-1track"
name="no-1track"
checked
@change="handleChange"
/>
<label for="no-1track">Jednotory</label>
</div>
<div class="item-input">
<input
v-model="oneWayCatenary"
type="number"
name="1track-e"
min="0"
@@ -75,6 +90,7 @@
<div class="item-input">
<input
v-model="oneWayOther"
type="number"
name="1track-ne"
min="0"
@@ -98,6 +114,20 @@
<div class="item-content">
<div class="item-input">
<input
v-model="twoWay"
type="checkbox"
id="no-2track"
name="no-2track"
ref="2track"
checked
@change="handleChange"
/>
<label for="no-2track">Dwutory</label>
</div>
<div class="item-input">
<input
v-model="twoWayCatenary"
type="number"
name="2track-e"
min="0"
@@ -110,6 +140,7 @@
<div class="item-input">
<input
v-model="twoWayOther"
type="number"
name="2track-ne"
min="0"
@@ -123,6 +154,10 @@
</div>
</div>
</li>
<li class="grid-row">
<button @click="reset">RESET FILTRÓW</button>
</li>
</ul>
</div>
</template>
@@ -133,7 +168,22 @@ import { mapActions } from "vuex";
export default Vue.extend({
name: "list-filter",
watch: {
gridElements: {
handler: (v1, v2) => {},
deep: true
}
},
data: () => ({
oneWay: true,
twoWay: true,
levelFrom: 0,
levelTo: 20,
oneWayCatenary: 0,
oneWayOther: 0,
twoWayCatenary: 0,
twoWayOther: 0,
gridElements: {
access: {
title: "Dostępność",
@@ -141,16 +191,19 @@ export default Vue.extend({
items: [
{
id: "is-default",
value: true,
name: "default",
content: "w paczce z grą"
},
{
id: "not-default",
value: true,
name: "notDefault",
content: "poza paczką z grą"
},
{
id: "non-public",
value: true,
name: "nonPublic",
content: "niepubliczna"
}
@@ -164,21 +217,25 @@ export default Vue.extend({
items: [
{
id: "SPK",
value: true,
name: "SPK",
content: "SPK"
},
{
id: "SCS",
value: true,
name: "SCS",
content: "SCS"
},
{
id: "by-hand",
value: true,
name: "ręczne",
content: "ręczne"
},
{
id: "levers",
value: true,
name: "mechaniczne",
content: "mechaniczne"
}
@@ -192,21 +249,25 @@ export default Vue.extend({
items: [
{
id: "modern",
value: true,
name: "współczesna",
content: "współczesna"
},
{
id: "semaphore",
value: true,
name: "kształtowa",
content: "kształtowa"
},
{
id: "mixed",
value: true,
name: "mieszana",
content: "mieszana"
},
{
id: "historic",
value: true,
name: "historyczna",
content: "historyczna"
}
@@ -215,7 +276,7 @@ export default Vue.extend({
}
}),
methods: {
...mapActions(["setFilter"]),
...mapActions(["setFilter", "resetFilters"]),
handleChange(e: any) {
this.setFilter({ filterName: e.target.name, value: !e.target.checked });
},
@@ -224,6 +285,24 @@ export default Vue.extend({
filterName: e.target.name,
value: parseInt(e.target.value)
});
},
reset() {
for (const [key, value] of Object.entries(this.gridElements)) {
for (const item of this.gridElements[key].items) {
item.value = true;
}
}
this.oneWay = true;
this.twoWay = true;
this.levelFrom = 0;
this.levelTo = 20;
this.oneWayCatenary = 0;
this.oneWayOther = 0;
this.twoWayCatenary = 0;
this.twoWayOther = 0;
this.resetFilters();
}
}
});
@@ -246,6 +325,10 @@ export default Vue.extend({
white-space: nowrap;
font-size: calc(0.6rem + 0.4vw);
@include smallScreen() {
font-size: 0.65rem;
}
}
.grid {
@@ -271,12 +354,13 @@ export default Vue.extend({
-webkit-user-select: none;
}
}
.item {
&-title {
text-align: center;
margin-bottom: 0.5rem;
font-weight: bold;
.item-title {
text-align: center;
margin-bottom: 0.5rem;
font-weight: bold;
color: $accentCol;
color: $accentCol;
}
}
</style>