NEW FEATURE: when putting names between brackets it's treated as a tag

assets/js/job/index.js

@@ -1,10 +1,12 @@
 import { Modal } from 'bootstrap';
 import * as image from '../../images/ajax-loader.gif';
+import Utils from "../utils";
 
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {
         initDeleteButtons();
         initRunNowButtons();
+        initTags();
     }
 });
 
@@ -24,6 +26,32 @@ function initDeleteButtons() {
     }));
 }
 
+function initTags() {
+    var tags = JSON.parse(localStorage.getItem('tags')) ?? new Object();
+    var collected = Object.keys(tags);
+    document.querySelectorAll('.job-name').forEach(elem => {
+        let matches = elem.textContent.matchAll(/\[([A-Za-z0-9 \-]+)\]/g)
+        for (const tag of matches) {
+            if (typeof tag != 'undefined') {
+                if(collected.indexOf(tag[1]) == -1) {
+                    let color = '#'+tag[1].hashCode().toString(16).substr(1,6)// ; (0x1000000+Math.random()*0xffffff).toString(16).substr(1,6)
+                    collected.push(tag[1]);
+                    tags[tag[1]] = color;
+                }
+                let tagcolor =  tags[tag[1]];
+                let newelem = document.createElement('span')
+                newelem.classList.add('tag');
+                newelem.innerHTML = tag[1];
+                newelem.style.backgroundColor = tagcolor;
+                newelem.style.color = Utils.lightOrDark(tagcolor) == 'dark' ? '#ffffff' : '#000000';
+                elem.innerHTML = elem.innerHTML.replace(tag[0], newelem.outerHTML);
+            }
+        }
+    })
+    localStorage.setItem('tags', JSON.stringify(tags));
+}
+
+
 function initRunNowButtons() {
     document.querySelectorAll('.runnow').forEach(elem => elem.addEventListener("click", event => {
         let me = event.currentTarget;

assets/js/job/view.js

@@ -1 +1,33 @@
-import 'bootstrap';
+import 'bootstrap';
+import Utils from "../utils";
+
+document.addEventListener("readystatechange", event => {
+    if(event.target.readyState === 'complete') {
+        initTags();
+    }
+});
+
+function initTags() {
+    var tags = JSON.parse(localStorage.getItem('tags')) ?? new Object();
+    var collected = Object.keys(tags);
+    document.querySelectorAll('.job-name').forEach(elem => {
+        let matches = elem.textContent.matchAll(/\[([A-Za-z0-9 \-]+)\]/g)
+        for (const tag of matches) {
+            if (typeof tag != 'undefined') {
+                if(collected.indexOf(tag[1]) == -1) {
+                    let color = '#'+tag[1].hashCode().toString(16).substr(1,6)// ; (0x1000000+Math.random()*0xffffff).toString(16).substr(1,6)
+                    collected.push(tag[1]);
+                    tags[tag[1]] = color;
+                }
+                let tagcolor =  tags[tag[1]];
+                let newelem = document.createElement('span')
+                newelem.classList.add('tag');
+                newelem.innerHTML = tag[1];
+                newelem.style.backgroundColor = tagcolor;
+                newelem.style.color = Utils.lightOrDark(tagcolor) == 'dark' ? '#ffffff' : '#000000';
+                elem.innerHTML = elem.innerHTML.replace(tag[0], newelem.outerHTML);
+            }
+        }
+    })
+    localStorage.setItem('tags', JSON.stringify(tags));
+}

assets/js/utils.js

@@ -0,0 +1,57 @@
+let Utils = new Object();
+
+Utils.lightOrDark = function (color) {
+
+    // Variables for red, green, blue values
+    var r, g, b, hsp;
+
+    // Check the format of the color, HEX or RGB?
+    if (color.match(/^rgb/)) {
+
+        // If RGB --> store the red, green, blue values in separate variables
+        color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+
+        r = color[1];
+        g = color[2];
+        b = color[3];
+    }
+    else {
+
+        // If hex --> Convert it to RGB: http://gist.github.com/983661
+        color = +("0x" + color.slice(1).replace(
+            color.length < 5 && /./g, '$&$&'));
+
+        r = color >> 16;
+        g = color >> 8 & 255;
+        b = color & 255;
+    }
+
+    // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
+    hsp = Math.sqrt(
+        0.299 * (r * r) +
+        0.587 * (g * g) +
+        0.114 * (b * b)
+    );
+
+    // Using the HSP value, determine whether the color is light or dark
+    if (hsp>127.5) {
+
+        return 'light';
+    }
+    else {
+
+        return 'dark';
+    }
+}
+
+String.prototype.hashCode = function() {
+    var hash = 111111;
+    for (var i = 0; i < this.length; i++) {
+        var char = this.charCodeAt(i);
+        hash = ((hash<<5)-hash)+char;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return hash;
+}
+
+export default Utils;

assets/scss/job/index.scss

@@ -21,6 +21,11 @@ tr.running td {
   font-size: 1.5rem;
 }
 
+.tag {
+  display: inline-block;
+  padding: 0.25em 1em;
+}
+
 td.status-col {
   width: 54px;
 }

assets/scss/job/view.scss

@@ -1 +1,7 @@
-@import "assets/scss/base";
+@import "assets/scss/base";
+
+
+.tag {
+  display: inline-block;
+  padding: 0 1em;
+}

templates/job/add.html.twig

@@ -9,6 +9,7 @@
     <div class="mb-3">
         <label for="name">Name</label>
         <input type="text" name="name" class="form-control" id="name" placeholder="System update">
+        <small id="name-help" class="form-text text-muted">You can create colored tags by using [tag]</small>
     </div>
 
     <div class="mb-3">

templates/job/edit.html.twig

@@ -8,6 +8,7 @@
     <div class="mb-3">
         <label for="name">Name</label>
         <input type="text" name="name" class="form-control" id="name" placeholder="System update" value="{{ name }}">
+        <small id="name-help" class="form-text text-muted">You can create colored tags by using [tag]</small>
     </div>
     <div class="mb-3">
         <label for="name">Interval (in seconds)</label>

templates/job/index.html.twig

@@ -18,7 +18,7 @@
             {% for job in jobs %}
                 <tr{% if job.running == true %} class="running text-success"{% elseif job.norun == true %} class="norun text-danger"{% endif %}>
                     <td class="d-none d-md-table-cell align-middle status-col text-center">{% if job.needschecking %}<i class="icon icon-warning text-warning big-icon"></i>{% endif %}</td>
-                    <td class="d-block d-md-table-cell align-middle">
+                    <td class="d-block d-md-table-cell align-middle job-name">
                         <span class="d-inline d-md-none">{% if job.needschecking %}<i class="icon icon-warning text-warning"></i>{% endif %}</span>
                         {{ job.name }}</td>
                     <td class="d-block d-md-table-cell align-middle">{{ attribute(job, 'host-displayname') }}</td>

templates/job/view.html.twig

@@ -1,7 +1,7 @@
 {% extends "base.html.twig" %}
 {% block title %}Overview of run for {{ job.name }}{% endblock %}
 {% block content %}
-    <h2>Overview of runs for {{ job.name }}</h2>
+    <h2>Overview of runs for <span class="job-name">{{ job.name }}</span></h2>
     <p>
         <a href="{{ path('job_edit', { id: job.id }) }}">Edit job</a>
         {% if allruns %} | <a href="{{ path('job_view', { id: job.id })}}">Only show failed runs</a>