mirror of
https://github.com/LibreQoE/LibreQoS.git
synced 2025-02-25 18:55:32 -06:00
Add simple blur redaction.
This commit is contained in:
parent
e46d792458
commit
db0325bc2d
@ -2,6 +2,7 @@ import {BaseDashlet} from "./base_dashlet";
|
||||
import {RttHistogram} from "../graphs/rtt_histo";
|
||||
import {clearDashDiv, theading} from "../helpers/builders";
|
||||
import {scaleNumber, rttCircleSpan} from "../helpers/scaling";
|
||||
import {redactCell} from "../helpers/redact";
|
||||
|
||||
export class Top10Downloaders extends BaseDashlet {
|
||||
constructor(slot) {
|
||||
@ -54,6 +55,7 @@ export class Top10Downloaders extends BaseDashlet {
|
||||
|
||||
let ip = document.createElement("td");
|
||||
ip.innerText = r.ip_address;
|
||||
redactCell(ip);
|
||||
row.append(ip);
|
||||
|
||||
let dl = document.createElement("td");
|
||||
|
@ -1,6 +1,7 @@
|
||||
import {BaseDashlet} from "./base_dashlet";
|
||||
import {clearDashDiv, simpleRow, theading} from "../helpers/builders";
|
||||
import {scaleNumber, scaleNanos} from "../helpers/scaling";
|
||||
import {redactCell} from "../helpers/redact";
|
||||
|
||||
export class TopTreeSummary extends BaseDashlet {
|
||||
constructor(slot) {
|
||||
@ -42,7 +43,9 @@ export class TopTreeSummary extends BaseDashlet {
|
||||
let tbody = document.createElement("tbody");
|
||||
msg.data.forEach((r) => {
|
||||
let row = document.createElement("tr");
|
||||
row.appendChild(simpleRow(r[1].name));
|
||||
let name = simpleRow(r[1].name);
|
||||
redactCell(name);
|
||||
row.appendChild(simpleRow(name));
|
||||
row.appendChild(simpleRow(scaleNumber(r[1].current_throughput[0])));
|
||||
row.appendChild(simpleRow(scaleNumber(r[1].current_throughput[1])));
|
||||
t.appendChild(row);
|
||||
|
@ -2,6 +2,7 @@ import {BaseDashlet} from "./base_dashlet";
|
||||
import {RttHistogram} from "../graphs/rtt_histo";
|
||||
import {clearDashDiv, theading} from "../helpers/builders";
|
||||
import {scaleNumber, rttCircleSpan} from "../helpers/scaling";
|
||||
import {redactCell} from "../helpers/redact";
|
||||
|
||||
export class Worst10Downloaders extends BaseDashlet {
|
||||
constructor(slot) {
|
||||
@ -54,6 +55,7 @@ export class Worst10Downloaders extends BaseDashlet {
|
||||
|
||||
let ip = document.createElement("td");
|
||||
ip.innerText = r.ip_address;
|
||||
redactCell(ip);
|
||||
row.append(ip);
|
||||
|
||||
let dl = document.createElement("td");
|
||||
|
@ -2,6 +2,7 @@ import {BaseDashlet} from "./base_dashlet";
|
||||
import {RttHistogram} from "../graphs/rtt_histo";
|
||||
import {clearDashDiv, theading} from "../helpers/builders";
|
||||
import {scaleNumber, rttCircleSpan} from "../helpers/scaling";
|
||||
import {redactCell} from "../helpers/redact";
|
||||
|
||||
export class Worst10Retransmits extends BaseDashlet {
|
||||
constructor(slot) {
|
||||
@ -54,6 +55,7 @@ export class Worst10Retransmits extends BaseDashlet {
|
||||
|
||||
let ip = document.createElement("td");
|
||||
ip.innerText = r.ip_address;
|
||||
redactCell(ip);
|
||||
row.append(ip);
|
||||
|
||||
let dl = document.createElement("td");
|
||||
|
@ -0,0 +1,59 @@
|
||||
export function initRedact() {
|
||||
let modeSwitch = document.getElementById("redactSwitch");
|
||||
modeSwitch.checked = isRedacted();
|
||||
modeSwitch.onclick = () => {
|
||||
let modeSwitch = document.getElementById("redactSwitch");
|
||||
if (modeSwitch.checked) {
|
||||
localStorage.setItem("redact", "true");
|
||||
} else {
|
||||
localStorage.setItem("redact", "false");
|
||||
}
|
||||
cssRedact();
|
||||
};
|
||||
cssRedact();
|
||||
}
|
||||
|
||||
export function redactCell(cell) {
|
||||
cell.classList.add("redactable");
|
||||
}
|
||||
|
||||
function cssRedact() {
|
||||
if (isRedacted()) {
|
||||
let css = css_getclass(".redactable");
|
||||
css.style.filter = "blur(4px)";
|
||||
} else {
|
||||
let css = css_getclass(".redactable");
|
||||
css.style.filter = "";
|
||||
}
|
||||
}
|
||||
|
||||
function isRedacted() {
|
||||
let prefs = localStorage.getItem("redact");
|
||||
if (prefs === null) {
|
||||
localStorage.setItem("redact", "false");
|
||||
return false;
|
||||
}
|
||||
if (prefs === "false") {
|
||||
return false;
|
||||
}
|
||||
if (prefs === "true") {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function cssrules() {
|
||||
var rules = {};
|
||||
for (var i = 0; i < document.styleSheets.length; ++i) {
|
||||
var cssRules = document.styleSheets[i].cssRules;
|
||||
for (var j = 0; j < cssRules.length; ++j)
|
||||
rules[cssRules[j].selectorText] = cssRules[j];
|
||||
}
|
||||
return rules;
|
||||
}
|
||||
|
||||
function css_getclass(name) {
|
||||
var rules = cssrules();
|
||||
if (!rules.hasOwnProperty(name))
|
||||
throw 'TODO: deal_with_notfound_case';
|
||||
return rules[name];
|
||||
}
|
@ -1,6 +1,8 @@
|
||||
import {Dashboard} from "./dashlets/dashboard";
|
||||
import {checkForUpgrades} from "./toasts/version_check";
|
||||
import {initRedact} from "./helpers/redact";
|
||||
|
||||
initRedact();
|
||||
checkForUpgrades("toasts");
|
||||
const dashboard = new Dashboard("dashboard");
|
||||
dashboard.build();
|
||||
|
@ -78,4 +78,5 @@ body.dark-mode {
|
||||
min-width: 500px;
|
||||
min-height: 500px;
|
||||
}
|
||||
.dashEditButton { }
|
||||
.dashEditButton { }
|
||||
.redactable { }
|
@ -80,6 +80,13 @@
|
||||
<label class="form-check-label" for="darkModeSwitch"><i class="fa fa-moon-o"></i> Day/Night</label>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Redact switch -->
|
||||
<li class="nav-item">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="redactSwitch">
|
||||
<label class="form-check-label" for="redactSwitch"><i class="fa fa-user-secret"></i> Redact</label>
|
||||
</div>
|
||||
</li>
|
||||
<hr />
|
||||
<!-- User Info -->
|
||||
<li class="nav-item">
|
||||
|
Loading…
Reference in New Issue
Block a user