Client Fixes (#9026)

* loading screen

* debug yesterdailies modal

website/client/app.vue

@@ -3,9 +3,7 @@
   snackbars
   router-view(v-if="!isUserLoggedIn || isStaticPage")
   template(v-else)
-    #loading-screen.h-100.w-100.d-flex.justify-content-center.align-items-center(v-if="!isUserLoaded")
-      p Loading...
-    template(v-else)
+    template(v-if="isUserLoaded")
       notifications-display
       app-menu
       .container-fluid
@@ -52,6 +50,10 @@
   .container-fluid {
     overflow-x: hidden;
   }
+
+  #app {
+    height: calc(100% - 56px); /* 56px is the menu */
+  }
 </style>
 
 <style>
@@ -161,6 +163,9 @@ export default {
         this.isUserLoaded = true;
         Analytics.setUser();
         Analytics.updateUser();
+
+        const loadingScreen = document.getElementById('loading-screen');
+        document.body.removeChild(loadingScreen);
       }).catch((err) => {
         console.error('Impossible to fetch user. Clean up localStorage and refresh.', err); // eslint-disable-line no-console
       });

website/client/assets/scss/index.scss

@@ -10,6 +10,7 @@
 
 // Generic components
 @import './page';
+@import './loading-screen';
 
 // Global styles
 @import './typography';

website/client/assets/scss/loading-screen.scss

@@ -0,0 +1,34 @@
+#loading-screen {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: $purple-100;
+  color: $white;
+
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+@keyframes fadeColor {
+  0% {
+    opacity: 0.48;
+  }
+  50% {
+    opacity: 1.0;
+  }
+  100% {
+    opacity: 0.48;
+  }
+}
+
+#melior {
+  animation: fadeColor 2.4s infinite;
+  height: 4rem;
+  margin-left: -1rem;
+}

website/client/assets/scss/page.scss

@@ -1,5 +1,5 @@
 html, body {
-  height: calc(100% - 56px); // 56px is the menu
+  height: 100%;
 }
 
 body {

website/client/components/notifications.vue

@@ -230,6 +230,8 @@ export default {
       this.$root.$emit('show::modal', 'quest-invitation');
     },
   },
+
+  /* eslint-disable no-console */
   mounted () {
     Promise.all([
       this.$store.dispatch('user:fetch'),
@@ -251,6 +253,7 @@ export default {
         this.goto('intro', 0);
       }, 2000);
 
+      console.log('before first yesterDailies run, current time:', (new Date()).toString());
       this.runYesterDailies();
     });
   },
