Next Big Update

gabenparadise/src/App.vue

@@ -1,15 +1,17 @@
 <template>
   <div id="app">
     <div class="header-top">
-      <div class="">
+      <div class>
         <h1 class="display-4">{{ title }}</h1>
         <p class="lead">{{ content }}</p>
       </div>
-      <div class="">
+      <div class>
         <i id="sub-identifi" class="fa fa-bell-o bell" aria-hidden="true"></i>
       </div>
     </div>
-     <GamesList />
+    <div v-cloak>
+      <GamesList />
+    </div>
   </div>
 </template>
 
@@ -24,7 +26,7 @@ body {
   align-items: space-between;
 }
 
-.bell{
+.bell {
   font-size: 2.5rem;
   font-weight: 300;
   line-height: 2;

gabenparadise/src/components/GamesList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row">
+  <div class="row" v-if="isLoaded">
     <div class="col-sm-6 col-md-4 mb-5" v-for="game of games" v-bind:key="game.name">
       <a :href="game.url">
         <div class="item">
@@ -16,6 +16,8 @@
         </div>
       </a>
     </div>
+  </div>
+  <div class="d-flex justify-content-center" v-else>
     <div class="spinner-border" role="status">
       <span class="sr-only">Loading...</span>
     </div>
@@ -23,73 +25,82 @@
 </template>
 
 <style>
-  .item {
+.spinner-border {
-    height: 100%;
+  width: 3rem;
-    background: #222;
+  height: 3rem;
-    border-radius: 10px;
+}
-  }
 
-  .item-image {
+.item {
-    display: block;
+  height: 100%;
-    padding-bottom: 60%;
+  background: #222;
-    /* 60% sirky */
+  border-radius: 10px;
-    position: relative;
+}
-  }
 
-  .item-image-main {
+.item-image {
-    border-radius: 10px 10px 0 0;
+  display: block;
-    width: 100%;
+  padding-bottom: 60%;
-    height: 100%;
+  /* 60% sirky */
-    position: absolute;
+  position: relative;
-    left: 0;
+}
-    top: 0;
-    object-fit: cover;
-  }
 
-  .item-image-icon {
+.item-image-main {
-    position: absolute;
+  border-radius: 10px 10px 0 0;
-    left: 10px;
+  width: 100%;
-    top: 10px;
+  height: 100%;
-    width: 30px;
+  position: absolute;
-    height: auto;
+  left: 0;
-  }
+  top: 0;
+  object-fit: cover;
+}
 
-  .item-details {
+.item-image-icon {
-    padding: 10px;
+  position: absolute;
-    display: flex;
+  left: 10px;
-    align-items: flex-start;
+  top: 10px;
-    justify-content: space-between;
+  width: 30px;
-  }
+  height: auto;
+}
 
-  .item-counts {
+.item-details {
-    border: 1px solid green;
+  padding: 10px;
-    color: green;
+  display: flex;
-    padding: 4px;
+  align-items: flex-start;
-    font-size: 12px;
+  justify-content: space-between;
-    font-weight: 600;
+}
-  }
+
+.item-counts {
+  border: 1px solid green;
+  color: green;
+  padding: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
 </style>
 
 <script>
-  import axios from "axios";
+import axios from "axios";
-  export default {
+
-    data() {
+export default {
-      return {
+  data() {
-        games: []
+    return {
-      };
+      isLoaded: true,
-    },
+      games: []
-    async created() {
+    };
-      try {
+  },
-        var res = async axios.get(
+  created() {
-          "https://api.gabenparadise.com/api/data",
+    this.getGames();
-          { crossdomain: true }
+  },
-        );
+  methods: {
-        this.games = res.data;
+    getGames() {
-      } catch (e) {
+      this.isLoaded = false;
-        console.error(e);
+      axios.get("https://api.gabenparadise.com/api/data").then(response => {
-      } finally {
+        console.log(response);
-        console.error('finally');
+        if (response.status === 200) {
-      }
+          this.isLoaded = true;
+          this.games = response.data;
+        }
+      });
     }
-  };
+  }
+};
 </script>

gabenparadise/src/registerServiceWorker.js

@@ -44,8 +44,8 @@ if (process.env.NODE_ENV === "production") {
           messaging.getToken().then(function (token) {
             console.log("Token: ", token)
             console.log(JSON.stringify({ "token": token }));
-            
+            //FIX: New URL
-            axios.post('https://dev.steelants.cz/vasek/gabenparadise/api/subscribe', { 
+            axios.post('https://api.gabenparadise.com/subscribe', { 
               "token" : token
             }, {
               headers: {

gabenparadise/src/service-worker.js

@@ -1,10 +1,10 @@
-self.__precacheManifest = [].concat(self.__precacheManifest || []);
+/*self.__precacheManifest = [].concat(self.__precacheManifest || []);*/
 
 // workbox.setConfig({
 //     debug: true
 // });
 
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+//workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
 
 self.addEventListener("push", function (event) {
     console.log('Received a push message', event);