Added project colors

public/api/services/jsonBuilder.inc.php

@@ -49,7 +49,9 @@ class JsonBuilder
             "user_id" => "",
             "start_date" => "",
             "duration" => "",
-            "record_count" => ""
+            "record_count" => "",
+            "color" => "",
+            "visible" => ""
         );
 
         $this->jsonData['projects'] = array();
@@ -83,7 +85,8 @@ class JsonBuilder
         $columns = array(
             "record_tag_id" => "",
             "name" => "",
-            "user_id" => ""
+            "user_id" => "",
+            "visible" => ""
         );
 
         $this->jsonData['record_tags'] = array();

public/api/services/jugglDbApi.inc.php

@@ -228,7 +228,7 @@ function updateProject($user_id, $project)
 
     // Update given parameters
     $data = [];
-    $props = ["name", "start_date"];
+    $props = ["name", "start_date", "color", "visible"];
     foreach ($props as $p) {
         if (array_key_exists ($p, $project)) {
             $data[$p] = $project[$p];
@@ -248,7 +248,7 @@ function updateRecordTag($user_id, $tag)
 
     // Update given parameters
     $data = [];
-    $props = ["name"];
+    $props = ["name", "visible"];
     foreach ($props as $p) {
         if (array_key_exists ($p, $tag)) {
             $data[$p] = $tag[$p];

src/components/base/BaseColorText.vue

@@ -0,0 +1,32 @@
+<template>
+  <span class="box" :style="customStyle">{{ text }}</span>
+</template>
+
+<script>
+export default {
+  name: "BaseColorText",
+  props: {
+    text: {
+      required: true,
+      type: String
+    },
+    color: {
+      required: false,
+      type: String,
+      default: "transparent"
+    }
+  },
+  computed: {
+    customStyle: function() {
+      return "background-color: " + this.color;
+    }
+  }
+};
+</script>
+
+<style lang="sass" scoped>
+.box
+    border-radius: 5px
+    padding: 3px 10px
+    text-align: left
+</style>

src/components/forms/FormProjectDetails.vue

@@ -17,6 +17,9 @@
       >
       </b-form-datepicker>
     </b-form-group>
+    <b-form-group id="color-group" label-for="color" label="Color">
+      <b-form-input id="color" v-model="form.color" trim> </b-form-input>
+    </b-form-group>
     <b-form-invalid-feedback :state="!failed">
       Something went wrong.
     </b-form-invalid-feedback>
@@ -59,7 +62,8 @@ export default {
       form: {
         project_id: undefined,
         start_date: undefined,
-        name: undefined
+        name: undefined,
+        color: undefined
       }
     };
   },
@@ -72,6 +76,10 @@ export default {
       this.failed = false;
       this.working = true;
 
+      if (this.form.color == "") {
+        this.form.color = null;
+      }
+
       store
         .dispatch("updateProject", this.form)
         .then(() => {
@@ -96,6 +104,7 @@ export default {
     this.form.project_id = this.project.project_id;
     this.form.name = this.project.name;
     this.form.start_date = this.project.start_date;
+    this.form.color = this.project.color;
   }
 };
 </script>

src/components/juggl/JugglProjectName.vue

@@ -0,0 +1,22 @@
+<template>
+  <BaseColorText :text="project.name" :color="project.color" />
+</template>
+
+<script>
+import BaseColorText from "@/components/base/BaseColorText.vue";
+
+export default {
+  name: "JugglProjectName",
+  components: {
+    BaseColorText
+  },
+  props: {
+    project: {
+      required: true,
+      type: Object
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/juggl/JugglProjectsPanel.vue

@@ -5,7 +5,7 @@
       :key="project.project_id"
       @click="() => startProject(project.project_id)"
     >
-      <h1>{{ project.name }}</h1>
+      <JugglProjectName :project="project" class="project-title" />
       <p>{{ getDurationTimestamp(project.duration) }}</p>
       <p>{{ project.record_count }} records</p>
     </div>
@@ -13,11 +13,15 @@
 </template>
 
 <script>
-import store from "@/store";
+import JugglProjectName from "@/components/juggl/JugglProjectName";
 import { helperService } from "@/services/helper.service.js";
+import store from "@/store";
 
 export default {
   name: "JugglProjectPanel",
+  components: {
+    JugglProjectName
+  },
   props: {
     projects: {
       required: true
@@ -54,11 +58,9 @@ export default {
       border-color: $primary !important
       cursor: pointer
 
-  h1
+  .project-title
     font-weight: bold
     font-size: 24pt
-    margin: 0px
-    padding: 0px
 
   p
     font-size: 10pt

src/components/juggl/JugglRecordsList.vue

@@ -15,7 +15,7 @@
 
     <!-- Custom data -->
     <template #cell(project)="data">
-      {{ getProject(data.item.project_id).name }}
+      <JugglProjectName :project="getProject(data.item.project_id)" />
     </template>
 
     <template #cell(start)="data">
@@ -64,6 +64,7 @@
 
 <script>
 import FormRecordDetails from "@/components/forms/FormRecordDetails";
+import JugglProjectName from "@/components/juggl/JugglProjectName";
 import JugglTagField from "@/components/juggl/JugglTagField";
 import { helperService } from "@/services/helper.service.js";
 import store from "@/store";
@@ -72,6 +73,7 @@ export default {
   name: "JugglRecordsList",
   components: {
     FormRecordDetails,
+    JugglProjectName,
     JugglTagField
   },
   props: {

src/views/Manage.vue

@@ -17,6 +17,10 @@
         </template>
 
         <!-- Custom data -->
+        <template #cell(name)="data">
+          <JugglProjectName :project="data.item" />
+        </template>
+
         <template #cell(duration)="data">
           {{ getDurationTimestamp(data.item.duration) }}
         </template>
@@ -86,6 +90,7 @@
 <script>
 import LayoutNavbarPrivate from "@/components/layout/LayoutNavbarPrivate";
 import FormProjectDetails from "@/components/forms/FormProjectDetails";
+import JugglProjectName from "@/components/juggl/JugglProjectName";
 import FormProjectAdd from "@/components/forms/FormProjectAdd";
 import FormTagDetails from "@/components/forms/FormTagDetails";
 import { helperService } from "@/services/helper.service.js";
@@ -97,6 +102,7 @@ export default {
   components: {
     LayoutNavbarPrivate,
     FormProjectDetails,
+    JugglProjectName,
     FormProjectAdd,
     FormTagDetails,
     FormTagAdd