48k.eu-mirror
/
ogcp
mirror of https://git.48k.eu/ogcp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replace " " with "_" in HTML scopes IDs 

Otherwise, scopes with whitespaces in their names breaks the javascript
code.

From
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id:

---
Note: Technically, in HTML5, the value for an id attribute may contain
any character, except whitespace characters. However, to avoid
inadvertent errors, only ASCII letters, digits, '_', and '-' should be
used and the value for an id attribute should start with a letter. For
example, . has a special meaning in CSS (it acts as a class selector).
Unless you are careful to escape it in the CSS, it won't be recognized
as part of the value of an id attribute. It is easy to forget to do
this, resulting in bugs in your code that could be hard to detect.
---
multi-ogserver
Javier Sánchez Parra 2022-03-25 11:19:53 +01:00
parent 4f33ab1128
commit d4e7a9f05b
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ogcp/static/js/ogcp.js
View File

@ -4,7 +4,7 @@ let updateTimeoutId = null;
function showSelectedClient(client_checkbox) {
const container = $('#selected-clients');
const pill_id = 'pill-' + client_checkbox.name.replaceAll('.', '_');
const pill_id = 'pill-' + client_checkbox.name.replaceAll(/[.]|[ ]/g, '_');
if (client_checkbox.checked) {
if (!($('#' + pill_id).length))
@ -124,7 +124,7 @@ function updatePillStatus(state, pill) {
function updateScopes(scopes) {
scopes.forEach((scope) => {
if (scope.state) {
const scopeId = `${scope.name}_${scope.id}`.replaceAll('.', '_');
const scopeId = `${scope.name}_${scope.id}`.replaceAll(/[.]|[ ]/g, '_');
const iconEl = document.querySelector(`#${scopeId} .nav-icon`);
const iconCls = ['fas', 'far', 'text-danger', 'text-success',
'text-warning', 'text-wol'];

4
ogcp/templates/macros.html
View File

@ -21,7 +21,7 @@
{% macro scopes_tree_collapse_level(scopes, i, parent_id, state) -%}
{% for scope in scopes %}
<li id="{{ scope["name"]|replace(".", "_") }}_{{ scope["id"] }}" class="nav-item">
<li id="{{ scope["name"]|replace(".", "_")|replace(" ", "_") }}_{{ scope["id"] }}" class="nav-item">
{% if " ".join(scope["ip"]) %}
<input class="form-check-input" type="checkbox" form="scopesForm"
value="{{ " ".join(scope["ip"]) }}" {{ state }}
@ -58,7 +58,7 @@
<div class="d-flex flex-wrap justify-content-center">
{% set max_clients = 50 %}
{% for name_id, ip in selected_clients[:max_clients] %}
<div id="pill-{{ name_id|replace(".", "_") }}" class="badge badge-pill og-pill badge-light">
<div id="pill-{{ name_id|replace(".", "_")|replace(" ", "_") }}" class="badge badge-pill og-pill badge-light">
{{ name_id }}<br>{{ ip }}
</div>
{% if loop.last and (selected_clients|length > max_clients) %}