Dodano modal o dotacji

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app" ref="test">
+  <div class="app">
     <div class="app_container">
       <header class="app_header">
         <div class="header_body">
@@ -51,9 +51,12 @@ import { Action, Getter } from "vuex-class";
 import { mapGetters, mapActions } from "vuex";
 
 import Clock from "@/components/App/Clock.vue";
+import Modal from "@/components/Global/Modal.vue";
+
+import axios from "axios";
 
 @Component({
-  components: { Clock },
+  components: { Clock, Modal },
 })
 export default class App extends Vue {
   @Action("synchronizeData") synchronizeData;
@@ -64,10 +67,10 @@ export default class App extends Vue {
   async mounted() {
     this.synchronizeData();
 
-    // const data = await (
+    const data = await (
-    //   await axios.get("https://stacjownik.herokuapp.com/api/getStationList")
+      await axios.get("http://stacjownik.eu-central-1.elasticbeanstalk.com")
-    // ).data;
+    ).data;
-    // console.log(data);
+    console.log(data);
   }
 }
 </script>

src/assets/icon-dolar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/></svg>

src/components/Global/DonationModal.vue

@@ -0,0 +1,180 @@
+<template>
+  <transition name="modal-anim">
+    <div class="modal" v-if="!modalHidden">
+      <div class="modal_content">
+        <span class="modal_title">Grosza daj Stacjownikowi...</span>
+        <div class="modal_body">
+          <div class="modal_body-header">
+            Stacjownik to projekt całkowicie darmowy dla wszystkich.
+            Jednak jeśli chcesz go wesprzeć i pomóc w rozwoju strony oraz nowych funkcjonalności, które wykraczają poza darmowe możliwości
+            hostingu, na którym jest postawiony, zostaw złotówkę, nowigradzką koronę czy nawet rubla!
+          </div>
+
+          <div class="modal_payments">
+            <div>Płatności dokonasz korzystając z poniższych metod:</div>
+            <div class="payment">
+              <div>
+                <a target="_blank" href="https://paypal.me/spythere">
+                  <img :src="paypalIcon" alt="icon-paypal" />
+                  <span>PAYPAL</span>
+                </a>
+              </div>
+            </div>
+
+            <div class="payment">
+              <div>
+                <div class="payment_open" v-if="showNumber">94 1140 2004 0000 3502 7784 9203</div>
+                <div class="payment_closed" v-else @click="showNumber = true">
+                  <b>PRZELEW NA KONTO</b>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>Wielkie dzięki i do zobaczenia na szlaku!</div>
+
+          <div class="modal_buttons">
+            <button class="button" @click="toggleModal">PRZYJĄŁEM!</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+import StorageManager from "@/scripts/storageManager";
+
+@Component
+export default class Modal extends Vue {
+  @Prop() modalHidden!: boolean;
+
+  showNumber = false;
+  STORAGE_ID = "modal_donation";
+
+  paypalIcon: string = require("@/assets/icon-paypal.svg");
+
+  toggleModal(type: string) {
+    this.$emit("toggleModal");
+
+    // if (type == "permament") {
+    //   StorageManager.setBooleanValue(`${this.STORAGE_ID}_next`, true);
+    //   this.modalHidden = true;
+    // }
+  }
+
+  initStorage() {
+    // if (StorageManager.isRegistered(`${this.STORAGE_ID}_hide`))
+    //   this.modalHidden = StorageManager.getBooleanValue(
+    //     `${this.STORAGE_ID}_hide`
+    //   );
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive";
+
+.modal {
+  z-index: 100;
+
+  font-size: calc(1rem + 0.8vw);
+  padding: 0.3rem;
+
+  border-radius: 1em;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+
+  width: 65%;
+  max-width: 950px;
+
+  transform: translate(-50%, -50%);
+
+  background: rgba(black, 0.85);
+  color: white;
+
+  @include bigScreen() {
+    font-size: 2rem;
+  }
+
+  @include smallScreen() {
+    font-size: 1.2rem;
+    width: 95%;
+  }
+
+  &_content {
+    margin: 0 auto;
+    text-align: center;
+
+    padding: 0.5em;
+  }
+
+  &_title {
+    color: gold;
+    font-weight: bold;
+  }
+
+  &_body {
+    font-size: 0.75em;
+
+    &-header {
+      text-align: justify;
+    }
+
+    > div {
+      margin-top: 0.5em;
+    }
+  }
+
+  &_payments {
+    > span {
+      margin-right: 0.5em;
+    }
+
+    .payment {
+      display: flex;
+      justify-content: center;
+
+      margin-top: 0.3em;
+
+      &_closed {
+        cursor: pointer;
+
+        &:hover {
+          color: gold;
+        }
+      }
+
+      a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        border-radius: 0.2em;
+        padding: 0.15em 0.3em;
+
+        font-size: 1.1em;
+        font-weight: bold;
+      }
+
+      img {
+        width: 1.2em;
+        margin-right: 0.2em;
+      }
+    }
+  }
+
+  &_buttons {
+    display: flex;
+    justify-content: center;
+
+    > button {
+      margin: 0 0.5em;
+    }
+  }
+}
+</style>

src/components/Global/Modal.vue

@@ -1,13 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class Modal extends Vue {}
-</script>
-
-<style scoped>
-</style>

src/main.ts

@@ -1,12 +1,12 @@
-import Vue from 'vue'
+import Vue from 'vue';
-import App from './App.vue'
+import App from './App.vue';
-import router from './router'
+import router from './router';
-import store from './store'
+import store from './store';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
-  render: h => h(App)
+  render: h => h(App),
-}).$mount('#app')
+}).$mount('#app');

