diff --git a/public/index.html b/public/index.html index bfdcb6b..2a842e1 100644 --- a/public/index.html +++ b/public/index.html @@ -6,8 +6,8 @@ - + + Stacjownik diff --git a/src/App.vue b/src/App.vue index 8b163a0..02b11ed 100644 --- a/src/App.vue +++ b/src/App.vue @@ -67,7 +67,7 @@ export default Vue.extend({ ...mapActions(["initStations"]), getStationList() { this.initStations() - .then(() => (this.connectionState = 2)) + .then(result => (this.connectionState = 2)) .catch(err => { this.connectionState = 1; this.errorMessage = err.message; @@ -94,7 +94,8 @@ export default Vue.extend({ } ::-webkit-scrollbar { - width: 15px; + width: 0.5rem; + height: 0.5rem; &-track { background: #222; @@ -113,12 +114,12 @@ html { body { width: 100%; margin: 0; - font-family: "Lato", sans-serif; + font-family: "Muli", sans-serif; } button, input { - font-family: "Lato", sans-serif; + font-family: "Muli", sans-serif; } input { diff --git a/src/assets/icon-arrow-asc.svg b/src/assets/icon-arrow-asc.svg new file mode 100644 index 0000000..5e7caa7 --- /dev/null +++ b/src/assets/icon-arrow-asc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon-arrow-desc.svg b/src/assets/icon-arrow-desc.svg new file mode 100644 index 0000000..a7e0906 --- /dev/null +++ b/src/assets/icon-arrow-desc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon-sort.svg b/src/assets/icon-sort.svg new file mode 100644 index 0000000..753f72f --- /dev/null +++ b/src/assets/icon-sort.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/ui/Card.vue b/src/components/ui/Card.vue index 7a25944..41cba62 100644 --- a/src/components/ui/Card.vue +++ b/src/components/ui/Card.vue @@ -168,6 +168,7 @@ export default Vue.extend({ .card { display: flex; flex-direction: column; + position: fixed; top: 50%; left: 50%; diff --git a/src/components/ui/Icon.vue b/src/components/ui/Icon.vue new file mode 100644 index 0000000..5960ca3 --- /dev/null +++ b/src/components/ui/Icon.vue @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/src/components/ui/List.vue b/src/components/ui/List.vue index 0ca3ec3..3e6db06 100644 --- a/src/components/ui/List.vue +++ b/src/components/ui/List.vue @@ -2,33 +2,29 @@
- + -
- +
+
- - - - - - - - - + {{station.dispatcherExp}} + >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}} - +
StacjaStatusDyżurnyPoziomMaszyniści - Informacje -
ogólne
- 		- Szlaki -
2-torowe
- 		- Szlaki -
1-torowe
+ 		+ +
+
{{head[0]}}
+
{{head[1]}}
+
+ + +
{{station.routes.oneWay.noCatenary}}
@@ -132,21 +128,105 @@ import Vue from "vue"; import { mapGetters } from "vuex"; import Card from "@/components/ui/Card.vue"; +import Icon from "@/components/ui/Icon.vue"; export default Vue.extend({ name: "List", components: { - Card + Card, + Icon }, data: () => ({ - focusedStationName: "" + focusedStationName: "", + sorterActive: { index: 0, type: 1 }, + headTitles: [ + ["Stacja"], + ["Status"], + ["Dyżurny"], + ["Poziom"], + ["Maszyniści"], + ["Informacje", "ogólne"], + ["Szlaki", "dwutorowe"], + ["Szlaki", "jednotorowe"] + ] }), computed: { ...mapGetters({ stations: "getStations" }), computedStations() { - return this.stations.sort((a: any, b: any) => - a.stationName < b.stationName ? -1 : 1 - ); + let sortFun; + const type: number = this.sorterActive.type; + + const sortByName = (a, b) => { + if (a.stationName > b.stationName) return type; + if (a.stationName < b.stationName) return -type; + }; + + switch (this.sorterActive.index) { + case 0: + default: + sortFun = sortByName; + break; + + case 1: + sortFun = (a, b) => { + if (a.occupiedTo > b.occupiedTo) return type; + if (a.occupiedTo < b.occupiedTo) return -type; + + sortByName(a, b); + + return 0; + }; + break; + + case 2: + sortFun = (a, b) => { + if (a.dispatcherName > b.dispatcherName) return type; + if (a.dispatcherName < b.dispatcherName) return -type; + + sortByName(a, b); + + return 0; + }; + break; + + case 3: + sortFun = (a, b) => { + if (a.dispatcherExp > b.dispatcherExp) return type; + if (a.dispatcherExp < b.dispatcherExp) return -type; + + // TO DO: naprawić bugujące się sortowanie + + // sortByName(a, b); + + return 0; + }; + break; + + case 4: + sortFun = (a, b) => { + if (a.currentUsers > b.currentUsers) return type; + if (a.currentUsers < b.currentUsers) return -type; + + sortByName(a, b); + + return 0; + }; + break; + + case 5: + sortFun = (a, b) => { + if (a.currentUsers > b.currentUsers) return type; + if (a.currentUsers < b.currentUsers) return -type; + + if (a.maxUsers > b.maxUsers) return type; + if (a.maxUsers < b.maxUsers) return -type; + + return 0; + }; + break; + } + + return this.stations.sort(sortFun); }, focusedStationInfo() { return this.stations.find( @@ -155,9 +235,17 @@ export default Vue.extend({ } }, methods: { + changeSorter(index: number) { + if (index >= 5) return; + + if (index == this.sorterActive.index) + this.sorterActive.type = this.sorterActive.type == 1 ? -1 : 1; + else this.sorterActive.type = 1; + + this.sorterActive.index = index; + }, calculateStyle: (exp: string | number) => { - const bgColor = - exp === "L" ? "#26B0D9" : `hsl(${-exp * 5 + 100}, 65%, 50%)`; + const bgColor = exp < 2 ? "#26B0D9" : `hsl(${-exp * 5 + 100}, 65%, 50%)`; const fontColor = exp > 15 ? "white" : "black"; return `backgroundColor: ${bgColor}; color: ${fontColor}`; @@ -276,9 +364,25 @@ export default Vue.extend({ font-size: 0.75rem; } - thead th { + th { padding: 0.3rem; background-color: #444; + min-width: 150px; + + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + + span { + display: flex; + align-items: center; + justify-content: center; + + & > img { + width: 1.5em; + } + } } tr { diff --git a/src/components/utils/ListFilter.vue b/src/components/ui/OptionCard.vue similarity index 52% rename from src/components/utils/ListFilter.vue rename to src/components/ui/OptionCard.vue index b155917..a68e18e 100644 --- a/src/components/utils/ListFilter.vue +++ b/src/components/ui/OptionCard.vue @@ -1,14 +1,14 @@