add edit button to mapping table and refactor cell creation
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -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%;
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
@@ -799,10 +797,16 @@ function applyTableAccessibility(table, sectionName) {
|
|||||||
if (image != null) {
|
if (image != null) {
|
||||||
cells[c].setAttribute("data-cell-type", "image");
|
cells[c].setAttribute("data-cell-type", "image");
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
var actionButton = cells[c].querySelector("input.mapping-edit-button, button.mapping-edit-button");
|
||||||
|
if (actionButton != null) {
|
||||||
|
cells[c].setAttribute("data-cell-type", "action");
|
||||||
|
}
|
||||||
else {
|
else {
|
||||||
cells[c].removeAttribute("data-cell-type");
|
cells[c].removeAttribute("data-cell-type");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
if (cells[c].getAttribute("onclick") != null) {
|
if (cells[c].getAttribute("onclick") != null) {
|
||||||
var cellLabel = cells[c].innerText;
|
var cellLabel = cells[c].innerText;
|
||||||
if (cellLabel == undefined || cellLabel.length == 0) {
|
if (cellLabel == undefined || cellLabel.length == 0) {
|
||||||
|
|||||||
@@ -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":
|
||||||
{
|
{
|
||||||
|
|||||||
62
src/webUI.go
62
src/webUI.go
File diff suppressed because one or more lines are too long
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user