Dodano listę wszystkich scenerii

src/components/ui/List.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="list">
+  <div class="list flex">
     <Card :stationInfo="focusedStationInfo" :closeCard="closeCard" />
 
     <!-- <div class="info">Ups! Brak stacji do wyświetlenia!</div> -->
@@ -9,10 +9,10 @@
         <thead>
           <tr>
             <th>Stacja</th>
+            <th>Status</th>
             <th>Dyżurny</th>
             <th>Poziom</th>
             <th>Maszyniści</th>
-            <th>Zajęta do</th>
             <th>
               Informacje
               <div>ogólne</div>
@@ -28,83 +28,100 @@
           </tr>
         </thead>
 
-        <tr
-          class="table-item"
-          v-for="(station, i) in computedStations"
-          :key="i + station.stationHash"
-          @click="() => { setFocusedStation(station.stationName) }"
-        >
-          <td
-            class="station-name"
-            :class="station.default && 'default-station'"
-          >{{station.stationName}} {{ station.reqLevel ? "| " + (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "" }}</td>
+        <tbody>
+          <tr
+            class="table-item"
+            v-for="(station, i) in computedStations"
+            :key="i + station.stationHash"
+            @click="() => { if(station.online) setFocusedStation(station.stationName) }"
+          >
+            <td
+              class="station-name"
+              :class="{'default-station': station.default, 'online': station.online}"
+            >{{station.stationName}} {{ station.reqLevel ? "| " + (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "" }}</td>
+            <td class="hours">
+              <span
+                class="hour"
+                :class="occupationClasses(station.occupiedTo)"
+              >{{station.occupiedTo}}</span>
+            </td>
 
-          <td class="disptacher-name">{{station.dispatcherName}}</td>
-          <td class="dispatcher-exp">
-            <span :style="calculateStyle(station.dispatcherExp)">{{station.dispatcherExp}}</span>
-          </td>
-          <td class="users">{{station.currentUsers}}/{{station.maxUsers}}</td>
-          <td class="hours">
-            <span class="hour" :class="occupationClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
-          </td>
-          <td class="info">
-            <img
-              v-if="station.controlType"
-              :src="require(`@/assets/icon-${station.controlType}.svg`)"
-              :alt="station.controlType"
-              :title="'Sterowanie ' + station.controlType"
-            />
+            <td class="disptacher-name">{{station.online ? station.dispatcherName : ""}}</td>
+            <td class="dispatcher-exp">
+              <span
+                v-if="station.online"
+                :style="calculateStyle(station.dispatcherExp)"
+              >{{station.dispatcherExp}}</span>
+            </td>
+            <td
+              class="users"
+            >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
+            <td class="info">
+              <!-- <img
+                v-if="station.default"
+                :src="require(`@/assets/icon-td2.svg`)"
+                alt="default"
+                title="Sceneria domyślnie dostępna w grze"
+              />-->
 
-            <img
-              v-if="station.signalType"
-              :src="require(`@/assets/icon-${station.signalType}.svg`)"
-              :alt="station.signalType"
-              :title="'Sygnalizacja ' + station.signalType"
-            />
+              <img
+                v-if="station.controlType"
+                :src="require(`@/assets/icon-${station.controlType}.svg`)"
+                :alt="station.controlType"
+                :title="'Sterowanie ' + station.controlType"
+              />
 
-            <img
-              v-if="station.SBL && station.SBL !== ''"
-              :src="require(`@/assets/icon-SBL.svg`)"
-              alt="SBL"
-              title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-            />
+              <img
+                v-if="station.signalType"
+                :src="require(`@/assets/icon-${station.signalType}.svg`)"
+                :alt="station.signalType"
+                :title="'Sygnalizacja ' + station.signalType"
+              />
 
-            <img
-              v-if="!station.reqLevel || station.nonPublic"
-              :src="require(`@/assets/icon-lock.svg`)"
-              alt="non-public"
-              title="Sceneria niepubliczna"
-            />
-          </td>
+              <img
+                v-if="station.SBL && station.SBL !== ''"
+                :src="require(`@/assets/icon-SBL.svg`)"
+                alt="SBL"
+                title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
+              />
 
-          <td class="tracks twoway">
-            <span
-              v-if="station.routes && station.routes.twoWay.catenary > 0"
-              class="track catenary"
-              :title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
-            >{{station.routes.twoWay.catenary}}</span>
+              <img
+                v-if="!station.reqLevel || station.nonPublic"
+                :src="require(`@/assets/icon-lock.svg`)"
+                alt="non-public"
+                title="Sceneria niepubliczna"
+              />
+            </td>
 
-            <span
-              v-if="station.routes && station.routes.twoWay.noCatenary > 0"
-              class="track no-catenary"
-              :title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
-            >{{station.routes.twoWay.noCatenary}}</span>
-          </td>
+            <td class="tracks twoway">
+              <span
+                v-if="station.routes && station.routes.twoWay.catenary > 0"
+                class="track catenary"
+                :title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
+              >{{station.routes.twoWay.catenary}}</span>
 
-          <td class="tracks oneway">
-            <span
-              v-if="station.routes && station.routes.oneWay.catenary > 0"
-              class="track catenary"
-              :title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
-            >{{station.routes.oneWay.catenary}}</span>
+              <span
+                v-if="station.routes && station.routes.twoWay.noCatenary > 0"
+                class="track no-catenary"
+                :title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
+              >{{station.routes.twoWay.noCatenary}}</span>
+            </td>
 
-            <span
-              v-if="station.routes && station.routes.oneWay.noCatenary > 0"
-              class="track no-catenary"
-              :title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
-            >{{station.routes.oneWay.noCatenary}}</span>
-          </td>
-        </tr>
+            <td class="tracks oneway">
+              <span
+                v-if="station.routes && station.routes.oneWay.catenary > 0"
+                class="track catenary"
+                :title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
+              >{{station.routes.oneWay.catenary}}</span>
+
+              <span
+                v-if="station.routes && station.routes.oneWay.noCatenary > 0"
+                class="track no-catenary"
+                :title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
+              >{{station.routes.oneWay.noCatenary}}</span>
+            </td>
+          </tr>
+        </tbody>
       </table>
     </div>
   </div>
@@ -150,6 +167,9 @@ export default Vue.extend({
       let className = "";
 
       switch (occupiedTo) {
+        case "WOLNA":
+          className = "free";
+          break;
         case "KOŃCZY":
           className = "ending";
           break;
@@ -193,7 +213,14 @@ export default Vue.extend({
 .hour {
   padding: 0.4em;
   border-radius: 1rem;
-  font-weight: 500;
+  font-weight: bold;
+
+  background-color: #00be19;
+
+  &.free {
+    background-color: #8a8a8a;
+    font-size: 0.95em;
+  }
 
   &.ending {
     background-color: $accentCol;
@@ -202,7 +229,7 @@ export default Vue.extend({
   }
 
   &.no-limit {
-    // background-color: #57ae00;
+    background-color: #0077ae;
     font-size: 0.85em;
   }
 
@@ -229,13 +256,9 @@ export default Vue.extend({
   }
 }
 
-.list {
-  display: flex;
-  justify-content: center;
-}
-
 .default-station {
-  color: $secondaryCol;
+  font-weight: bold;
+  color: $accentCol;
 }
 
 .table {
@@ -247,14 +270,14 @@ export default Vue.extend({
   white-space: nowrap;
   border-collapse: collapse;
 
-  font-size: calc(0.6rem + 0.4vw);
+  font-size: calc(0.6rem + 0.35vw);
 
   @include smallScreen() {
     font-size: 0.65rem;
   }
 
   thead th {
-    padding: 0.2rem;
+    padding: 0.3rem;
     background-color: #444;
   }
 
@@ -264,19 +287,14 @@ export default Vue.extend({
     &:nth-child(even) {
       background-color: rgb(102, 101, 101);
       color: white;
-
-      a {
-        color: white;
-      }
     }
 
     &:hover,
     &:focus {
       background-color: #818181;
-      // transform: scale(1.2);
     }
 
-    & > td {
+    td {
       padding: 0.3rem 1rem;
       margin: 0 3rem;
       text-align: center;

src/components/ui/Options.vue

@@ -1,20 +1,14 @@
 <template>
   <div class="options">
     <div class="option-buttons">
-      <button
-        class="button-filters"
-        :class="{'open': filtersOpen}"
-        @click="filtersOpen = !filtersOpen"
-      >
+      <button class="button" :class="{'open': filtersOpen}" @click="filtersOpen = !filtersOpen">
         <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" /> FILTRY
       </button>
     </div>
 
-    <transition name="slide">
-      <keep-alive>
-        <ListFilter v-if="filtersOpen" :exit="() => filtersOpen = !filtersOpen" />
-      </keep-alive>
-    </transition>
+    <keep-alive>
+      <ListFilter v-if="filtersOpen" :exit="() => filtersOpen = !filtersOpen" />
+    </keep-alive>
   </div>
 </template>
 
@@ -38,36 +32,15 @@ export default Vue.extend({
 @import "../../styles/variables.scss";
 @import "../../styles/responsive.scss";
 
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s ease;
-}
-
-.slide-enter,
-.slide-leave-to {
-  transform: translate(-40%, -50%);
-  opacity: 0;
-}
-
 .options {
   font-size: calc(0.6rem + 0.9vw);
-
-  // display: flex;
 }
 
-button {
+.button {
   font-size: 0.8em;
-  padding: 0.3em;
 
   img {
     width: 1.3em;
-    margin: 0.2em;
-  }
-
-  &.open {
-    color: $accentCol;
-    border: none;
-    font-weight: bold;
   }
 }
 </style>

src/components/utils/ListFilter.vue

@@ -1,167 +1,169 @@
 <template>
-  <div class="list-filter">
-    <div class="exit" @click="exitFilters">X</div>
-    <div class="list-filter-title">FILTRY</div>
-    <ul class="grid">
-      <li class="grid-row">
-        <div class="grid-col" v-for="(el, i) in gridElements" :key="i">
-          <div class="grid-item">
-            <div class="item-title">{{el.title}}</div>
+  <transition name="slide">
+    <div class="list-filter">
+      <div class="exit" @click="exitFilters">X</div>
+      <div class="list-filter-title">FILTRY</div>
+      <ul class="grid">
+        <li class="grid-row">
+          <div class="grid-col" v-for="(el, i) in gridElements" :key="i">
+            <div class="grid-item">
+              <div class="item-title">{{el.title}}</div>
 
-            <div class="item-content">
-              <div class="item-input" v-for="(item, i) in el.items" :key="i">
-                <input
-                  :type="el.type"
-                  :id="item.id"
-                  :name="item.name"
-                  v-model="item.value"
-                  checked
-                  @change="handleChange"
-                />
-                <label :for="item.id">{{ item.content }}</label>
+              <div class="item-content">
+                <div class="item-input" v-for="(item, i) in el.items" :key="i">
+                  <input
+                    :type="el.type"
+                    :id="item.id"
+                    :name="item.name"
+                    v-model="item.value"
+                    checked
+                    @change="handleChange"
+                  />
+                  <label :for="item.id">{{ item.content }}</label>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </li>
+        </li>
 
-      <li class="grid-row">
-        <div class="grid-col">
-          <div class="grid-item">
-            <div class="item-title">Poziomy dyżurnego</div>
+        <li class="grid-row">
+          <div class="grid-col">
+            <div class="grid-item">
+              <div class="item-title">Poziomy dyżurnego</div>
 
-            <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"
-                  @change="handleInput"
-                />
-                <span>&nbsp;do&nbsp;</span>
-                <input
-                  v-model="levelTo"
-                  type="number"
-                  name="level-to"
-                  min="0"
-                  max="20"
-                  value="20"
-                  @change="handleInput"
-                />
+              <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"
+                    @change="handleInput"
+                  />
+                  <span>&nbsp;do&nbsp;</span>
+                  <input
+                    v-model="levelTo"
+                    type="number"
+                    name="level-to"
+                    min="0"
+                    max="20"
+                    value="20"
+                    @change="handleInput"
+                  />
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </li>
+        </li>
 
-      <li class="grid-row">
-        <div class="grid-col">
-          <div class="grid-item">
-            <div class="item-title">
-              Szlaki jednotorowe
-              <div>(minimum)</div>
-            </div>
-
-            <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>
+        <li class="grid-row">
+          <div class="grid-col">
+            <div class="grid-item">
+              <div class="item-title">
+                Szlaki jednotorowe
+                <div>(minimum)</div>
               </div>
 
-              <div class="item-input">
-                <input
-                  v-model="oneWayCatenary"
-                  type="number"
-                  name="1track-e"
-                  min="0"
-                  max="5"
-                  placeholder="0"
-                  @change="handleInput"
-                />
-                <span>&nbsp;Zelektryfikowane</span>
-              </div>
+              <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="oneWayOther"
-                  type="number"
-                  name="1track-ne"
-                  min="0"
-                  max="5"
-                  placeholder="0"
-                  @change="handleInput"
-                />
-                <span>&nbsp;Niezelektryfikowane</span>
+                <div class="item-input">
+                  <input
+                    v-model="oneWayCatenary"
+                    type="number"
+                    name="1track-e"
+                    min="0"
+                    max="5"
+                    placeholder="0"
+                    @change="handleInput"
+                  />
+                  <span>&nbsp;Zelektryfikowane</span>
+                </div>
+
+                <div class="item-input">
+                  <input
+                    v-model="oneWayOther"
+                    type="number"
+                    name="1track-ne"
+                    min="0"
+                    max="5"
+                    placeholder="0"
+                    @change="handleInput"
+                  />
+                  <span>&nbsp;Niezelektryfikowane</span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div class="grid-col">
-          <div class="grid-item">
-            <div class="item-title">
-              Szlaki dwutorowe
-              <div>(minimum)</div>
-            </div>
-
-            <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 class="grid-col">
+            <div class="grid-item">
+              <div class="item-title">
+                Szlaki dwutorowe
+                <div>(minimum)</div>
               </div>
 
-              <div class="item-input">
-                <input
-                  v-model="twoWayCatenary"
-                  type="number"
-                  name="2track-e"
-                  min="0"
-                  max="5"
-                  placeholder="0"
-                  @change="handleInput"
-                />
-                <span>&nbsp;Zelektryfikowane</span>
-              </div>
+              <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="twoWayOther"
-                  type="number"
-                  name="2track-ne"
-                  min="0"
-                  max="5"
-                  placeholder="0"
-                  @change="handleInput"
-                />
-                <span>&nbsp;Niezelektryfikowane</span>
+                <div class="item-input">
+                  <input
+                    v-model="twoWayCatenary"
+                    type="number"
+                    name="2track-e"
+                    min="0"
+                    max="5"
+                    placeholder="0"
+                    @change="handleInput"
+                  />
+                  <span>&nbsp;Zelektryfikowane</span>
+                </div>
+
+                <div class="item-input">
+                  <input
+                    v-model="twoWayOther"
+                    type="number"
+                    name="2track-ne"
+                    min="0"
+                    max="5"
+                    placeholder="0"
+                    @change="handleInput"
+                  />
+                  <span>&nbsp;Niezelektryfikowane</span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </li>
+        </li>
 
-      <li class="grid-row">
-        <button @click="reset">RESET FILTRÓW</button>
-      </li>
-    </ul>
-  </div>
+        <li class="grid-row">
+          <button class="button" @click="reset">RESET FILTRÓW</button>
+        </li>
+      </ul>
+    </div>
+  </transition>
 </template>
 
 <script lang="ts">
@@ -274,6 +276,13 @@ export default Vue.extend({
             content: "historyczna"
           }
         ]
+      },
+
+      status: {
+        title: "Status",
+        type: "checkbox",
+
+        items: []
       }
     }
   }),
@@ -318,24 +327,34 @@ export default Vue.extend({
 @import "../../styles/responsive";
 @import "../../styles/variables";
 
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-enter,
+.slide-leave-to {
+  opacity: 0;
+}
+
 .list-filter {
   position: fixed;
   top: 50%;
   left: 50%;
+  transform: translate(-50%, -50%);
 
   overflow: auto;
   max-height: 90%;
 
-  padding: 0.4em;
+  padding: 0.5em;
 
   background: rgba(black, 0.85);
   white-space: nowrap;
-  transform: translate(-50%, -50%);
   font-size: calc(0.6rem + 0.4vw);
 
   @include smallScreen() {
     width: 100vw;
-    font-size: 0.75em;
+    font-size: 1em;
   }
 }
 
@@ -343,9 +362,7 @@ export default Vue.extend({
   position: absolute;
   top: 0;
   right: 0;
-
   padding: 0.4rem;
-
   font-size: calc(1rem + 0.4vw);
 
   cursor: pointer;
@@ -353,8 +370,7 @@ export default Vue.extend({
 
 .list-filter-title {
   text-align: center;
-  padding: 0.3rem;
-  font-size: 1.6em;
+  font-size: 1.9em;
   font-weight: bold;
 }
 
@@ -378,13 +394,17 @@ export default Vue.extend({
     -webkit-user-select: none;
   }
 }
+
 .item {
   &-title {
     text-align: center;
     margin-bottom: 0.5rem;
     font-weight: bold;
-
     color: $accentCol;
   }
 }
+
+button.button {
+  margin-top: 0.5em;
+}
 </style>