src/views/StationsView.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="stations_view">
+    <DonationModal :modalHidden="modalHidden" @toggleModal="toggleModal" />
+
     <div class="stations_wrapper">
       <div class="stations_body">
         <div class="body_bar">
@@ -12,6 +14,12 @@
               <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
               <p>FILTRY</p>
             </button>
+
+            <button class="action-btn" @click="toggleModal">
+              <img :src="dolarIcon" alt="icon-dolar" />
+
+              <p>WESPRZYJ</p>
+            </button>
           </div>
 
           <div class="bar_indicators">
@@ -79,23 +87,29 @@ import StationTable from "@/components/StationsView/StationTable.vue";
 import StationCard from "@/components/StationsView/StationCard.vue";
 import FilterCard from "@/components/StationsView/FilterCard.vue";
 
+import DonationModal from "@/components/Global/DonationModal.vue";
+
 @Component({
   components: {
     StationCard,
     StationTable,
     FilterCard,
+    DonationModal,
   },
 })
 export default class StationsView extends Vue {
   STORAGE_KEY: string = "options_saved";
+  STORAGE_MODAL: string = "modal";
 
   trainIcon: string = require("@/assets/icon-train.svg");
   timetableIcon: string = require("@/assets/icon-timetable.svg");
+  dolarIcon: string = require("@/assets/icon-dolar.svg");
 
   filterManager: StationFilterManager = new StationFilterManager();
 
   focusedStationName: string = "";
   filterCardOpen: boolean = false;
+  modalHidden: boolean = false;
 
   inputs = inputData;
 
@@ -116,7 +130,18 @@ export default class StationsView extends Vue {
     return "success";
   }
 
-  initializeStorage() {
+  mounted() {
+    this.initializeOptionsStorage();
+    this.initializeModalStorage();
+
+    window.addEventListener("keydown", (e: KeyboardEvent) => {
+      if (e.keyCode == 27 && this.focusedStationName != "") {
+        this.focusedStationName = "";
+      }
+    });
+  }
+
+  initializeOptionsStorage() {
     if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
 
     this.inputs.options.forEach((option) => {
@@ -134,14 +159,20 @@ export default class StationsView extends Vue {
     });
   }
 
-  mounted() {
+  initializeModalStorage() {
-    this.initializeStorage();
+    if (StorageManager.isRegistered(`${this.STORAGE_MODAL}_hidden`))
-
+      this.modalHidden = StorageManager.getBooleanValue(
-    window.addEventListener("keydown", (e: KeyboardEvent) => {
+        `${this.STORAGE_MODAL}_hidden`
-      if (e.keyCode == 27 && this.focusedStationName != "") {
+      );
-        this.focusedStationName = "";
   }
-    });
+
+  toggleModal() {
+    this.modalHidden = !this.modalHidden;
+
+    StorageManager.setBooleanValue(
+      `${this.STORAGE_MODAL}_hidden`,
+      this.modalHidden
+    );
   }
 
   toggleCardsState(name: string): void {
@@ -237,6 +268,14 @@ export default class StationsView extends Vue {
   }
 }
 
+.bar_actions {
+  display: flex;
+
+  button {
+    margin-right: 0.5em;
+  }
+}
+
 .bar_indicators {
   display: flex;
   align-items: flex-end;