From 62bdaf2735112dbb62a079300269d2b1a8b8f9b5 Mon Sep 17 00:00:00 2001 From: Jeroen De Meerleer Date: Wed, 5 Jan 2022 11:36:07 +0100 Subject: [PATCH] NEW FEATURE: when putting names between brackets it's treated as a tag --- assets/js/job/index.js | 28 +++++++++++++++++ assets/js/job/view.js | 34 ++++++++++++++++++++- assets/js/utils.js | 57 +++++++++++++++++++++++++++++++++++ assets/scss/job/index.scss | 5 +++ assets/scss/job/view.scss | 8 ++++- templates/job/add.html.twig | 1 + templates/job/edit.html.twig | 1 + templates/job/index.html.twig | 2 +- templates/job/view.html.twig | 2 +- 9 files changed, 134 insertions(+), 4 deletions(-) create mode 100644 assets/js/utils.js diff --git a/assets/js/job/index.js b/assets/js/job/index.js index 259e436..97ecee1 100644 --- a/assets/js/job/index.js +++ b/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; diff --git a/assets/js/job/view.js b/assets/js/job/view.js index 250f0ac..a873dfd 100644 --- a/assets/js/job/view.js +++ b/assets/js/job/view.js @@ -1 +1,33 @@ -import 'bootstrap'; \ No newline at end of file +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)); +} \ No newline at end of file diff --git a/assets/js/utils.js b/assets/js/utils.js new file mode 100644 index 0000000..9434a61 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/assets/scss/job/index.scss b/assets/scss/job/index.scss index 04dbd73..5bfc92a 100644 --- a/assets/scss/job/index.scss +++ b/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; } diff --git a/assets/scss/job/view.scss b/assets/scss/job/view.scss index fdb46de..e618e9c 100644 --- a/assets/scss/job/view.scss +++ b/assets/scss/job/view.scss @@ -1 +1,7 @@ -@import "assets/scss/base"; \ No newline at end of file +@import "assets/scss/base"; + + +.tag { + display: inline-block; + padding: 0 1em; +} \ No newline at end of file diff --git a/templates/job/add.html.twig b/templates/job/add.html.twig index 9445850..38b9d9a 100644 --- a/templates/job/add.html.twig +++ b/templates/job/add.html.twig @@ -9,6 +9,7 @@
+ You can create colored tags by using [tag]
diff --git a/templates/job/edit.html.twig b/templates/job/edit.html.twig index 519d704..8bd2e65 100644 --- a/templates/job/edit.html.twig +++ b/templates/job/edit.html.twig @@ -8,6 +8,7 @@
+ You can create colored tags by using [tag]
diff --git a/templates/job/index.html.twig b/templates/job/index.html.twig index a2594fa..418d8b5 100644 --- a/templates/job/index.html.twig +++ b/templates/job/index.html.twig @@ -18,7 +18,7 @@ {% for job in jobs %} {% if job.needschecking %}{% endif %} - + {% if job.needschecking %}{% endif %} {{ job.name }} {{ attribute(job, 'host-displayname') }} diff --git a/templates/job/view.html.twig b/templates/job/view.html.twig index e969a01..f35733f 100644 --- a/templates/job/view.html.twig +++ b/templates/job/view.html.twig @@ -1,7 +1,7 @@ {% extends "base.html.twig" %} {% block title %}Overview of run for {{ job.name }}{% endblock %} {% block content %} -

Overview of runs for {{ job.name }}

+

Overview of runs for {{ job.name }}

Edit job {% if allruns %} | Only show failed runs