webcron/webcron
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases 7 Wiki Activity

ENHANCEMENT: doing theming in theming library

Browse Source
This commit is contained in:
Jeroen De Meerleer 2022-01-06 16:58:26 +01:00
parent db14517a72
commit 3e69582786
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
6 changed files with 38 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
assets/js/job/index.js
View File

@ -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;

1
assets/js/job/view.js
View File

@ -1,5 +1,4 @@
import 'bootstrap';
import Utils from "../utils";
document.addEventListener("readystatechange", event => {
if(event.target.readyState === 'complete') {

57
assets/js/utils.js
View File

@ -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;

36
lib/Framework/Twig.php
View File

@ -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';
}
}
}

2
templates/job/index.html.twig
View File

@ -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>

2
templates/job/view.html.twig
View File

@ -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>