@@ -259,31 +262,48 @@ export default {
       this.$root.$emit('playSound', sound);
     },
     scheduleNextCron () {
+      console.log('scheduling next cron (scheduleNextCron fn), current time:', (new Date()).toString());
       // Open yesterdailies modal the next time cron runs
       const dayStart = this.user.preferences.dayStart;
       let nextCron = moment().hours(dayStart).minutes(0).seconds(0).milliseconds(0);
 
+      console.log(
+        'scheduling next cron, current time:', (new Date()).toString(),
+        'dayStart', dayStart,
+        'nextCron (base)', (new Date(nextCron.toDate())).toString());
+
       const currentHour = moment().format('H');
       if (currentHour >= dayStart) {
         nextCron = nextCron.add(1, 'day');
       }
 
+      console.log('next cron after edit', nextCron.toDate());
+
       // Setup a listener that executes 10 seconds after the next cron time
       const nextCronIn = Number(nextCron.format('x')) - Date.now() + 10 * 1000;
+
+      console.log('next cron in', nextCronIn);
+
       setInterval(async () => {
+        console.log('next cron timer fired, current time:', new Date(), 'syncing...');
         // Sync the user before showing the modal
         await Promise.all([
           this.$store.dispatch('user:fetch', {forceLoad: true}),
           this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true}),
         ]);
 
+        console.log('next timer after syncing, running yesterDailies, current time:', (new Date()).toString());
+
         this.runYesterDailies();
       }, nextCronIn);
     },
     async runYesterDailies () {
+      console.log('running yesterdailies at, current time:', new Date(), 'needsCron:', this.user.needsCron);
+      console.log('isRunningYesterdailies:', this.isRunningYesterdailies, (new Date()).toString());
       // @TODO: Hopefully we don't need this even we load correctly
       if (this.isRunningYesterdailies) return;
       if (!this.user.needsCron) {
+        console.log('cron not needed, scheduling, current time:', (new Date()).toString());
         this.handleUserNotifications(this.user.notifications);
         this.scheduleNextCron();
         return;
@@ -291,6 +311,7 @@ export default {
 
       let dailys = this.$store.state.tasks.data.dailys;
       this.isRunningYesterdailies = true;
+      console.log('running yesterdailies (real part), current time:', (new Date()).toString());
 
       let yesterDay = moment().subtract('1', 'day').startOf('day').add({
         hours: this.user.preferences.dayStart,
@@ -303,30 +324,42 @@ export default {
         if (task.yesterDaily && due) this.yesterDailies.push(task);
       });
 
+      console.log('yesterDailies to do', this.yesterDailies.length);
+
       if (this.yesterDailies.length === 0) {
+        console.log('no yesterDailies, scheduling cron, current time:', (new Date()).toString());
         this.runYesterDailiesAction();
         return;
       }
 
+      console.log('showing yesterDailies modal, current time:', (new Date()).toString());
+
       this.$root.$emit('show::modal', 'yesterdaily');
     },
     async runYesterDailiesAction () {
+      console.log('yesterDailies action, current time:', (new Date()).toString());
       // Run Cron
       await axios.post('/api/v3/cron');
+      console.log('after /cron call, current time:', (new Date()).toString());
 
       // Notifications
 
       // Sync
       // @TODO add a loading spinner somewhere
+      console.log('syncing user after cron, current time:', (new Date()).toString());
       await Promise.all([
         this.$store.dispatch('user:fetch', {forceLoad: true}),
         this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true}),
       ]);
+      console.log('synced user after cron, current time:', (new Date()).toString());
 
       this.handleUserNotifications(this.user.notifications);
+      console.log('scheduling next cron after runYesterDailiesAction, current time:', (new Date()).toString());
       this.isRunningYesterdailies = false;
       this.scheduleNextCron();
     },
+    /* eslint-enable no-console */
+
     transferGroupNotification (notification) {
       if (!this.user.groupNotifications) this.user.groupNotifications = [];
       this.user.groupNotifications.push(notification);

website/client/index.html

@@ -7,6 +7,13 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i|Roboto:400,400i,700,700i" rel="stylesheet">
   </head>
   <body>
+    <div id="loading-screen">
+      <!-- Loading Screen logo, inlined to avoid flashing of content -->
+      <svg id="melior" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.91 64">
+        <path d="M61.82,64H51.59c-3.08,0-3.72.37-3.67-1,0.07-1.87.67-1.94,2.63-2.49,1.63-.45,1-3.35-0.8-5.88-1.28-1.76-3.89-3.81-7.31-2.22a10.75,10.75,0,0,0-4.56,3.52c-1.68,2.33-1.59,4.54,1,4.54s5.39-1.5,6.23.64c1,2.64.33,2.89-.18,2.89H28.55v0C19.77,64,11,63.93,9,58.38c-2.82-7.68,7.43-10.64,7.75-15.46,0.13-2-1-2.85-2.34-2.85h-6V36.41H4.7v-11H8.36V29.1H12v3.65h3.65v5.08a5.76,5.76,0,0,1,3.07,5.05c-0.17,5.51-9.5,8.57-7.79,14.35,1.56,5.29,13.37,4,13,.74L23.7,56.1c-0.06-2.62-.47-6.12.08-9.22C24.64,42,27.67,37.78,33,37.74c1,0,1.78-.21,1.78-1s-1.55-.84-2.64-0.95a23.35,23.35,0,0,1-12.56-5c-2.43-2-6.21-8.3-3.74-7.83a21.74,21.74,0,0,0,4.06.4c1.24,0,4.44-.35,4.44-1.11,0-1-1.85-.42-4.57-0.68C16.48,21.22,9.6,19.83,6,9.35,4.71,5.43,3.83-1.91,6,.46c12.46,13.7,16.69,11.47,23.84,16.16,3.15,2.06,5.19,7,7,6.58,1.2-.27.46-1.37,0.64-3.93C37.66,17,38.75,16.48,36,15.79c-3.26-.81-6.52-4.38-4.39-4.33a11.89,11.89,0,0,0,5.53-.76c1.87-.81,6.43-4.28,9.18-2.89s5.08-.6,6.94-0.25c2.71,0.51,3.41,4.24,3.05,6.42-0.22,1.38-.22,1.38-2,1.28-3.61-.21-4.53,2.67-2,4.25,3.87,2.42,5.51,4.23,6.56,9.58,0.51,2.6.1,3.2-.76,2.72s-2.34-.72-0.29,4-1.29,10.28-2.39,10.9a1.3,1.3,0,0,0-.91,1.34c0,11.42,0,12.27,1.92,12.48,2.9,0.31,4.14-1.44,5.27.06C63.29,62.73,63.41,64,61.82,64ZM4.7,21.28H1v3.65H4.7V21.28Z" transform="translate(-1.05)" fill="#fff" />
+    </svg>
+    </div>
+
     <div id="app"></div>
     <!-- built files will be auto injected -->