From 13bad39f772ccb5982228afa7f4f88ea57ef8342 Mon Sep 17 00:00:00 2001 From: 4cuck <40539855+4cuck@users.noreply.github.com> Date: Tue, 19 Sep 2023 02:14:06 +0200 Subject: [PATCH] table column toggles --- server/src/lib.rs | 2 +- server/static/table_toggle.js | 82 ++++++++++++++++++++++++++++++ server/templates/about.html.j2 | 2 + server/templates/instances.html.j2 | 57 +++++++++++++++++---- 4 files changed, 131 insertions(+), 12 deletions(-) create mode 100644 server/static/table_toggle.js diff --git a/server/src/lib.rs b/server/src/lib.rs index 95798b1..afd7b45 100644 --- a/server/src/lib.rs +++ b/server/src/lib.rs @@ -68,7 +68,7 @@ pub async fn start( .layer(cors_policy(&config.site_url)) .layer(SetResponseHeaderLayer::overriding( header::CONTENT_SECURITY_POLICY, - "default-src 'self'; child-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline';" + "default-src 'self'; child-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;" .parse::() .expect("Invalid CSP header value"), )), diff --git a/server/static/table_toggle.js b/server/static/table_toggle.js new file mode 100644 index 0000000..355a336 --- /dev/null +++ b/server/static/table_toggle.js @@ -0,0 +1,82 @@ +// Get the table and checkboxes +const dataTable = document.getElementById('status-tbl'); +const toggleColumnCheckboxes = document.querySelectorAll('.toggle-column'); + +// Add event listeners to individual column toggle checkboxes +toggleColumnCheckboxes.forEach(checkbox => { + checkbox.addEventListener('change', function () { + const columnName = checkbox.getAttribute('data-name'); + let checked = checkbox.checked; + toggleColumn(columnName,checked); + saveSettings(); + }); +}); + +function saveSettings() { + let data = {}; + toggleColumnCheckboxes.forEach(checkbox => { + const columnName = checkbox.getAttribute('data-name'); + let checked = checkbox.checked; + data[columnName] = checked; + }); + setCookie(COOKIE_NAME, JSON.stringify(data),30); +} + +// Function to toggle the visibility of a column based on its name or id +function toggleColumn(name,checked) { + const cellsTd = dataTable.querySelectorAll(`td[data-name="${name}"]`); + + cellsTd.forEach(cell => { + cell.style.display = checked ? '' : 'none'; + }); + const cells = dataTable.querySelectorAll(`th[data-name="${name}"]`); + + cells.forEach(cell => { + cell.style.display = checked ? '' : 'none'; + }); +} + +const COOKIE_NAME = "table_settings"; +document.addEventListener("DOMContentLoaded", function(event) { + let val = getCookie(COOKIE_NAME); + if (val) { + let res = JSON.parse( val ); + console.log(res); + for (const [key, value] of Object.entries(res)) { + console.log(key, value); + toggleColumn(key,value); + toggleColumnCheckboxes.forEach(checkbox => { + if (checkbox.getAttribute('data-name') == key) { + checkbox.checked = value; + } + }); + } + } else { + toggleColumnCheckboxes.forEach(checkbox => { + const columnName = checkbox.getAttribute('data-name'); + let checked = checkbox.checked; + toggleColumn(columnName,checked); + }); + } +}); + +function setCookie(name,value,days) { + var expires = ""; + if (days) { + var date = new Date(); + date.setTime(date.getTime() + (days*24*60*60*1000)); + expires = "; expires=" + date.toUTCString(); + } + document.cookie = name + "=" + (value || "") + expires + "; path=/"; +} + +function getCookie(name) { + var nameEQ = name + "="; + var ca = document.cookie.split(';'); + for(var i=0;i < ca.length;i++) { + var c = ca[i]; + while (c.charAt(0)==' ') c = c.substring(1,c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); + } + return null; +} \ No newline at end of file diff --git a/server/templates/about.html.j2 b/server/templates/about.html.j2 index 5618e98..c58dc7b 100644 --- a/server/templates/about.html.j2 +++ b/server/templates/about.html.j2 @@ -35,6 +35,8 @@
  • Points is a weighted instance score based on the availability over the last 3h, 30 and 120 days, together with the version.
    • +

    Table settings are stored locally per client.

    +

    Sourcecode

    License: AGPL3

    diff --git a/server/templates/instances.html.j2 b/server/templates/instances.html.j2 index 5d6313e..93b48c6 100644 --- a/server/templates/instances.html.j2 +++ b/server/templates/instances.html.j2 @@ -21,19 +21,20 @@

    About

    Please use /api/v1/instances for bots.

    Last Updated {{last_updated}} UTC.

    +

    You can customize the visible columns at the bottom.

    - +
    - + - + - - - + + + @@ -41,7 +42,7 @@ {% for host in instances -%} - + {%- if host.recent_checks -%} - + {% endif %} - + {%- if host.healthy and not host.version -%} {%- set version = "Dmissing" -%} {%- elif host.version and not host.is_upstream -%} @@ -94,7 +95,7 @@ {%- else -%} {%- set version = "Eunknown" -%} {%- endif -%} - {# #} - + {%- endfor -%}
    InstanceCountryCountry Healthy Health HistoryAverage (ms)Average (ms) All Healthy %RSSVersionConnectivityRSSVersionConnectivity Points
    {{host.domain}}{{host.country}}{{host.country}} {%- if host.is_bad_host -%}
    ❓
    @@ -79,10 +80,10 @@ {%- endif -%}     		{{host.ping_avg}}{{host.ping_avg}}{{host.healthy_percentage_overall}}{% if host.rss -%} ✅ {%- else -%} ❌ {%- endif -%}{% if host.rss -%} ✅ {%- else -%} ❌ {%- endif -%} + {%- if host.version_url -%} {{host.version | truncate(length=18) | default(value="missing version")}} @@ -113,16 +114,50 @@ {%- endif -%} {%- if host.connectivity == -%}{{host.connectivity}}{{host.connectivity}} {{host.points}}
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + \ No newline at end of file