ENHANCEMENT: doing theming in theming library

assets/js/job/index.js

@@ -1,12 +1,10 @@
 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();
     }
 });
 
@@ -26,32 +24,6 @@ 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,5 +1,4 @@
 import 'bootstrap';
-import Utils from "../utils";
 
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {

assets/js/utils.js

@@ -1,57 +0,0 @@
-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;

lib/Framework/Twig.php

@@ -70,5 +70,41 @@ class Twig
             return "{$days}d {$hours}h {$minutes}m {$seconds}s";
         });
         $this->environment->addFilter($secondsToInterval);
+
+        $parseTags = new TwigFilter('parsetags', function(string $text) {
+            $results = [];
+            preg_match_all('/\[([A-Za-z0-9 \-]+)\]/', $text, $results);
+            foreach ($results[0] as $key=>$result) {
+                $background = substr(md5($results[0][$key]), 0, 6);
+                $color = $this->lightOrDark($background) == 'dark' ? 'ffffff' : '000000';
+                $text = str_replace($results[0][$key], '<span class="tag" style="background-color: #' . $background . '; color: #' . $color . '">' . $results[1][$key] . '</span>', $text);
+            }
+            return $text;
+        });
+
+        $this->environment->addFilter($parseTags);
+
+    }
+
+    private function lightOrDark ($color) {
+        $color = str_split($color, 2);
+        foreach($color as &$value) {
+            $value = hexdec($value);
+        }
+
+        // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
+        $hsp = sqrt(
+            0.299 * ($color[0] * $color[0]) +
+            0.587 * ($color[1] * $color[1]) +
+            0.114 * ($color[2] * $color[2])
+        );
+
+
+        // Using the HSP value, determine whether the color is light or dark
+        if ($hsp>140) {
+            return 'light';
+        } else {
+            return 'dark';
+        }
     }
 }

templates/job/index.html.twig

@@ -20,7 +20,7 @@
                     <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 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>
+                        {{ job.name | parsetags | raw }}</td>
                     <td class="d-block d-md-table-cell align-middle">{{ attribute(job, 'host-displayname') }}</td>
                     <td class="d-block d-md-table-cell align-middle">{{ job.interval | interval }}</td>
                     <td class="d-block d-md-table-cell align-middle">{{ job.nextrun |  date("d/m/Y H:i:s") }}</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 <span class="job-name">{{ job.name }}</span></h2>
+    <h2>Overview of runs for <span class="job-name">{{ job.name | parsetags | raw }}</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>