add edit button to mapping table and refactor cell creation
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2026-02-12 13:22:51 +11:00
parent ce5b12d8b8
commit 32c3d779c0
5 changed files with 107 additions and 86 deletions

View File

@@ -418,6 +418,15 @@ nav p {
margin: 0 auto; margin: 0 auto;
} }
#content_table .mapping-edit-button {
min-height: 32px;
min-width: 64px;
margin: 0;
padding: 5px 10px;
font-size: 11px;
line-height: 1;
}
#content_table tr.activeEPG { #content_table tr.activeEPG {
border-left-color: #2ed486; border-left-color: #2ed486;
} }
@@ -830,13 +839,15 @@ nav p {
} }
#content_table td[data-cell-type="checkbox"], #content_table td[data-cell-type="checkbox"],
#content_table td[data-cell-type="image"] { #content_table td[data-cell-type="image"],
#content_table td[data-cell-type="action"] {
grid-template-columns: 1fr; grid-template-columns: 1fr;
justify-items: start; justify-items: start;
} }
#content_table td[data-cell-type="checkbox"]::before, #content_table td[data-cell-type="checkbox"]::before,
#content_table td[data-cell-type="image"]::before { #content_table td[data-cell-type="image"]::before,
#content_table td[data-cell-type="action"]::before {
margin-bottom: 4px; margin-bottom: 4px;
} }
@@ -856,6 +867,11 @@ nav p {
height: 24px; height: 24px;
} }
#content_table .mapping-edit-button {
min-height: 38px;
width: 100%;
}
.mobile-only-control { .mobile-only-control {
display: block; display: block;
width: 100%; width: 100%;

View File

@@ -70,7 +70,7 @@ var MainMenuItem = /** @class */ (function (_super) {
this.tableHeader = ["{{.users.table.username}}", "{{.users.table.password}}", "{{.users.table.web}}", "{{.users.table.pms}}", "{{.users.table.m3u}}", "{{.users.table.xml}}", "{{.users.table.api}}"]; this.tableHeader = ["{{.users.table.username}}", "{{.users.table.password}}", "{{.users.table.web}}", "{{.users.table.pms}}", "{{.users.table.m3u}}", "{{.users.table.xml}}", "{{.users.table.api}}"];
break; break;
case "mapping": case "mapping":
this.tableHeader = ["BULK", "{{.mapping.table.chNo}}", "{{.mapping.table.logo}}", "{{.mapping.table.channelName}}", "{{.mapping.table.playlist}}", "{{.mapping.table.groupTitle}}", "{{.mapping.table.xmltvFile}}", "{{.mapping.table.xmltvID}}"]; this.tableHeader = ["BULK", "{{.mapping.table.chNo}}", "{{.mapping.table.logo}}", "{{.mapping.table.channelName}}", "{{.mapping.table.playlist}}", "{{.mapping.table.groupTitle}}", "{{.mapping.table.xmltvFile}}", "{{.mapping.table.xmltvID}}", "{{.mapping.table.edit}}"];
break; break;
} }
//console.log(this.menuKey, this.tableHeader); //console.log(this.menuKey, this.tableHeader);
@@ -363,39 +363,27 @@ var Content = /** @class */ (function () {
cell.child = true; cell.child = true;
cell.childType = "IMG"; cell.childType = "IMG";
cell.imageURL = data[key]["tvg-logo"]; cell.imageURL = data[key]["tvg-logo"];
var td = cell.createCell(); tr.appendChild(cell.createCell());
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)');
td.id = key;
tr.appendChild(td);
// Kanalname // Kanalname
var cell = new Cell(); var cell = new Cell();
cell.child = true; cell.child = true;
cell.childType = "P"; cell.childType = "P";
cell.className = data[key]["x-category"]; cell.className = data[key]["x-category"];
cell.value = data[key]["x-name"]; cell.value = data[key]["x-name"];
var td = cell.createCell(); tr.appendChild(cell.createCell());
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)');
td.id = key;
tr.appendChild(td);
// Playlist // Playlist
var cell = new Cell(); var cell = new Cell();
cell.child = true; cell.child = true;
cell.childType = "P"; cell.childType = "P";
//cell.value = data[key]["_file.m3u.name"] //cell.value = data[key]["_file.m3u.name"]
cell.value = getValueFromProviderFile(data[key]["_file.m3u.id"], "m3u", "name"); cell.value = getValueFromProviderFile(data[key]["_file.m3u.id"], "m3u", "name");
var td = cell.createCell(); tr.appendChild(cell.createCell());
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)');
td.id = key;
tr.appendChild(td);
// Gruppe (group-title) // Gruppe (group-title)
var cell = new Cell(); var cell = new Cell();
cell.child = true; cell.child = true;
cell.childType = "P"; cell.childType = "P";
cell.value = data[key]["x-group-title"]; cell.value = data[key]["x-group-title"];
var td = cell.createCell(); tr.appendChild(cell.createCell());
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)');
td.id = key;
tr.appendChild(td);
// XMLTV Datei // XMLTV Datei
var cell = new Cell(); var cell = new Cell();
cell.child = true; cell.child = true;
@@ -406,10 +394,7 @@ var Content = /** @class */ (function () {
else { else {
cell.value = data[key]["x-xmltv-file"]; cell.value = data[key]["x-xmltv-file"];
} }
var td = cell.createCell(); tr.appendChild(cell.createCell());
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)');
td.id = key;
tr.appendChild(td);
// XMLTV Kanal // XMLTV Kanal
var cell = new Cell(); var cell = new Cell();
cell.child = true; cell.child = true;
@@ -420,10 +405,17 @@ var Content = /** @class */ (function () {
value = data[key]["x-mapping"].substring(0, 20) + "..."; value = data[key]["x-mapping"].substring(0, 20) + "...";
} }
cell.value = value; cell.value = value;
var td = cell.createCell(); tr.appendChild(cell.createCell());
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)'); var cell = new Cell();
td.id = key; cell.child = true;
tr.appendChild(td); cell.childType = "EDIT";
cell.value = "{{.button.edit}}";
var editTd = cell.createCell();
var editButton = editTd.firstChild;
editButton.setAttribute('onclick', 'javascript: openPopUp("mapping", this)');
editButton.setAttribute("id", key);
editButton.setAttribute("aria-label", "Edit " + data[key]["x-name"]);
tr.appendChild(editTd);
rows.push(tr); rows.push(tr);
}); });
break; break;
@@ -485,6 +477,12 @@ var Cell = /** @class */ (function () {
element.setAttribute("onerror", "javascript: this.onerror=null;this.src=''"); element.setAttribute("onerror", "javascript: this.onerror=null;this.src=''");
//onerror="this.onerror=null;this.src='missing.gif';" //onerror="this.onerror=null;this.src='missing.gif';"
} }
break;
case "EDIT":
element = document.createElement("INPUT");
element.type = "button";
element.value = this.value;
element.className = "mapping-edit-button";
} }
td.appendChild(element); td.appendChild(element);
} }
@@ -800,7 +798,13 @@ function applyTableAccessibility(table, sectionName) {
cells[c].setAttribute("data-cell-type", "image"); cells[c].setAttribute("data-cell-type", "image");
} }
else { else {
cells[c].removeAttribute("data-cell-type"); var actionButton = cells[c].querySelector("input.mapping-edit-button, button.mapping-edit-button");
if (actionButton != null) {
cells[c].setAttribute("data-cell-type", "action");
}
else {
cells[c].removeAttribute("data-cell-type");
}
} }
} }
if (cells[c].getAttribute("onclick") != null) { if (cells[c].getAttribute("onclick") != null) {

View File

@@ -41,6 +41,7 @@
"backup": "Backup", "backup": "Backup",
"bulkEdit": "Bulk Edit", "bulkEdit": "Bulk Edit",
"cancel": "Cancel", "cancel": "Cancel",
"edit": "Edit",
"delete": "Delete", "delete": "Delete",
"done": "Done", "done": "Done",
"login": "Login", "login": "Login",
@@ -210,7 +211,8 @@
"playlist": "Playlist", "playlist": "Playlist",
"groupTitle": "Group Title", "groupTitle": "Group Title",
"xmltvFile": "XMLTV File", "xmltvFile": "XMLTV File",
"xmltvID": "XMLTV ID" "xmltvID": "XMLTV ID",
"edit": "Edit"
}, },
"active": "active":
{ {

File diff suppressed because one or more lines are too long

View File

@@ -65,7 +65,7 @@ class MainMenuItem extends MainMenu {
break break
case "mapping": case "mapping":
this.tableHeader = ["BULK", "{{.mapping.table.chNo}}", "{{.mapping.table.logo}}", "{{.mapping.table.channelName}}", "{{.mapping.table.playlist}}", "{{.mapping.table.groupTitle}}", "{{.mapping.table.xmltvFile}}", "{{.mapping.table.xmltvID}}"] this.tableHeader = ["BULK", "{{.mapping.table.chNo}}", "{{.mapping.table.logo}}", "{{.mapping.table.channelName}}", "{{.mapping.table.playlist}}", "{{.mapping.table.groupTitle}}", "{{.mapping.table.xmltvFile}}", "{{.mapping.table.xmltvID}}", "{{.mapping.table.edit}}"]
break break
} }
@@ -425,11 +425,7 @@ class Content {
cell.child = true cell.child = true
cell.childType = "IMG" cell.childType = "IMG"
cell.imageURL = data[key]["tvg-logo"] cell.imageURL = data[key]["tvg-logo"]
var td = cell.createCell() tr.appendChild(cell.createCell())
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)')
td.id = key
tr.appendChild(td)
// Kanalname // Kanalname
var cell:Cell = new Cell() var cell:Cell = new Cell()
@@ -437,10 +433,7 @@ class Content {
cell.childType = "P" cell.childType = "P"
cell.className = data[key]["x-category"] cell.className = data[key]["x-category"]
cell.value = data[key]["x-name"] cell.value = data[key]["x-name"]
var td = cell.createCell() tr.appendChild(cell.createCell())
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)')
td.id = key
tr.appendChild(td)
// Playlist // Playlist
@@ -449,10 +442,7 @@ class Content {
cell.childType = "P" cell.childType = "P"
//cell.value = data[key]["_file.m3u.name"] //cell.value = data[key]["_file.m3u.name"]
cell.value = getValueFromProviderFile(data[key]["_file.m3u.id"], "m3u", "name") cell.value = getValueFromProviderFile(data[key]["_file.m3u.id"], "m3u", "name")
var td = cell.createCell() tr.appendChild(cell.createCell())
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)')
td.id = key
tr.appendChild(td)
// Gruppe (group-title) // Gruppe (group-title)
@@ -460,10 +450,7 @@ class Content {
cell.child = true cell.child = true
cell.childType = "P" cell.childType = "P"
cell.value = data[key]["x-group-title"] cell.value = data[key]["x-group-title"]
var td = cell.createCell() tr.appendChild(cell.createCell())
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)')
td.id = key
tr.appendChild(td)
// XMLTV Datei // XMLTV Datei
var cell:Cell = new Cell() var cell:Cell = new Cell()
@@ -476,10 +463,7 @@ class Content {
cell.value = data[key]["x-xmltv-file"] cell.value = data[key]["x-xmltv-file"]
} }
var td = cell.createCell() tr.appendChild(cell.createCell())
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)')
td.id = key
tr.appendChild(td)
// XMLTV Kanal // XMLTV Kanal
var cell:Cell = new Cell() var cell:Cell = new Cell()
@@ -491,11 +475,18 @@ class Content {
value = data[key]["x-mapping"].substring(0, 20) + "..." value = data[key]["x-mapping"].substring(0, 20) + "..."
} }
cell.value = value cell.value = value
var td = cell.createCell() tr.appendChild(cell.createCell())
td.setAttribute('onclick', 'javascript: openPopUp("mapping", this)')
td.id = key
tr.appendChild(td) var cell:Cell = new Cell()
cell.child = true
cell.childType = "EDIT"
cell.value = "{{.button.edit}}"
var editTd = cell.createCell()
var editButton = (editTd.firstChild as HTMLInputElement)
editButton.setAttribute('onclick', 'javascript: openPopUp("mapping", this)')
editButton.setAttribute("id", key)
editButton.setAttribute("aria-label", "Edit " + data[key]["x-name"])
tr.appendChild(editTd)
rows.push(tr) rows.push(tr)
}); });
@@ -582,6 +573,14 @@ class Cell {
element.setAttribute("onerror", "javascript: this.onerror=null;this.src=''" ) element.setAttribute("onerror", "javascript: this.onerror=null;this.src=''" )
//onerror="this.onerror=null;this.src='missing.gif';" //onerror="this.onerror=null;this.src='missing.gif';"
} }
break
case "EDIT":
element = document.createElement("INPUT");
(element as HTMLInputElement).type = "button";
(element as HTMLInputElement).value = this.value;
(element as HTMLInputElement).className = "mapping-edit-button";
break
} }
td.appendChild(element) td.appendChild(element)