Restrukturyzacja kodu

src/components/App/Clock.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="clock">{{ formattedDate }}</div>
+</template>
+
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  name: "clock",
+  data: () => ({
+    timestamp: Date.now(),
+  }),
+  computed: {
+    formattedDate() {
+      return new Date(this.timestamp).toLocaleString("pl-PL", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
+    },
+  },
+  mounted() {
+    setInterval(() => (this.timestamp = Date.now()), 1000);
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+
+.clock {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include smallScreen() {
+    font-size: 0.65rem;
+  }
+}
+</style>

src/components/App/Error.vue

@@ -0,0 +1,46 @@
+
+<template>
+  <div class="error">
+    <img src="@/assets/icon-error.svg" alt="Error" />
+    <div>Mechaniku, brak przejazdu!</div>
+    <div class="error-message">{{ error }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["error"],
+};
+</script>
+
+<style lang="scss" scoped>
+.error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  text-align: center;
+
+  font-size: calc(1rem + 1.5vw);
+  font-weight: 550;
+
+  color: #ff1919;
+
+  img {
+    margin-bottom: 1rem;
+    width: 200px;
+  }
+
+  &-message {
+    font-size: 0.6em;
+  }
+}
+</style>

src/components/App/Loading.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="loading">{{message}}</div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+@Component
+export default class Loading extends Vue {
+  @Prop() readonly message!: string;
+}
+</script>
+
+<style lang="scss" scoped>
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  min-height: 100%;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  font-size: calc(0.75rem + 1vw);
+
+  color: #fdc62f;
+}
+</style>

src/components/App/UpdatesCard.vue

@@ -0,0 +1,36 @@
+<template>
+  <section class="updates card" v-if="cardOpen">
+    <h2>Ostatnie aktualizacje w Stacjowniku</h2>
+    <p>Tutaj będą pojawiać się informacje o kolejnych nowościach na stronie :)</p>
+
+    <ul>
+      <li v-for="(update, i) in updates" :key="i">
+        <div>{{update.date}}</div>
+
+        <div>
+          <span v-for="(line, l) in content" :key="l">{{line}}</span>
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      updates: {
+        date: "08/08/20",
+        content: [
+          "Lekko odświeżono wygląd strony, dodano nowy widok z pociągami online",
+          "Dodano animacje zmieniania widoków (zakładek)",
+          "Dodano przycisk zamykający kartę z filtrami",
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>