diff --git a/src/App.scss b/src/App.scss
index 1033d9d..49e4daf 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -91,6 +91,11 @@ footer.app_footer {
max-width: 100%;
padding: 0.5em;
+ img {
+ width: 1.1em;
+ vertical-align: text-bottom;
+ }
+
z-index: 10;
background: #111;
diff --git a/src/App.vue b/src/App.vue
index 2e91da7..01fee68 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,6 +23,8 @@
Spythere
{{ new Date().getUTCFullYear() }} |
v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}
+
+
Discord Stacjownika
@@ -33,6 +23,12 @@
{{ onlineDispatchersCount }}
+
+
+
/
{{ onlineTrainsCount }}
![icon train]()
@@ -98,11 +94,17 @@ export default defineComponent({
onlineTrainsCount() {
return this.store.trainList.filter((train) => train.online).length;
},
+
onlineDispatchersCount() {
return this.store.stationList.filter(
(station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id
).length;
},
+
+ factorU() {
+ return this.onlineDispatchersCount == 0 ? '-' : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
+ },
+
computedRegions() {
return options.regions.map((region) => {
const regionStationCount =
@@ -135,22 +137,19 @@ export default defineComponent({
.header {
&_body {
- max-width: 21em;
position: relative;
-
- @include smallScreen {
- max-width: 18em;
- }
}
&_container {
display: flex;
justify-content: center;
- position: relative;
- width: 1350px;
- padding: 0.5em 0.3em 0 0.3em;
border-radius: 0 0 1em 1em;
+
+ @include smallScreen {
+ position: relative;
+ margin-top: 0.5em;
+ }
}
&_brand {
@@ -158,6 +157,8 @@ export default defineComponent({
img {
width: 100%;
+ max-width: 20em;
+
margin: 0 auto;
}
}
@@ -165,9 +166,7 @@ export default defineComponent({
&_info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
- max-width: 100%;
-
- font-size: 1.2em;
+ font-size: 1.15em;
}
&_links {
@@ -184,57 +183,20 @@ export default defineComponent({
position: absolute;
right: 0;
top: 0;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- align-items: flex-end;
- padding: 0.5em 0.5em;
+ padding: 0.5em;
- @include smallScreen() {
- right: auto;
- left: 0.75em;
- padding: 0;
-
- align-items: center;
+ @include smallScreen {
+ transform: translateX(70%);
}
}
}
// ICONS
-.icons {
- position: relative;
-
- &-top {
- img {
- width: 2.5em;
-
- cursor: pointer;
- }
-
- margin-bottom: 0.5em;
- }
-
- &-bottom {
- display: flex;
-
- a {
- margin-left: 0.6em;
- user-select: none;
- }
-
- img {
- width: 1.9em;
- }
-
- @include smallScreen() {
- flex-direction: column;
-
- a {
- margin: 0.25em 0;
- }
- }
+.icons-top {
+ img {
+ width: 2.5em;
+ cursor: pointer;
}
}
diff --git a/src/components/App/StatusIndicator.vue b/src/components/App/StatusIndicator.vue
index 0e4fdaf..0936a1c 100644
--- a/src/components/App/StatusIndicator.vue
+++ b/src/components/App/StatusIndicator.vue
@@ -303,9 +303,11 @@ export default defineComponent({
.status-indicator {
position: absolute;
- left: 110%;
bottom: 0;
+ right: 0;
z-index: 100;
+
+ transform: translateX(1.5em);
}
.indicator {
@@ -330,7 +332,7 @@ export default defineComponent({
background-color: #171717;
border-radius: 0.75em;
- min-width: 13em;
+ width: 13em;
text-align: center;
overflow: none;
@@ -354,22 +356,16 @@ export default defineComponent({
}
@include midScreen() {
- left: 50%;
- top: 100%;
-
- transform: translate(-50%, 0);
- margin-left: 0;
- margin-top: 0.75em;
+ left: auto;
+ right: 200%;
&::before {
- border-left: 10px solid transparent;
border-right: 10px solid transparent;
- border-bottom: 10px solid #171717;
+ border-left: 12px solid #171717;
+ right: 0;
+ left: auto;
- top: 0;
- left: 50%;
-
- transform: translate(-50%, -100%);
+ transform: translate(100%, -50%);
}
}
@@ -379,3 +375,4 @@ export default defineComponent({
}
}
+
diff --git a/src/components/Global/SelectBox.vue b/src/components/Global/SelectBox.vue
index d4b90b0..7331c63 100644
--- a/src/components/Global/SelectBox.vue
+++ b/src/components/Global/SelectBox.vue
@@ -3,6 +3,10 @@
-
-
-
![arrow-icon]()
-
@@ -129,46 +129,22 @@ export default defineComponent({
}
.select-box {
- position: relative;
- width: auto;
+ display: flex;
+ align-items: center;
}
.arrow {
- position: absolute;
- top: 50%;
- right: 0;
- padding: 0;
-
img {
vertical-align: middle;
width: 1.35em;
}
-
- transform: translateY(-50%);
-
- pointer-events: none;
}
button.selected {
- background-color: transparent;
color: paleturquoise;
- font-size: 1em;
font-weight: bold;
-
padding: 0.1em 0.5em;
- margin-right: 2em;
-
- display: flex;
-
-
- width: 100%;
- cursor: pointer;
-
- border: none;
- outline: none;
-
- text-align: left;
&:focus {
background-color: #262626;
diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index 661a29d..d762435 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -1,7 +1,7 @@
-
+
@@ -140,35 +140,44 @@
{{ $t('journal.stock-length') }}
- {{ timetable.stockLength }}m
+
+ {{
+ item.currentHistoryIndex.value == 0
+ ? timetable.stockLength
+ : stockHistoryComp[item.currentHistoryIndex.value].stockLength || timetable.stockLength
+ }}m
+
{{ $t('journal.stock-mass') }}
- {{ Math.floor(timetable.stockMass! / 1000) }}t
+
+ {{
+ Math.floor(
+ (item.currentHistoryIndex.value == 0
+ ? timetable.stockMass!
+ : stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) / 1000
+ )
+ }}t
+
-
+
-
@@ -209,7 +218,22 @@ export default defineComponent({
return this.timetableHistory.map((timetable) => ({
timetable,
sceneryList: this.getSceneryList(timetable),
- revesedHistory: timetable.stockHistory.slice().reverse(),
+ stockHistoryComp: timetable.stockHistory
+ .slice()
+ .reverse()
+ .map((h) => {
+ const historyData = h.split('@');
+
+ return {
+ updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
+ hour: '2-digit',
+ minute: '2-digit',
+ }),
+ stockString: historyData[1],
+ stockMass: Number(historyData[2]) || undefined,
+ stockLength: Number(historyData[3]) || undefined,
+ };
+ }),
showExtra: ref(false),
currentHistoryIndex: ref(0),
}));
@@ -362,8 +386,8 @@ ul.stock-list {
flex-wrap: wrap;
gap: 0.5em;
margin-top: 1em;
-
- button[data-checked=true] {
+
+ button[data-checked='true'] {
color: $accentCol;
}
}
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index 629dccf..360483f 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -54,9 +54,7 @@
|
-
- {{ station.generalInfo?.abbr }}
-
+ {{ station.generalInfo?.abbr }}
|
diff --git a/src/scripts/utils/apiURLs.ts b/src/scripts/utils/apiURLs.ts
index fe47142..afe5bb2 100644
--- a/src/scripts/utils/apiURLs.ts
+++ b/src/scripts/utils/apiURLs.ts
@@ -1,7 +1,7 @@
export const URLs = {
stacjownikAPI:
import.meta.env.VITE_APP_API_DEV == 1 && !import.meta.env.PROD
- ? 'http://localhost:3000'
+ ? 'http://localhost:3001'
: 'https://spythere.pl',
stacjownikAPIDev: 'localhost:3000',
};
|