From 8e9da4c4984d89fcacd8afaf83a6a012e6f9822f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 12 Nov 2021 23:08:25 +0100
Subject: [PATCH] =?UTF-8?q?Poprawki=20bug=C3=B3w;=20cleanup=20i=20restrukt?=
 =?UTF-8?q?uryzacja=20kodu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |   2 +-
 src/App.vue                      | 991 +------------------------------
 src/components/InputsSection.vue | 420 +++++++++++++
 src/components/ListSection.vue   | 438 ++++++++++++++
 src/main.ts                      |  22 +-
 src/mixins/StatsMixin.ts         | 147 +++++
 src/types.ts                     |  63 ++
 7 files changed, 1113 insertions(+), 970 deletions(-)
 create mode 100644 src/components/InputsSection.vue
 create mode 100644 src/components/ListSection.vue
 create mode 100644 src/mixins/StatsMixin.ts
 create mode 100644 src/types.ts

diff --git a/package.json b/package.json
index 6bf1d25..2f96775 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pojazdownik",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/App.vue b/src/App.vue
index 4ccb7bb..b5c5366 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,219 +5,8 @@
   </header>
 
   <main>
-    <section class="inputs">
-      <div class="input inputs_loco">
-        <div class="input_container">
-          <h2 class="input_header">LOKOMOTYWA / ZESP. TRAKCYJNY</h2>
-          <div class="input_radio">
-            <label v-for="label in locoLabels" :for="label.id" :key="label.id">
-              <input
-                type="radio"
-                name="loco"
-                :id="label.id"
-                :value="label.id"
-                :checked="chosenLocoPower == label.id"
-                @change="onLocoPowerChange(label.id)"
-                v-model="chosenLocoPower"
-              />
-              <span>{{ label.title }}</span>
-            </label>
-          </div>
-
-          <div class="input_list type">
-            <select
-              id="loco-select"
-              v-model="chosenLoco"
-              @change="onLocoTypeChange"
-            >
-              <option :value="null" disabled>Wybierz pojazd z listy</option>
-              <option
-                v-for="loco in locoOptions"
-                :value="loco"
-                :key="loco.type"
-              >
-                {{ loco.type }}
-              </option>
-            </select>
-
-            <button @click="addVehicle">
-              <img :src="icons.add" alt="add vehicle" />
-            </button>
-          </div>
-
-          <div class="input_checkbox">
-            <label for="supporter">
-              <input type="checkbox" id="supporter" v-model="showSupporter" />
-              <span>Pokaż pojazdy dla supporterów</span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="input inputs_car"
-        :class="{
-          disabled:
-            chosenLocoPower == 'loco-ezt' || chosenLocoPower == 'loco-szt',
-        }"
-      >
-        <div class="input_container">
-          <h2 class="input_header">RODZAJ WAGONU</h2>
-          <div class="input_radio">
-            <label v-for="label in carLabels" :for="label.id" :key="label.id">
-              <input
-                type="radio"
-                name="car"
-                :id="label.id"
-                :checked="chosenCarUseType == label.id"
-                :value="label.id"
-                v-model="chosenCarUseType"
-                @change="onCarUseTypeChange(label.id)"
-              />
-              <span>{{ label.title }}</span>
-            </label>
-          </div>
-
-          <div class="input_list type">
-            <select
-              id="car-select"
-              v-model="chosenCar"
-              @change="onCarTypeChange"
-            >
-              <option :value="null" disabled>Wybierz wagon z listy</option>
-              <option v-for="car in carOptions" :value="car" :key="car.type">
-                {{ car.type }}
-              </option>
-            </select>
-
-            <button @click="addVehicle">
-              <img :src="icons.add" alt="add vehicle" />
-            </button>
-          </div>
-
-          <div class="input_list cargo">
-            <select
-              id="cargo-select"
-              :disabled="
-                (chosenCar && !chosenCar.loadable) ||
-                (chosenCar && chosenCar.useType == 'car-passenger') ||
-                !chosenCar
-              "
-              v-model="chosenCargo"
-            >
-              <option :value="null">brak</option>
-              <option
-                v-for="cargo in chosenCar?.cargoList"
-                :value="cargo"
-                :key="cargo.id"
-              >
-                {{ cargo.id }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <div class="bottom">
-      <section class="image">
-        <div class="image__wrapper">
-          <div class="image__content">
-            <div class="no-img" v-if="!chosenCar && !chosenLoco">
-              POGLĄD WYBRANEGO POJAZDU
-            </div>
-            <div class="empty-message" v-if="imageLoading">
-              ŁADOWANIE OBRAZU...
-            </div>
-            <img
-              v-if="chosenLoco && !chosenCar"
-              :src="chosenLoco.imageSrc"
-              :alt="chosenLoco.type"
-              @load="onImageLoad"
-            />
-            <img
-              v-if="chosenCar"
-              :src="chosenCar.imageSrc"
-              :alt="chosenCar.type"
-              @load="onImageLoad"
-            />
-          </div>
-        </div>
-        <!-- <button class="btn-rect" @click="addVehicle">+</button> -->
-      </section>
-
-      <section class="spacer"></section>
-
-      <section class="stock-list">
-        <div class="stock-list_buttons">
-          <button class="btn btn--copy" @click="downloadStock">
-            POBIERZ SKŁAD
-          </button>
-          <!-- <button class="btn btn--show-text">WCZYTAJ SKŁAD</button> -->
-        </div>
-        <div class="stock-list_specs">
-          Masa: <span class="text--accent">{{ totalMass }}</span> t | Długość:
-          <span class="text--accent">{{ totalLength }}</span>
-          m | Vmax składu:
-          <span class="text--accent">{{ maxSpeed }} </span> km/h
-        </div>
-        <ul>
-          <li v-if="stockList.length == 0" class="list-empty">
-            <div class="item-content">Lista pojazdów jest pusta!</div>
-          </li>
-
-          <li
-            v-for="(stock, i) in stockList"
-            :key="stock.type + i"
-            :class="{ loco: stock.isLoco }"
-            :data-id="i"
-            tabindex="0"
-            @focus="onListItemFocus(i)"
-            :ref="`item-${i}`"
-          >
-            <div
-              class="item-content"
-              @dragstart="onDragStart(i)"
-              @drop="onDrop($event, i)"
-              @dragover="allowDrop"
-              draggable="true"
-            >
-              <span>
-                {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
-              </span>
-              <span v-if="stock.cargo"> &nbsp; ({{ stock.cargo?.id }}) </span>
-              &nbsp;
-              <span> {{ stock.length }}m</span>
-              &nbsp;
-              <span
-                >{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t</span
-              >
-            </div>
-
-            <div class="item-actions">
-              <div class="count">
-                <button class="action-btn" @click="subStock(i)">
-                  <img :src="icons.sub" alt="subtract vehicle count" />
-                </button>
-                <span>{{ stock.count }} </span>
-                <button class="action-btn" @click="addStock(i)">
-                  <img :src="icons.add" alt="add vehicle count" />
-                </button>
-              </div>
-              <button class="action-btn" @click="moveUpStock(i)">
-                <img :src="icons.higher" alt="move up vehicle" />
-              </button>
-              <button class="action-btn" @click="moveDownStock(i)">
-                <img :src="icons.lower" alt="move down vehicle" />
-              </button>
-              <button class="action-btn" @click="removeStock(i)">
-                <img :src="icons.remove" alt="remove vehicle" />
-              </button>
-            </div>
-          </li>
-        </ul>
-      </section>
-    </div>
+    <inputs-section />
+    <list-section />
   </main>
   <footer>
     <div class="text--grayed" style="margin-bottom: 0.25em">
@@ -229,498 +18,26 @@
 </template>
 
 <script lang="ts">
-import { Vue } from "vue-class-component";
-
-import vehicleDataJSON from "./data/vehicleData.json";
-import vehiclePropsJSON from "./data/vehicleProps.json";
-
 import packageInfo from ".././package.json";
 
-interface VehicleData {
-  [key: string]: (string | boolean)[][];
-}
-
-interface Locomotive {
-  type: string;
-  power: string;
-  constructionType: string;
-  cabinType: string;
-  maxSpeed: number;
-  supportersOnly: boolean;
-  imageSrc: string;
-
-  mass: number;
-  length: number;
-}
-
-interface CarWagon {
-  //"203V_PKPC_Fll_01","203V",true,false,"100",img
-  type: string;
-  useType: string;
-  constructionType: string;
-  loadable: boolean;
-  supportersOnly: boolean;
-  maxSpeed: number;
-  imageSrc: string;
-
-  mass: number;
-  length: number;
-  cargoList: { id: string; totalMass: number }[];
-}
-
-function isLocomotive(vehicle: Locomotive | CarWagon): vehicle is Locomotive {
-  return (vehicle as Locomotive).power !== undefined;
-}
-
-export default class App extends Vue {
-  icons = {
-    add: require("./assets/add-icon.svg"),
-    sub: require("./assets/sub-icon.svg"),
-    remove: require("./assets/remove-icon.svg"),
-    lower: require("./assets/lower-icon.svg"),
-    higher: require("./assets/higher-icon.svg"),
-  };
-
-  VERSION = packageInfo.version;
-
-  imageLoading = false;
-  draggedVehicleID = -1;
-
-  locoLabels = [
-    {
-      id: "loco-e",
-      title: "ELEKTROWÓZ",
-    },
-    {
-      id: "loco-s",
-      title: "SPALINOWÓZ",
-    },
-    {
-      id: "loco-ezt",
-      title: "EZT",
-    },
-    {
-      id: "loco-szt",
-      title: "SZT",
-    },
-  ];
-
-  carLabels = [
-    {
-      id: "car-passenger",
-      title: "PASAŻERSKI",
-    },
-    {
-      id: "car-cargo",
-      title: "TOWAROWY",
-    },
-  ];
-
-  showSupporter = false;
-
-  chosenLocoPower = "loco-e";
-  chosenCarUseType = "car-passenger";
-
-  chosenCar: CarWagon | null = null;
-  chosenLoco: Locomotive | null = null;
-  chosenCargo: { id: string; totalMass: number } | null = null;
-
-  cargoOptions: any[][] = [];
-
-  stockList: {
-    useType: string;
-    type: string;
-    length: number;
-    mass: number;
-    maxSpeed: number;
-    cargo?: { id: string; totalMass: number };
-    isLoco: boolean;
-    count: number;
-    imgSrc: string;
-  }[] = [];
-
-  onLocoPowerChange(inputId: string) {
-    this.chosenLoco = null;
-    this.imageLoading = false;
-  }
-
-  onCarUseTypeChange(inputId: string) {
-    this.chosenCar = null;
-
-    if (inputId == "car-passenger") this.chosenCargo = null;
-
-    this.imageLoading = false;
-  }
-
-  onCarTypeChange() {
-    this.chosenCargo = null;
-    this.chosenLoco = null;
-
-    this.imageLoading = true;
-  }
-
-  onLocoTypeChange() {
-    this.chosenCargo = null;
-    this.chosenCar = null;
-
-    this.imageLoading = true;
-  }
-
-  get locoOptions() {
-    return this.locoDataList
-      .filter((loco) => loco.power == this.chosenLocoPower)
-      .sort((a, b) => (a.type > b.type ? -1 : 1));
-  }
-
-  get carOptions() {
-    return this.carDataList
-      .filter((car) => car.useType == this.chosenCarUseType)
-      .sort((a, b) => (a.type > b.type ? 1 : -1));
-  }
-
-  onDragStart(vehicleIndex: number) {
-    this.draggedVehicleID = vehicleIndex;
-  }
-
-  onDrop(e: DragEvent, vehicleIndex: number) {
-    e.preventDefault();
-
-    let targetEl: Element | null = this.$refs[
-      `item-${vehicleIndex}`
-    ] as Element;
-
-    if (!targetEl) return;
-
-    const dataID = targetEl.attributes.getNamedItem("data-id")?.textContent;
-
-    if (!dataID) return;
-
-    const tempVehicle = this.stockList[Number(dataID)];
-
-    this.stockList[Number(dataID)] = this.stockList[this.draggedVehicleID];
-    this.stockList[this.draggedVehicleID] = tempVehicle;
-  }
-
-  allowDrop(e: DragEvent) {
-    e.preventDefault();
-  }
-
-  onImageLoad(ev: Event) {
-    this.imageLoading = false;
-  }
-
-  onListItemFocus(vehicleID: number) {
-    const vehicle = this.stockList[vehicleID];
-
-    if (vehicle.isLoco) {
-      this.chosenLocoPower = vehicle.useType;
-
-      this.chosenLoco =
-        this.locoDataList.find((v) => v.type == vehicle.type) || null;
-
-      this.chosenCar = null;
-      this.chosenCargo = null;
-
-      // this.onLocoPowerChange(vehicle.useType);
-      return;
-    }
-
-    this.chosenCarUseType = vehicle.useType;
-
-    this.chosenLoco = null;
-    this.chosenCar =
-      this.carDataList.find((v) => v.type == vehicle.type) || null;
-    this.chosenCargo = vehicle.cargo || null;
-
-    // this.chose = vehicle.useType;
-  }
-
-  getCarSpecFromType(typeStr: string) {
-    const specArray = typeStr.split("_");
-
-    if (specArray.length == 0) return null;
-
-    const shortVersion = specArray.length == 3;
-
-    /* 111a_Grafitti_1 */
-    if (specArray.length == 3)
-      return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
-
-    /* 111a_PKP_Bnouz_01 */
-    return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
-  }
-
-  addStock(index: number) {
-    this.stockList[index].count++;
-  }
-
-  subStock(index: number) {
-    if (this.stockList[index].count < 2) return;
-
-    this.stockList[index].count--;
-  }
-
-  removeStock(index: number) {
-    this.stockList = this.stockList.filter((stock, i) => i != index);
-  }
-
-  moveUpStock(index: number) {
-    if (index < 1) return;
-
-    const tempStock = this.stockList[index];
-
-    this.stockList[index] = this.stockList[index - 1];
-    this.stockList[index - 1] = tempStock;
-  }
-
-  moveDownStock(index: number) {
-    if (index > this.stockList.length - 2) return;
-
-    const tempStock = this.stockList[index];
-
-    this.stockList[index] = this.stockList[index + 1];
-    this.stockList[index + 1] = tempStock;
-  }
-
-  downloadStock() {
-    const fileName = prompt("Nazwij plik:", "sklad");
-
-    if (!fileName) return;
-
-    const stockString = this.stockList
-      .map((stock) => {
-        let s =
-          stock.isLoco || !stock.cargo
-            ? stock.type
-            : `${stock.type}:${stock.cargo.id}`;
-
-        let final = s;
-        for (let i = 0; i < stock.count - 1; i++) final += `;${s}`;
-
-        return final;
-      })
-      .join(";");
-
-    const blob = new Blob([stockString]);
-    const file = fileName + ".con";
-
-    var e = document.createEvent("MouseEvents"),
-      a = document.createElement("a");
-    a.download = file;
-    a.href = window.URL.createObjectURL(blob);
-    a.dataset.downloadurl = ["", a.download, a.href].join(":");
-    e.initEvent("click", true, false);
-    a.dispatchEvent(e);
-  }
-
-  get locoDataList() {
-    const locos = Object.keys(vehicleDataJSON).reduce((acc, vehicleTypeKey) => {
-      if (!vehicleTypeKey.startsWith("loco")) return acc;
-
-      const locoVehiclesData = (vehicleDataJSON as VehicleData)[vehicleTypeKey];
-
-      locoVehiclesData.forEach((loco) => {
-        if (loco[4] && !this.showSupporter) return;
-
-        const locoType = loco[0] as string;
-
-        let length = 0,
-          mass = 0;
-
-        // Elektrowozy
-        if (vehicleTypeKey.startsWith("loco-e")) {
-          // 32m dla ET41, reszta 16
-          length = locoType.startsWith("ET") ? 32 : 16;
-
-          // 80t dla wszystkich EU06, EP08
-          mass = 80;
-
-          // 83t dla: EU07 o nr większych niż 300 & dla wszystkich EP07 oprócz nr 135,242,1002,1048
-          const locoNumber = Number(locoType.split("-")[1]);
-
-          if (
-            (locoType.startsWith("EU") && locoNumber > 300) ||
-            (locoType.startsWith("EP") &&
-              ![242, 135, 1002, 1048].includes(locoNumber))
-          ) {
-            mass = 83;
-          }
-        }
-
-        // Spalinowozy
-        if (vehicleTypeKey.startsWith("loco-s")) {
-          length = 14;
-          mass = 74;
-        }
-
-        // EZT
-        if (vehicleTypeKey.startsWith("loco-ezt")) {
-          // EN57
-          length = 65;
-          mass = 126;
-
-          // EN71
-          if (locoType.startsWith("EN71")) {
-            length = 86;
-            mass = 182;
-          }
-
-          // 2xEN57
-          if (locoType.startsWith("2EN57")) {
-            length = 130;
-            mass = 253;
-          }
-        }
-
-        // SZT
-        if (vehicleTypeKey.startsWith("loco-szt")) {
-          length = 14;
-          mass = 23;
-        }
-
-        acc.push({
-          power: vehicleTypeKey,
-          type: loco[0] as string,
-          constructionType: loco[1] as string,
-          cabinType: loco[2] as string,
-          maxSpeed: Number(loco[3] as string),
-          supportersOnly: loco[4] as boolean,
-          imageSrc: loco[5] as string,
-
-          length,
-          mass,
-        });
-      });
-
-      return acc;
-    }, [] as Locomotive[]);
-
-    return locos;
-  }
-
-  get carDataList() {
-    const locos = Object.keys(vehicleDataJSON).reduce((acc, vehicleTypeKey) => {
-      if (!vehicleTypeKey.startsWith("car")) return acc;
-
-      const carVehiclesData = (vehicleDataJSON as VehicleData)[vehicleTypeKey];
-
-      carVehiclesData.forEach((car) => {
-        if (car[3] && !this.showSupporter) return;
-
-        const carPropsData = vehiclePropsJSON.find((v) =>
-          car[0].toString().includes(v.type)
-        );
-
-        acc.push({
-          useType: vehicleTypeKey,
-          type: car[0] as string,
-          constructionType: car[1] as string,
-          loadable: car[2] as boolean,
-          supportersOnly: car[3] as boolean,
-          maxSpeed: Number(car[4] as string),
-          imageSrc: car[5] as string,
-          cargoList:
-            carPropsData?.cargo.split(";").map((cargo) => ({
-              id: cargo.split(":")[0],
-              totalMass: Number(cargo.split(":")[1]),
-            })) || [],
-
-          mass: carPropsData?.mass || 0,
-          length: carPropsData?.length || 0,
-        });
-      });
-
-      return acc;
-    }, [] as CarWagon[]);
-
-    return locos;
-  }
-
-  addVehicle() {
-    const vehicle = this.chosenCar || this.chosenLoco;
-
-    if (!vehicle) return;
-    if (vehicle.length + this.totalLength > 650) {
-      alert("Maksymalna długość składu to 650m!");
-      return;
-    }
-
-    const previousStock =
-      this.stockList.length > 0
-        ? this.stockList[this.stockList.length - 1]
-        : null;
-
-    if (
-      isLocomotive(vehicle) &&
-      previousStock &&
-      previousStock.type == vehicle.type
-    ) {
-      this.stockList[this.stockList.length - 1].count++;
-      return;
-    }
-
-    if (
-      !isLocomotive(vehicle) &&
-      previousStock &&
-      previousStock.type == vehicle.type &&
-      previousStock.cargo?.id == this.chosenCargo?.id
-    ) {
-      this.stockList[this.stockList.length - 1].count++;
-
-      return;
-    }
-
-    const stockObj = {
-      type: vehicle.type,
-      length: vehicle.length,
-      mass: vehicle.mass,
-      maxSpeed: vehicle.maxSpeed,
-      isLoco: isLocomotive(vehicle),
-      cargo:
-        !isLocomotive(vehicle) && vehicle.loadable && this.chosenCargo
-          ? this.chosenCargo
-          : undefined,
-      count: 1,
-      imgSrc: vehicle.imageSrc,
-      useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
-    };
-
-    if (
-      isLocomotive(vehicle) &&
-      this.stockList.length > 0 &&
-      !this.stockList[0].isLoco
-    )
-      this.stockList.unshift(stockObj);
-    else this.stockList.push(stockObj);
-  }
-
-  get totalMass() {
-    return this.stockList.reduce(
-      (acc, stock) =>
-        acc + (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
-      0
-    );
-  }
-
-  get totalLength() {
-    return this.stockList.reduce(
-      (acc, stock) => acc + stock.length * stock.count,
-      0
-    );
-  }
-
-  get maxSpeed() {
-    return this.stockList.reduce(
-      (acc, stock) => (stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc),
-      0
-    );
-  }
-
-  mounted() {
-    this.onLocoPowerChange("loco-e");
-    this.onCarUseTypeChange("car-passenger");
-  }
-}
+import { defineComponent } from "vue";
+
+import ListSection from "@/components/ListSection.vue";
+import InputsSection from "@/components/InputsSection.vue";
+
+export default defineComponent({
+  components: {
+    ListSection,
+    InputsSection,
+  },
+  data: () => ({
+    VERSION: packageInfo.version,
+  }),
+
+  setup() {
+    return {};
+  },
+});
 </script>
 
 <style lang="scss">
@@ -775,257 +92,17 @@ h2 {
   margin: 0;
   font-size: 1.5em;
   line-height: 0.55em;
-
-  /* span {
-    padding: 0.25em 0.65em;
-  } */
 }
 
 /* MAIN SECTION */
 
 main {
-  /* display: grid; */
-
-  /* grid-template-areas:
-    "loco car"
-    "image image"
-    "stock stock"; */
-
   margin-top: 8em;
 }
 
-.inputs {
-  display: flex;
-  justify-content: space-between;
-
-  @media screen and (max-width: 800px) {
-    flex-direction: column;
-  }
-
-  &_car {
-    &.disabled {
-      opacity: 0.75;
-      pointer-events: none;
-    }
-  }
-}
-
-.input {
-  &_header {
-    margin-bottom: 1em;
-  }
-
-  &_radio {
-    label span {
-      padding: 0.25em 0.55em;
-      border: 2px solid white;
-    }
-  }
-
-  &_checkbox {
-    label span {
-      /* padding: 0.25em 0.55em; */
-      /* border: 2px solid white; */
-      color: #aaa;
-
-      &::before {
-        content: "";
-        display: inline-block;
-
-        width: 1.5ex;
-        height: 1.5ex;
-        background: #aaa;
-
-        margin-right: 0.5em;
-      }
-    }
-
-    input:checked + span::before {
-      background-color: $accentColor;
-    }
-  }
-
-  &_radio,
-  &_checkbox {
-    margin: 1em 0;
-
-    label {
-      cursor: pointer;
-      margin-right: 0.5em;
-
-      input {
-        display: none;
-
-        &:checked + span {
-          border-color: $accentColor;
-          color: $accentColor;
-        }
-      }
-    }
-  }
-
-  &_list {
-    margin: 0.5em 0;
-
-    display: flex;
-  }
-
-  &_list button {
-    margin-left: 0.5em;
-
-    &:hover img {
-      border-color: $accentColor;
-    }
-
-    img {
-      border: 2px solid white;
-      padding: 0.25em;
-
-      height: 2.35em;
-
-      vertical-align: middle;
-    }
-  }
-}
-
-.bottom {
-  display: flex;
-  justify-content: space-between;
-
-  margin-top: 2.5em;
-
-  @media screen and (max-width: 800px) {
-    flex-direction: column;
-    align-items: center;
-
-    .image {
-      display: flex;
-      padding: 0 0 2em 0;
-    }
-  }
-}
-
-.spacer {
-  flex: 2 1 10%;
-}
-
-.image {
-  flex-grow: 2;
-  padding: 0 1em 0 0;
-
-  &__wrapper {
-    max-width: 380px;
-    width: 22em;
-    height: 13em;
-  }
-
-  &__content {
-    border: 1px solid white;
-    position: relative;
-
-    height: 100%;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-
-    .empty-message,
-    .no-img {
-      position: absolute;
-      left: 0;
-      top: 0;
-
-      display: flex;
-      justify-content: center;
-      align-items: flex-end;
-
-      width: 100%;
-      height: 100%;
-      padding: 0.3em 0;
-    }
-
-    .empty-message {
-      background: rgba(#000, 0.75);
-    }
-  }
-}
-
-.stock-list {
-  flex-grow: 3;
-
-  width: 100%;
-
-  &_buttons {
-    button {
-      font-size: 0.9em;
-      padding: 0.4em 0.5em;
-      margin-bottom: 0.5em;
-    }
-  }
-
-  ul {
-    margin-top: 1em;
-  }
-
-  ul li {
-    outline: none;
-    cursor: pointer;
-
-    &.list-empty {
-      border: 1px solid whitesmoke;
-      padding: 0 0.5em;
-    }
-
-    &:focus .item-content {
-      color: $accentColor;
-    }
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .item-content {
-      /* background: whitesmoke; */
-      color: white;
-      font-weight: 700;
-      margin: 1em 0;
-
-      margin-right: 0.5em;
-
-      /* max-width: 200px; */
-    }
-
-    .item-actions {
-      display: flex;
-      align-items: center;
-
-      .count {
-        display: flex;
-        align-items: center;
-
-        margin-right: 0.5em;
-
-        span {
-          margin: 0 0.5em;
-          /* font-size: 1.25em; */
-
-          color: $accentColor;
-        }
-      }
-
-      img {
-        vertical-align: middle;
-
-        width: 1.3em;
-        height: 1.3em;
-      }
-
-      button {
-        margin: 0 0.25em;
-      }
-    }
-  }
+footer {
+  margin-top: 1.5em;
+  text-align: center;
 }
 
 @media screen and (max-width: 800px) {
@@ -1040,28 +117,6 @@ main {
   header {
     font-size: 0.85em;
   }
-
-  .input {
-    justify-content: center;
-
-    margin: 1em 0;
-
-    &_header {
-      text-align: center;
-    }
-
-    &_radio,
-    &_list,
-    &_checkbox {
-      display: flex;
-      justify-content: center;
-    }
-  }
-}
-
-footer {
-  margin-top: 1.5em;
-  text-align: center;
 }
 
 @media screen and (max-width: 650px) {
diff --git a/src/components/InputsSection.vue b/src/components/InputsSection.vue
new file mode 100644
index 0000000..65a97d8
--- /dev/null
+++ b/src/components/InputsSection.vue
@@ -0,0 +1,420 @@
+<template>
+  <section class="inputs">
+    <div class="input inputs_loco">
+      <div class="input_container">
+        <h2 class="input_header">LOKOMOTYWA / ZESP. TRAKCYJNY</h2>
+        <div class="input_radio">
+          <label v-for="label in locoLabels" :for="label.id" :key="label.id">
+            <input
+              type="radio"
+              name="loco"
+              :id="label.id"
+              :value="label.id"
+              :checked="store.chosenLocoPower == label.id"
+              @change="onLocoPowerChange(label.id)"
+              v-model="store.chosenLocoPower"
+            />
+            <span>{{ label.title }}</span>
+          </label>
+        </div>
+
+        <div class="input_list type">
+          <select
+            id="loco-select"
+            v-model="store.chosenLoco"
+            @change="onLocoTypeChange"
+          >
+            <option :value="null" disabled>Wybierz pojazd z listy</option>
+            <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
+              {{ loco.type }}
+            </option>
+          </select>
+
+          <button @click="addVehicle">
+            <img :src="icons.add" alt="add vehicle" />
+          </button>
+        </div>
+
+        <div class="input_checkbox">
+          <label for="supporter">
+            <input
+              type="checkbox"
+              id="supporter"
+              v-model="store.showSupporter"
+            />
+            <span>Pokaż pojazdy dla supporterów</span>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="input inputs_car"
+      :class="{
+        disabled:
+          store.chosenLocoPower == 'loco-ezt' ||
+          store.chosenLocoPower == 'loco-szt',
+      }"
+    >
+      <div class="input_container">
+        <h2 class="input_header">RODZAJ WAGONU</h2>
+        <div class="input_radio">
+          <label v-for="label in carLabels" :for="label.id" :key="label.id">
+            <input
+              type="radio"
+              name="car"
+              :id="label.id"
+              :checked="store.chosenCarUseType == label.id"
+              :value="label.id"
+              v-model="store.chosenCarUseType"
+              @change="onCarUseTypeChange(label.id)"
+            />
+            <span>{{ label.title }}</span>
+          </label>
+        </div>
+
+        <div class="input_list type">
+          <select
+            id="car-select"
+            v-model="store.chosenCar"
+            @change="onCarTypeChange"
+          >
+            <option :value="null" disabled>Wybierz wagon z listy</option>
+            <option v-for="car in carOptions" :value="car" :key="car.type">
+              {{ car.type }}
+            </option>
+          </select>
+
+          <button @click="addVehicle">
+            <img :src="icons.add" alt="add vehicle" />
+          </button>
+        </div>
+
+        <div class="input_list cargo">
+          <select
+            id="cargo-select"
+            :disabled="
+              (store.chosenCar && !store.chosenCar.loadable) ||
+              (store.chosenCar && store.chosenCar.useType == 'car-passenger') ||
+              !store.chosenCar
+            "
+            v-model="store.chosenCargo"
+          >
+            <option :value="null">brak</option>
+            <option
+              v-for="cargo in store.chosenCar?.cargoList"
+              :value="cargo"
+              :key="cargo.id"
+            >
+              {{ cargo.id }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { ICarWagon, ILocomotive, IStore } from "@/types";
+import { defineComponent, inject } from "vue";
+import { computed } from "@vue/reactivity";
+
+import statsMixin from "@/mixins/StatsMixin";
+
+function isILocomotive(
+  vehicle: ILocomotive | ICarWagon
+): vehicle is ILocomotive {
+  return (vehicle as ILocomotive).power !== undefined;
+}
+
+export default defineComponent({
+  mixins: [statsMixin],
+
+  setup() {
+    const store = inject("Store") as IStore;
+
+    return {
+      store,
+      totalMass: computed(() =>
+        store.stockList.reduce(
+          (acc, stock) =>
+            acc +
+            (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
+          0
+        )
+      ),
+      totalLength: computed(() =>
+        store.stockList.reduce(
+          (acc, stock) => acc + stock.length * stock.count,
+          0
+        )
+      ),
+      maxSpeed: computed(() =>
+        store.stockList.reduce(
+          (acc, stock) =>
+            stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc,
+          0
+        )
+      ),
+    };
+  },
+
+  data: () => ({
+    icons: {
+      add: require("@/assets/add-icon.svg"),
+    },
+    locoLabels: [
+      {
+        id: "loco-e",
+        title: "ELEKTROWÓZ",
+      },
+      {
+        id: "loco-s",
+        title: "SPALINOWÓZ",
+      },
+      {
+        id: "loco-ezt",
+        title: "EZT",
+      },
+      {
+        id: "loco-szt",
+        title: "SZT",
+      },
+    ],
+
+    carLabels: [
+      {
+        id: "car-passenger",
+        title: "PASAŻERSKI",
+      },
+      {
+        id: "car-cargo",
+        title: "TOWAROWY",
+      },
+    ],
+  }),
+
+  computed: {
+    locoOptions() {
+      return this.locoDataList
+        .filter((loco) => loco.power == this.store.chosenLocoPower)
+        .sort((a, b) => (a.type > b.type ? -1 : 1));
+    },
+
+    carOptions() {
+      return this.carDataList
+        .filter((car) => car.useType == this.store.chosenCarUseType)
+        .sort((a, b) => (a.type > b.type ? 1 : -1));
+    },
+  },
+
+  methods: {
+    onLocoPowerChange(inputId: string) {
+      this.store.chosenLoco = null;
+      this.store.imageLoading = false;
+    },
+
+    onCarUseTypeChange(inputId: string) {
+      this.store.chosenCar = null;
+
+      if (inputId == "car-passenger") this.store.chosenCargo = null;
+
+      this.store.imageLoading = false;
+    },
+
+    onCarTypeChange() {
+      this.store.chosenCargo = null;
+      this.store.chosenLoco = null;
+
+      this.store.imageLoading = true;
+    },
+
+    onLocoTypeChange() {
+      this.store.chosenCargo = null;
+      this.store.chosenCar = null;
+
+      this.store.imageLoading = true;
+    },
+
+    addVehicle() {
+      const vehicle = this.store.chosenCar || this.store.chosenLoco;
+
+      if (!vehicle) return;
+
+      if (vehicle.length + this.totalLength > 650) {
+        alert("Maksymalna długość składu to 650m!");
+        return;
+      }
+
+      const previousStock =
+        this.store.stockList.length > 0
+          ? this.store.stockList[this.store.stockList.length - 1]
+          : null;
+
+      if (
+        isILocomotive(vehicle) &&
+        previousStock &&
+        previousStock.type == vehicle.type
+      ) {
+        this.store.stockList[this.store.stockList.length - 1].count++;
+        return;
+      }
+
+      if (
+        !isILocomotive(vehicle) &&
+        previousStock &&
+        previousStock.type == vehicle.type &&
+        previousStock.cargo?.id == this.store.chosenCargo?.id
+      ) {
+        this.store.stockList[this.store.stockList.length - 1].count++;
+
+        return;
+      }
+
+      const stockObj = {
+        type: vehicle.type,
+        length: vehicle.length,
+        mass: vehicle.mass,
+        maxSpeed: vehicle.maxSpeed,
+        isLoco: isILocomotive(vehicle),
+        cargo:
+          !isILocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo
+            ? this.store.chosenCargo
+            : undefined,
+        count: 1,
+        imgSrc: vehicle.imageSrc,
+        useType: isILocomotive(vehicle) ? vehicle.power : vehicle.useType,
+      };
+
+      if (
+        isILocomotive(vehicle) &&
+        this.store.stockList.length > 0 &&
+        !this.store.stockList[0].isLoco
+      )
+        this.store.stockList.unshift(stockObj);
+      else this.store.stockList.push(stockObj);
+    },
+  },
+
+  mounted() {
+    this.onLocoPowerChange("loco-e");
+    this.onCarUseTypeChange("car-passenger");
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/global";
+
+.inputs {
+  display: flex;
+  justify-content: space-between;
+
+  &_car {
+    &.disabled {
+      opacity: 0.75;
+      pointer-events: none;
+    }
+  }
+  
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
+  }
+}
+
+.input {
+  &_header {
+    margin-bottom: 1em;
+  }
+
+  &_radio {
+    label span {
+      padding: 0.25em 0.55em;
+      border: 2px solid white;
+    }
+  }
+
+  &_checkbox {
+    label span {
+      /* padding: 0.25em 0.55em; */
+      /* border: 2px solid white; */
+      color: #aaa;
+
+      &::before {
+        content: "";
+        display: inline-block;
+
+        width: 1.5ex;
+        height: 1.5ex;
+        background: #aaa;
+
+        margin-right: 0.5em;
+      }
+    }
+
+    input:checked + span::before {
+      background-color: $accentColor;
+    }
+  }
+
+  &_radio,
+  &_checkbox {
+    margin: 1em 0;
+
+    label {
+      cursor: pointer;
+      margin-right: 0.5em;
+
+      input {
+        display: none;
+
+        &:checked + span {
+          border-color: $accentColor;
+          color: $accentColor;
+        }
+      }
+    }
+  }
+
+  &_list {
+    margin: 0.5em 0;
+
+    display: flex;
+  }
+
+  &_list button {
+    margin-left: 0.5em;
+
+    &:hover img {
+      border-color: $accentColor;
+    }
+
+    img {
+      border: 2px solid white;
+      padding: 0.25em;
+
+      height: 2.35em;
+
+      vertical-align: middle;
+    }
+  }
+
+  @media screen and (max-width: 800px) {
+    justify-content: center;
+
+    margin: 1em 0;
+
+    &_header {
+      text-align: center;
+    }
+
+    &_radio,
+    &_list,
+    &_checkbox {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ListSection.vue b/src/components/ListSection.vue
new file mode 100644
index 0000000..0eecc9e
--- /dev/null
+++ b/src/components/ListSection.vue
@@ -0,0 +1,438 @@
+<template>
+  <div class="bottom">
+    <section class="image">
+      <div class="image__wrapper">
+        <div class="image__content">
+          <div class="no-img" v-if="!store.chosenCar && !store.chosenLoco">
+            POGLĄD WYBRANEGO POJAZDU
+          </div>
+          <div class="empty-message" v-if="store.imageLoading">
+            ŁADOWANIE OBRAZU...
+          </div>
+          <img
+            v-if="store.chosenLoco && !store.chosenCar"
+            :src="store.chosenLoco.imageSrc"
+            :alt="store.chosenLoco.type"
+            @load="onImageLoad"
+          />
+          <img
+            v-if="store.chosenCar"
+            :src="store.chosenCar.imageSrc"
+            :alt="store.chosenCar.type"
+            @load="onImageLoad"
+          />
+        </div>
+      </div>
+    </section>
+
+    <section class="spacer"></section>
+
+    <section class="stock-list">
+      <div class="stock-list_buttons">
+        <button class="btn btn--copy" @click="downloadStock">
+          POBIERZ SKŁAD
+        </button>
+      </div>
+      <div class="stock-list_specs">
+        Masa: <span class="text--accent">{{ totalMass }}</span> t | Długość:
+        <span class="text--accent">{{ totalLength }}</span>
+        m | Vmax składu:
+        <span class="text--accent">{{ maxSpeed }} </span> km/h
+      </div>
+      <ul>
+        <li v-if="store.stockList.length == 0" class="list-empty">
+          <div class="item-content">Lista pojazdów jest pusta!</div>
+        </li>
+
+        <li
+          v-for="(stock, i) in store.stockList"
+          :key="stock.type + i"
+          :class="{ loco: stock.isLoco }"
+          :data-id="i"
+          tabindex="0"
+          @focus="onListItemFocus(i)"
+          :ref="`item-${i}`"
+        >
+          <div
+            class="item-content"
+            @dragstart="onDragStart(i)"
+            @drop="onDrop($event, i)"
+            @dragover="allowDrop"
+            draggable="true"
+          >
+            <span>
+              {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
+            </span>
+            <span v-if="stock.cargo"> &nbsp; ({{ stock.cargo?.id }}) </span>
+            &nbsp;
+            <span> {{ stock.length }}m</span>
+            &nbsp;
+            <span>{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t</span>
+          </div>
+
+          <div class="item-actions">
+            <div class="count">
+              <button class="action-btn" @click="subStock(i)">
+                <img :src="icons.sub" alt="subtract vehicle count" />
+              </button>
+              <span>{{ stock.count }} </span>
+              <button class="action-btn" @click="addStock(i)">
+                <img :src="icons.add" alt="add vehicle count" />
+              </button>
+            </div>
+            <button class="action-btn" @click="moveUpStock(i)">
+              <img :src="icons.higher" alt="move up vehicle" />
+            </button>
+            <button class="action-btn" @click="moveDownStock(i)">
+              <img :src="icons.lower" alt="move down vehicle" />
+            </button>
+            <button class="action-btn" @click="removeStock(i)">
+              <img :src="icons.remove" alt="remove vehicle" />
+            </button>
+          </div>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from "vue";
+import { IStore } from "@/types";
+
+import { computed } from "@vue/reactivity";
+
+import statsMixin from "@/mixins/StatsMixin";
+
+export default defineComponent({
+  mixins: [statsMixin],
+
+  setup() {
+    const store = inject("Store") as IStore;
+
+    return {
+      store,
+      totalMass: computed(() =>
+        store.stockList.reduce(
+          (acc, stock) =>
+            acc +
+            (stock.cargo ? stock.cargo.totalMass : stock.mass) * stock.count,
+          0
+        )
+      ),
+      totalLength: computed(() =>
+        store.stockList.reduce(
+          (acc, stock) => acc + stock.length * stock.count,
+          0
+        )
+      ),
+      maxSpeed: computed(() =>
+        store.stockList.reduce(
+          (acc, stock) =>
+            stock.maxSpeed < acc || acc == 0 ? stock.maxSpeed : acc,
+          0
+        )
+      ),
+    };
+  },
+
+  data: () => ({
+    icons: {
+      add: require("@/assets/add-icon.svg"),
+      sub: require("@/assets/sub-icon.svg"),
+      remove: require("@/assets/remove-icon.svg"),
+      lower: require("@/assets/lower-icon.svg"),
+      higher: require("@/assets/higher-icon.svg"),
+    },
+
+    draggedVehicleID: -1,
+  }),
+
+  methods: {
+    onListItemFocus(vehicleID: number) {
+      const vehicle = this.store.stockList[vehicleID];
+
+      if (vehicle.isLoco) {
+        this.store.chosenLocoPower = vehicle.useType;
+
+        this.store.chosenLoco =
+          this.locoDataList.find((v) => v.type == vehicle.type) || null;
+
+        this.store.chosenCar = null;
+        this.store.chosenCargo = null;
+
+        // this.store.onLocoPowerChange(vehicle.useType);
+        return;
+      }
+
+      this.store.chosenCarUseType = vehicle.useType;
+
+      this.store.chosenLoco = null;
+      this.store.chosenCar =
+        this.carDataList.find((v) => v.type == vehicle.type) || null;
+      this.store.chosenCargo = vehicle.cargo || null;
+
+      // this.chose = vehicle.useType;
+    },
+
+    getCarSpecFromType(typeStr: string) {
+      const specArray = typeStr.split("_");
+
+      if (specArray.length == 0) return null;
+
+      /* 111a_Grafitti_1 */
+      if (specArray.length == 3)
+        return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
+
+      /* 111a_PKP_Bnouz_01 */
+      return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
+    },
+
+    addStock(index: number) {
+      if (this.store.stockList[index].length + this.totalLength > 650) {
+        alert("Maksymalna długość składu to 650m!");
+        return;
+      }
+
+      this.store.stockList[index].count++;
+    },
+
+    subStock(index: number) {
+      if (this.store.stockList[index].count < 2) return;
+
+      this.store.stockList[index].count--;
+    },
+
+    removeStock(index: number) {
+      this.store.stockList = this.store.stockList.filter(
+        (stock, i) => i != index
+      );
+    },
+
+    moveUpStock(index: number) {
+      if (index < 1) return;
+
+      const tempStock = this.store.stockList[index];
+
+      this.store.stockList[index] = this.store.stockList[index - 1];
+      this.store.stockList[index - 1] = tempStock;
+    },
+
+    moveDownStock(index: number) {
+      if (index > this.store.stockList.length - 2) return;
+
+      const tempStock = this.store.stockList[index];
+
+      this.store.stockList[index] = this.store.stockList[index + 1];
+      this.store.stockList[index + 1] = tempStock;
+    },
+
+    downloadStock() {
+      const fileName = prompt("Nazwij plik:", "sklad");
+
+      if (!fileName) return;
+
+      const stockString = this.store.stockList
+        .map((stock) => {
+          let s =
+            stock.isLoco || !stock.cargo
+              ? stock.type
+              : `${stock.type}:${stock.cargo.id}`;
+
+          let final = s;
+          for (let i = 0; i < stock.count - 1; i++) final += `;${s}`;
+
+          return final;
+        })
+        .join(";");
+
+      const blob = new Blob([stockString]);
+      const file = fileName + ".con";
+
+      var e = document.createEvent("MouseEvents"),
+        a = document.createElement("a");
+      a.download = file;
+      a.href = window.URL.createObjectURL(blob);
+      a.dataset.downloadurl = ["", a.download, a.href].join(":");
+      e.initEvent("click", true, false);
+      a.dispatchEvent(e);
+    },
+
+    onDragStart(vehicleIndex: number) {
+      this.draggedVehicleID = vehicleIndex;
+    },
+
+    onDrop(e: DragEvent, vehicleIndex: number) {
+      e.preventDefault();
+
+      let targetEl: Element | null = this.$refs[
+        `item-${vehicleIndex}`
+      ] as Element;
+
+      if (!targetEl) return;
+
+      const dataID = targetEl.attributes.getNamedItem("data-id")?.textContent;
+
+      if (!dataID) return;
+
+      const tempVehicle = this.store.stockList[Number(dataID)];
+
+      this.store.stockList[Number(dataID)] =
+        this.store.stockList[this.draggedVehicleID];
+      this.store.stockList[this.draggedVehicleID] = tempVehicle;
+    },
+
+    allowDrop(e: DragEvent) {
+      e.preventDefault();
+    },
+
+    onImageLoad(ev: Event) {
+      this.store.imageLoading = false;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/global";
+
+.bottom {
+  display: flex;
+  justify-content: space-between;
+
+  margin-top: 2.5em;
+
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
+    align-items: center;
+
+    .image {
+      display: flex;
+      padding: 0 0 2em 0;
+    }
+  }
+}
+
+.spacer {
+  flex: 2 1 10%;
+}
+
+.image {
+  flex-grow: 2;
+  padding: 0 1em 0 0;
+
+  &__wrapper {
+    max-width: 380px;
+    width: 22em;
+    height: 13em;
+  }
+
+  &__content {
+    border: 1px solid white;
+    position: relative;
+
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .empty-message,
+    .no-img {
+      position: absolute;
+      left: 0;
+      top: 0;
+
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+
+      width: 100%;
+      height: 100%;
+      padding: 0.3em 0;
+    }
+
+    .empty-message {
+      background: rgba(#000, 0.75);
+    }
+  }
+}
+
+.stock-list {
+  flex-grow: 3;
+
+  width: 100%;
+
+  &_buttons {
+    button {
+      font-size: 0.9em;
+      padding: 0.4em 0.5em;
+      margin-bottom: 0.5em;
+    }
+  }
+
+  ul {
+    margin-top: 1em;
+  }
+
+  ul li {
+    outline: none;
+    cursor: pointer;
+
+    &.list-empty {
+      border: 1px solid whitesmoke;
+      padding: 0 0.5em;
+    }
+
+    &:focus .item-content {
+      color: $accentColor;
+    }
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .item-content {
+      /* background: whitesmoke; */
+      color: white;
+      font-weight: 700;
+      margin: 1em 0;
+
+      margin-right: 0.5em;
+
+      /* max-width: 200px; */
+    }
+
+    .item-actions {
+      display: flex;
+      align-items: center;
+
+      .count {
+        display: flex;
+        align-items: center;
+
+        margin-right: 0.5em;
+
+        span {
+          margin: 0 0.5em;
+          /* font-size: 1.25em; */
+
+          color: $accentColor;
+        }
+      }
+
+      img {
+        vertical-align: middle;
+
+        width: 1.3em;
+        height: 1.3em;
+      }
+
+      button {
+        margin: 0 0.25em;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index b670de8..1e573fb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,24 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 
-createApp(App).mount("#app");
+import { ICargo, ICarWagon, ILocomotive, IStock, IStore } from "./types";
+import { reactive } from "@vue/reactivity";
+
+const Store: IStore = reactive({
+    chosenCar: null as ICarWagon | null,
+    chosenLoco: null as ILocomotive | null,
+    chosenCargo: null as ICargo | null,
+
+    showSupporter: false,
+    imageLoading: false,
+
+    chosenLocoPower: "loco-e",
+    chosenCarUseType: "car-passenger",
+
+    stockList: [] as IStock[],
+    cargoOptions: [] as any[][],
+})
+
+createApp(App)
+    .provide('Store', Store)
+    .mount("#app");
diff --git a/src/mixins/StatsMixin.ts b/src/mixins/StatsMixin.ts
new file mode 100644
index 0000000..c1b27b6
--- /dev/null
+++ b/src/mixins/StatsMixin.ts
@@ -0,0 +1,147 @@
+import { IVehicleData, ILocomotive, ICarWagon, IStore } from "@/types";
+import { defineComponent, inject } from "@vue/runtime-core";
+import { computed } from "@vue/reactivity";
+
+import vehicleDataJSON from "@/data/vehicleData.json";
+import vehiclePropsJSON from "@/data/vehicleProps.json";
+
+export default defineComponent({
+
+    setup() {
+        return {
+            store: inject("Store") as IStore
+        }
+    },
+
+    computed: {
+        locoDataList() {
+            return Object.keys(vehicleDataJSON).reduce(
+                (acc, vehicleTypeKey) => {
+                    if (!vehicleTypeKey.startsWith("loco")) return acc;
+
+                    const locoVehiclesData = (vehicleDataJSON as IVehicleData)[
+                        vehicleTypeKey
+                    ];
+
+                    locoVehiclesData.forEach((loco) => {
+                        if (loco[4] && !this.store.showSupporter) return;
+
+                        const locoType = loco[0] as string;
+
+                        let length = 0,
+                            mass = 0;
+
+                        // Elektrowozy
+                        if (vehicleTypeKey.startsWith("loco-e")) {
+                            // 32m dla ET41, reszta 16
+                            length = locoType.startsWith("ET") ? 32 : 16;
+
+                            // 80t dla wszystkich EU06, EP08
+                            mass = 80;
+
+                            // 83t dla: EU07 o nr większych niż 300 & dla wszystkich EP07 oprócz nr 135,242,1002,1048
+                            const locoNumber = Number(locoType.split("-")[1]);
+
+                            if (
+                                (locoType.startsWith("EU") && locoNumber > 300) ||
+                                (locoType.startsWith("EP") &&
+                                    ![242, 135, 1002, 1048].includes(locoNumber))
+                            ) {
+                                mass = 83;
+                            }
+                        }
+
+                        // Spalinowozy
+                        if (vehicleTypeKey.startsWith("loco-s")) {
+                            length = 14;
+                            mass = 74;
+                        }
+
+                        // EZT
+                        if (vehicleTypeKey.startsWith("loco-ezt")) {
+                            // EN57
+                            length = 65;
+                            mass = 126;
+
+                            // EN71
+                            if (locoType.startsWith("EN71")) {
+                                length = 86;
+                                mass = 182;
+                            }
+
+                            // 2xEN57
+                            if (locoType.startsWith("2EN57")) {
+                                length = 130;
+                                mass = 253;
+                            }
+                        }
+
+                        // SZT
+                        if (vehicleTypeKey.startsWith("loco-szt")) {
+                            length = 14;
+                            mass = 23;
+                        }
+
+                        acc.push({
+                            power: vehicleTypeKey,
+                            type: loco[0] as string,
+                            constructionType: loco[1] as string,
+                            cabinType: loco[2] as string,
+                            maxSpeed: Number(loco[3] as string),
+                            supportersOnly: loco[4] as boolean,
+                            imageSrc: loco[5] as string,
+
+                            length,
+                            mass,
+                        });
+                    });
+
+                    return acc;
+                },
+                [] as ILocomotive[]
+            );
+
+        },
+
+        carDataList() {
+            return Object.keys(vehicleDataJSON).reduce(
+                (acc, vehicleTypeKey) => {
+                    if (!vehicleTypeKey.startsWith("car")) return acc;
+
+                    const carVehiclesData = (vehicleDataJSON as IVehicleData)[
+                        vehicleTypeKey
+                    ];
+
+                    carVehiclesData.forEach((car) => {
+                        if (car[3] && !this.store.showSupporter) return;
+
+                        const carPropsData = vehiclePropsJSON.find((v) =>
+                            car[0].toString().includes(v.type)
+                        );
+
+                        acc.push({
+                            useType: vehicleTypeKey,
+                            type: car[0] as string,
+                            constructionType: car[1] as string,
+                            loadable: car[2] as boolean,
+                            supportersOnly: car[3] as boolean,
+                            maxSpeed: Number(car[4] as string),
+                            imageSrc: car[5] as string,
+                            cargoList:
+                                carPropsData?.cargo.split(";").map((cargo) => ({
+                                    id: cargo.split(":")[0],
+                                    totalMass: Number(cargo.split(":")[1]),
+                                })) || [],
+
+                            mass: carPropsData?.mass || 0,
+                            length: carPropsData?.length || 0,
+                        });
+                    });
+
+                    return acc;
+                },
+                [] as ICarWagon[]
+            );
+        },
+    }
+});
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..5ec2211
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,63 @@
+export interface IStore {
+  chosenCar: ICarWagon | null;
+  chosenLoco: ILocomotive | null;
+  chosenCargo: ICargo | null;
+
+  showSupporter: boolean;
+  imageLoading: boolean;
+
+  chosenLocoPower: string;
+  chosenCarUseType: string;
+
+  stockList: IStock[];
+  cargoOptions: any[][];
+}
+
+export interface IVehicleData {
+  [key: string]: (string | boolean)[][];
+}
+
+export interface ILocomotive {
+  type: string;
+  power: string;
+  constructionType: string;
+  cabinType: string;
+  maxSpeed: number;
+  supportersOnly: boolean;
+  imageSrc: string;
+
+  mass: number;
+  length: number;
+}
+
+export interface ICarWagon {
+  //"203V_PKPC_Fll_01","203V",true,false,"100",img
+  type: string;
+  useType: string;
+  constructionType: string;
+  loadable: boolean;
+  supportersOnly: boolean;
+  maxSpeed: number;
+  imageSrc: string;
+
+  mass: number;
+  length: number;
+  cargoList: { id: string; totalMass: number }[];
+}
+
+export interface ICargo {
+  id: string;
+  totalMass: number;
+}
+
+export interface IStock {
+  useType: string;
+  type: string;
+  length: number;
+  mass: number;
+  maxSpeed: number;
+  cargo?: { id: string; totalMass: number };
+  isLoco: boolean;
+  count: number;
+  imgSrc: string;
+}
\ No newline at end of file