showing jobs and retrieving jobs only if authenticated

webui/src/components/window/job-counter.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <div class="jobs"
+         :class="{colored: show}"
+         @click="showJobs">
+      <span v-if="failedJobCount > 0">
+        {{ failedJobCount }} {{ failedJobCount === 1 ? 'job' : 'jobs' }} failed
+      </span>
+      <span v-if="runningJobCount > 0">
+        {{ runningJobCount }} {{ runningJobCount === 1 ? 'job' : 'jobs' }} running
+      </span>
+      <span v-else>
+        <em>no running jobs</em>
+      </span>
+    </div>
+
+    <job-window v-if="show"
+                @close="show=false"
+                :jobs="activeJobs"/>
+  </div>
+</template>
+
+<script>
+import JobWindow from "@/components/window/job-window";
+
+export default {
+  name: "job-counter",
+  components: {
+    JobWindow
+  },
+  data: function (){
+    return {
+      jobs: [],
+      show: false
+    }
+  },
+
+  created: function () {
+    // get jobs
+    // this.getJobs(); < will be done on 'connect'
+
+    // subscribe to changes
+    this.$root.socket.on('connect', this.getJobs);
+    this.$root.socket.on('create-job', this.addJob);
+    this.$root.socket.on('remove-job', this.removeJob);
+    this.$root.socket.on('edit-job', this.editJob);
+  },
+  destroyed: function () {
+    this.$root.socket.off('connect', this.getJobs);
+    this.$root.socket.off('create-job', this.addJob);
+    this.$root.socket.off('remove-job', this.removeJob);
+    this.$root.socket.off('edit-job', this.editJob);
+  },
+
+  computed: {
+
+    activeJobs: function () {
+      if (!this.$root.project)
+        return this.jobs;
+      else
+        return this.jobs.filter(j => j['project_id'] === this.$root.project.identifier);
+    },
+    activeJobCount: function () {
+      return this.activeJobs.length;
+    },
+    runningJobCount: function () {
+      return this.activeJobs.filter(j => !j.finished).length;
+    },
+    failedJobCount: function () {
+      return this.activeJobs.filter(j => j.exception).length;
+    }
+  },
+
+  methods: {
+
+    showJobs: function () {
+      if (this.show)
+        this.show = false;
+      else if (this.activeJobCount > 0)
+        this.show = true;
+    },
+    getJobs: function () {
+      this.$root.socket.get('/jobs')
+          .then(response => response.json())
+          .then(jobs => {
+            this.jobs = [];
+            jobs.forEach(this.addJob)
+          });
+    },
+    addJob: function (job) {
+      for (let j of this.jobs)
+        if (j.identifier === job.identifier)
+          return;
+
+      this.jobs.push(job);
+    },
+    removeJob: function (job) {
+      for (let i = 0; i < this.jobs.length; i++) {
+        if (this.jobs[i].identifier === job.identifier) {
+          this.jobs.splice(i, 1);
+          return;
+        }
+      }
+    },
+    editJob: function (job) {
+      for (let i = 0; i < this.jobs.length; i++) {
+        if (this.jobs[i].identifier === job.identifier) {
+          this.$set(this.jobs, i, job);
+          return;
+        }
+      }
+    }
+  },
+
+  watch: {
+    activeJobCount: function (newVal) {
+      if (newVal === 0) {
+        this.show = false;
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.jobs {
+  font-family: "Roboto Condensed", sans-serif;
+  white-space: nowrap;
+  padding: 1rem;
+  cursor: pointer;
+}
+
+.jobs.colored {
+  color: var(--secondary);
+}
+</style>

webui/src/components/window/top-navigation-bar.vue

@@ -23,49 +23,22 @@
          Logout ({{$root.socket.username}})
       </div>
     </div>
+    <job-counter v-if="$root.socket.authenticated"/>
 
-    <div class="jobs" :class="{colored: show}" @click="showJobs">
-      <template v-if="failedJobCount > 0">
-        {{ failedJobCount }} {{ failedJobCount === 1 ? 'job' : 'jobs' }} failed
-      </template>
-      <template v-else>
-        {{ runningJobCount }} {{ runningJobCount === 1 ? 'job' : 'jobs' }} running
-      </template>
-    </div>
-
-    <job-window v-if="show"
-                @close="show=false"
-                :jobs="activeJobs"/>
   </div>
 </template>
 
 <script>
-import JobWindow from "@/components/window/job-window";
+import JobCounter from "@/components/window/job-counter";
 
 export default {
   name: "top-navigation-bar",
-  components: {JobWindow},
-  props: ['window'],
-  created: function () {
-    // get jobs
-    // this.getJobs(); < will be done on 'connect'
-
-    // subscribe to changes
-    this.$root.socket.on('connect', this.getJobs);
-    this.$root.socket.on('create-job', this.addJob);
-    this.$root.socket.on('remove-job', this.removeJob);
-    this.$root.socket.on('edit-job', this.editJob);
-  },
-  destroyed: function () {
-    this.$root.socket.off('connect', this.getJobs);
-    this.$root.socket.off('create-job', this.addJob);
-    this.$root.socket.off('remove-job', this.removeJob);
-    this.$root.socket.off('edit-job', this.editJob);
+  components: {
+    JobCounter,
   },
+  props: ['window'],
   data: function () {
     return {
-      jobs: [],
-      show: false
     }
   },
   computed: {
@@ -80,21 +53,6 @@ export default {
       else
         return 'PyCS';
     },
-    activeJobs: function () {
-      if (!this.$root.project)
-        return this.jobs;
-      else
-        return this.jobs.filter(j => j['project_id'] === this.$root.project.identifier);
-    },
-    activeJobCount: function () {
-      return this.activeJobs.length;
-    },
-    runningJobCount: function () {
-      return this.activeJobs.filter(j => !j.finished).length;
-    },
-    failedJobCount: function () {
-      return this.activeJobs.filter(j => j.exception).length;
-    }
   },
   methods: {
     logout: function () {
@@ -102,51 +60,7 @@ export default {
       this.$emit('close', true);
     },
 
-    showJobs: function () {
-      if (this.show)
-        this.show = false;
-      else if (this.activeJobCount > 0)
-        this.show = true;
-    },
-    getJobs: function () {
-      this.$root.socket.get('/jobs')
-          .then(response => response.json())
-          .then(jobs => {
-            this.jobs = [];
-            jobs.forEach(this.addJob)
-          });
-    },
-    addJob: function (job) {
-      for (let j of this.jobs)
-        if (j.identifier === job.identifier)
-          return;
-
-      this.jobs.push(job);
-    },
-    removeJob: function (job) {
-      for (let i = 0; i < this.jobs.length; i++) {
-        if (this.jobs[i].identifier === job.identifier) {
-          this.jobs.splice(i, 1);
-          return;
-        }
-      }
-    },
-    editJob: function (job) {
-      for (let i = 0; i < this.jobs.length; i++) {
-        if (this.jobs[i].identifier === job.identifier) {
-          this.$set(this.jobs, i, job);
-          return;
-        }
-      }
-    }
   },
-  watch: {
-    activeJobCount: function (newVal) {
-      if (newVal === 0) {
-        this.show = false;
-      }
-    }
-  }
 }
 </script>
 
@@ -206,14 +120,4 @@ export default {
   color: #afafaf;
 }
 
-.jobs {
-  font-family: "Roboto Condensed", sans-serif;
-  white-space: nowrap;
-  padding: 1rem;
-  cursor: pointer;
-}
-
-.jobs.colored {
-  color: var(--secondary);
-}
 </style>