Next Big Update

gabenparadise/src/App.vue

@@ -1,16 +1,18 @@
 <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>
+    <div v-cloak>
       <GamesList />
     </div>
+  </div>
 </template>
 
 <style>
@@ -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,20 +25,25 @@
 </template>
 
 <style>
-  .item {
+.spinner-border {
+  width: 3rem;
+  height: 3rem;
+}
+
+.item {
   height: 100%;
   background: #222;
   border-radius: 10px;
-  }
+}
 
-  .item-image {
+.item-image {
   display: block;
   padding-bottom: 60%;
   /* 60% sirky */
   position: relative;
-  }
+}
 
-  .item-image-main {
+.item-image-main {
   border-radius: 10px 10px 0 0;
   width: 100%;
   height: 100%;
@@ -44,52 +51,56 @@
   left: 0;
   top: 0;
   object-fit: cover;
-  }
+}
 
-  .item-image-icon {
+.item-image-icon {
   position: absolute;
   left: 10px;
   top: 10px;
   width: 30px;
   height: auto;
-  }
+}
 
-  .item-details {
+.item-details {
   padding: 10px;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  }
+}
 
-  .item-counts {
+.item-counts {
   border: 1px solid green;
   color: green;
   padding: 4px;
   font-size: 12px;
   font-weight: 600;
-  }
+}
 </style>
 
 <script>
-  import axios from "axios";
-  export default {
+import axios from "axios";
+
+export default {
   data() {
     return {
+      isLoaded: true,
       games: []
     };
   },
-    async created() {
-      try {
-        var res = async axios.get(
-          "https://api.gabenparadise.com/api/data",
-          { crossdomain: true }
-        );
-        this.games = res.data;
-      } catch (e) {
-        console.error(e);
-      } finally {
-        console.error('finally');
+  created() {
+    this.getGames();
+  },
+  methods: {
+    getGames() {
+      this.isLoaded = false;
+      axios.get("https://api.gabenparadise.com/api/data").then(response => {
+        console.log(response);
+        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 }));
-            
-            axios.post('https://dev.steelants.cz/vasek/gabenparadise/api/subscribe', { 
+            //FIX: New URL
+            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);