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>

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,6 +25,11 @@
 </template>
 
 <style>
+.spinner-border {
+  width: 3rem;
+  height: 3rem;
+}
+
 .item {
   height: 100%;
   background: #222;
@@ -72,23 +79,27 @@
 
 <script>
 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;
+        }
+      });
     }
   }
 };

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);