Merge branch '36-loading-screen' into 'master'

Resolve "loading screen"

Closes #36

See merge request troebs/pycs!39

webui/src/App.vue

@@ -1,5 +1,8 @@
 <template>
   <div id="app">
+    <!-- loading screen -->
+    <loading-overlay v-if="!connected"/>
+
     <!-- top navigation bar -->
     <top-navigation-bar :window="window"
                         :current-project="currentProject"
@@ -53,10 +56,12 @@ import ProjectSettingsWindow from "@/components/projects/project-settings-window
 import AboutWindow from "@/components/other/about-window";
 import ProjectDataAddWindow from "@/components/projects/project-data-add-window";
 import ProjectDataViewWindow from "@/components/projects/project-data-view-window";
+import LoadingOverlay from "@/components/other/loading-overlay";
 
 export default {
   name: 'App',
   components: {
+    LoadingOverlay,
     ProjectDataAddWindow,
     ProjectDataViewWindow,
     AboutWindow,
@@ -67,6 +72,7 @@ export default {
   },
   data: function() {
     return {
+      connected: false,
       socket: {
         baseurl: window.location.protocol + '//' + window.location.hostname + ':5000',
         // initialize socket.io connection
@@ -134,8 +140,11 @@ export default {
   created: function() {
     this.socket.io.on('app_status', status => {
       this.status = status;
+      this.connected = true;
     });
 
+    setInterval(() => this.connected = this.socket.io.connected, 2000);
+
     window.addEventListener('resize', this.resize);
     this.resize();
   },

webui/src/assets/icons/sync.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+    <path fill-rule="evenodd"
+          d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0114.95 7.16a.75.75 0 11-1.49.178A5.501 5.501 0 008 2.5zM1.705 8.005a.75.75 0 01.834.656 5.501 5.501 0 009.592 2.97l-1.204-1.204a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011.05 8.84a.75.75 0 01.656-.834z"></path>
+</svg>

webui/src/components/other/loading-overlay.vue

@@ -0,0 +1,48 @@
+<template>
+<div class="overlay">
+  <img alt="sync" src="@/assets/icons/sync.svg">
+  Trying to connect...
+</div>
+</template>
+
+<script>
+export default {
+  name: "loading-overlay"
+}
+</script>
+
+<style scoped>
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 180%;
+  color: var(--on_primary);
+}
+
+img {
+  animation: rotate 2s linear infinite;
+  width: 7rem;
+  filter: invert(1);
+  margin-bottom: 1rem;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+</style>