moved logs to 'edit' modal, removed log button
This commit is contained in:
parent
919a369945
commit
ca9ed70ce3
5 changed files with 66 additions and 110 deletions
|
|
@ -272,7 +272,6 @@ var DiagramNode = /** @class */ (function (_super) {
|
|||
_this.resize(ctx);
|
||||
_this.deleteButton = new Button(0, 0, "Del", ctx, _diagram.deleteNodeCallback, _this);
|
||||
_this.editButton = new Button(0, 0, "Edit", ctx, _diagram.editNodeCallback, _this);
|
||||
_this.logButton = new Button(0, 0, "Log", ctx, _diagram.logNodeCallback, _this);
|
||||
_this.input = new NodeIO(_this, true);
|
||||
_this.output = new NodeIO(_this, false);
|
||||
_this.results = results;
|
||||
|
|
@ -288,8 +287,7 @@ var DiagramNode = /** @class */ (function (_super) {
|
|||
if (this.hover) {
|
||||
this.deleteButton.update(ms);
|
||||
this.editButton.update(ms);
|
||||
this.logButton.update(ms);
|
||||
var onButtons = this.deleteButton.hover || this.editButton.hover || this.logButton.hover;
|
||||
var onButtons = this.deleteButton.hover || this.editButton.hover;
|
||||
if (!this.dragging && ms.leftDown && !ms.draggingNode && !ms.draggingConnection && !onButtons) {
|
||||
this.dragging = true;
|
||||
ms.draggingNode = true;
|
||||
|
|
@ -300,7 +298,6 @@ var DiagramNode = /** @class */ (function (_super) {
|
|||
else {
|
||||
this.deleteButton.hover = false;
|
||||
this.editButton.hover = false;
|
||||
this.logButton.hover = false;
|
||||
}
|
||||
if (!ms.leftDown) {
|
||||
this.dragging = false;
|
||||
|
|
@ -324,8 +321,9 @@ var DiagramNode = /** @class */ (function (_super) {
|
|||
var labelY = ms.offset.y + this.y + 3 * 2 + this.labelHeight;
|
||||
ctx.fillText(this.label, labelX, labelY);
|
||||
ctx.font = "15px Helvetica";
|
||||
ctx.fillStyle = "#898989";
|
||||
var typeX = ms.offset.x + this.x + this.width / 2 - this.typeWidth / 2;
|
||||
var typeY = ms.offset.y + this.y + 3 * 3 + this.typeHeight + this.labelHeight;
|
||||
var typeY = ms.offset.y + this.y + this.height - 3;
|
||||
ctx.fillText(this.type, typeX, typeY);
|
||||
var resultCount = "" + this.results.length;
|
||||
var resultCountSize = ctx.measureText(resultCount);
|
||||
|
|
@ -340,9 +338,6 @@ var DiagramNode = /** @class */ (function (_super) {
|
|||
this.editButton.x = ms.offset.x + this.x + this.width - this.editButton.width;
|
||||
this.editButton.y = ms.offset.y + this.y + this.height - this.editButton.height;
|
||||
this.editButton.draw(ctx, ms);
|
||||
this.logButton.x = ms.offset.x + this.x + this.width / 2 - this.logButton.width / 2;
|
||||
this.logButton.y = ms.offset.y + this.y + this.height - this.logButton.height;
|
||||
this.logButton.draw(ctx, ms);
|
||||
this.input.draw(ctx, ms);
|
||||
this.output.draw(ctx, ms);
|
||||
if (this.logs.length > 0) {
|
||||
|
|
@ -448,10 +443,9 @@ var MouseState = /** @class */ (function () {
|
|||
return MouseState;
|
||||
}());
|
||||
var Diagrams = /** @class */ (function () {
|
||||
function Diagrams(canvasId, editNodeCallback, deleteNodeCallback, logNodeCallback) {
|
||||
function Diagrams(canvasId, editNodeCallback, deleteNodeCallback) {
|
||||
if (editNodeCallback === void 0) { editNodeCallback = function () { }; }
|
||||
if (deleteNodeCallback === void 0) { deleteNodeCallback = function () { }; }
|
||||
if (logNodeCallback === void 0) { logNodeCallback = function () { }; }
|
||||
this.shouldTick = true;
|
||||
this.nodes = new Map();
|
||||
this.connections = new Array();
|
||||
|
|
@ -462,7 +456,6 @@ var Diagrams = /** @class */ (function () {
|
|||
this.newConnection = null;
|
||||
this.scale = 1.0;
|
||||
this.editNodeCallback = function () { };
|
||||
this.logNodeCallback = function () { };
|
||||
this.deleteNodeCallback = function () { };
|
||||
this.canvas = document.getElementById(canvasId);
|
||||
if (this.canvas === null) {
|
||||
|
|
@ -475,7 +468,6 @@ var Diagrams = /** @class */ (function () {
|
|||
_diagram = this;
|
||||
this.ctx = ctx;
|
||||
this.editNodeCallback = editNodeCallback;
|
||||
this.logNodeCallback = logNodeCallback;
|
||||
this.deleteNodeCallback = deleteNodeCallback;
|
||||
this.canvas.onmousemove = diagramOnMouseMove;
|
||||
this.canvas.onmousedown = diagramOnMouseDown;
|
||||
|
|
|
|||
|
|
@ -298,7 +298,6 @@ class DiagramNode extends CanvasObject {
|
|||
|
||||
deleteButton: Button;
|
||||
editButton: Button;
|
||||
logButton: Button;
|
||||
|
||||
dragging: boolean = false;
|
||||
dragOrigin: Point = new Point();
|
||||
|
|
@ -332,7 +331,6 @@ class DiagramNode extends CanvasObject {
|
|||
|
||||
this.deleteButton = new Button(0, 0, "Del", ctx, _diagram.deleteNodeCallback, this);
|
||||
this.editButton = new Button(0, 0, "Edit", ctx, _diagram.editNodeCallback, this);
|
||||
this.logButton = new Button(0, 0, "Log", ctx, _diagram.logNodeCallback, this);
|
||||
|
||||
this.input = new NodeIO(this, true);
|
||||
this.output = new NodeIO(this, false);
|
||||
|
|
@ -349,8 +347,7 @@ class DiagramNode extends CanvasObject {
|
|||
if (this.hover){
|
||||
this.deleteButton.update(ms);
|
||||
this.editButton.update(ms);
|
||||
this.logButton.update(ms);
|
||||
let onButtons = this.deleteButton.hover || this.editButton.hover || this.logButton.hover;
|
||||
let onButtons = this.deleteButton.hover || this.editButton.hover;
|
||||
if (!this.dragging && ms.leftDown && !ms.draggingNode && !ms.draggingConnection && !onButtons){
|
||||
this.dragging = true;
|
||||
ms.draggingNode = true;
|
||||
|
|
@ -360,7 +357,6 @@ class DiagramNode extends CanvasObject {
|
|||
} else {
|
||||
this.deleteButton.hover = false;
|
||||
this.editButton.hover = false;
|
||||
this.logButton.hover = false;
|
||||
}
|
||||
|
||||
if (!ms.leftDown){
|
||||
|
|
@ -388,8 +384,9 @@ class DiagramNode extends CanvasObject {
|
|||
ctx.fillText(this.label, labelX, labelY);
|
||||
|
||||
ctx.font = "15px Helvetica";
|
||||
ctx.fillStyle = "#898989";
|
||||
let typeX = ms.offset.x + this.x + this.width / 2 - this.typeWidth / 2;
|
||||
let typeY = ms.offset.y + this.y + 3 * 3 + this.typeHeight + this.labelHeight;
|
||||
let typeY = ms.offset.y + this.y + this.height - 3;
|
||||
ctx.fillText(this.type, typeX, typeY);
|
||||
|
||||
let resultCount = `${this.results.length}`
|
||||
|
|
@ -407,10 +404,6 @@ class DiagramNode extends CanvasObject {
|
|||
this.editButton.x = ms.offset.x + this.x + this.width - this.editButton.width;
|
||||
this.editButton.y = ms.offset.y + this.y + this.height - this.editButton.height;
|
||||
this.editButton.draw(ctx, ms);
|
||||
|
||||
this.logButton.x = ms.offset.x + this.x + this.width / 2 - this.logButton.width / 2;
|
||||
this.logButton.y = ms.offset.y + this.y + this.height - this.logButton.height;
|
||||
this.logButton.draw(ctx, ms);
|
||||
|
||||
this.input.draw(ctx, ms);
|
||||
this.output.draw(ctx, ms);
|
||||
|
|
@ -543,14 +536,12 @@ class Diagrams {
|
|||
scale: number = 1.0;
|
||||
|
||||
editNodeCallback: (node: DiagramNode) => void = function (){};
|
||||
logNodeCallback: (node: DiagramNode) => void = function (){};
|
||||
deleteNodeCallback: (node: DiagramNode) => void = function (){};
|
||||
|
||||
constructor(
|
||||
canvasId: string,
|
||||
editNodeCallback: (node: DiagramNode) => void = function (){},
|
||||
deleteNodeCallback: (node: DiagramNode) => void = function (){},
|
||||
logNodeCallback: (node: DiagramNode) => void = function (){},
|
||||
){
|
||||
this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
|
||||
if (this.canvas === null){
|
||||
|
|
@ -563,7 +554,6 @@ class Diagrams {
|
|||
_diagram = this;
|
||||
this.ctx = ctx;
|
||||
this.editNodeCallback = editNodeCallback;
|
||||
this.logNodeCallback = logNodeCallback;
|
||||
this.deleteNodeCallback = deleteNodeCallback;
|
||||
|
||||
this.canvas.onmousemove = diagramOnMouseMove;
|
||||
|
|
|
|||
|
|
@ -692,7 +692,7 @@ function onSubmitNewFilter() {
|
|||
});
|
||||
}
|
||||
function editNode(node) {
|
||||
var e_2, _a;
|
||||
var e_2, _a, e_3, _b;
|
||||
var addFilterButton = document.getElementById("filterButton");
|
||||
addFilterButton.click();
|
||||
var name = node.label;
|
||||
|
|
@ -717,11 +717,39 @@ function editNode(node) {
|
|||
onTypeChange(node);
|
||||
var submitButton = document.getElementById("submitFilterButton");
|
||||
submitButton.innerHTML = "Save";
|
||||
var logHeader = document.getElementById("logHeader");
|
||||
if (node.logs.length > 0) {
|
||||
logHeader.innerHTML = "Logs";
|
||||
}
|
||||
else {
|
||||
logHeader.innerHTML = "";
|
||||
}
|
||||
var logBody = document.getElementById("logTableBody");
|
||||
logBody.innerHTML = "";
|
||||
try {
|
||||
for (var _c = __values(node.logs), _d = _c.next(); !_d.done; _d = _c.next()) {
|
||||
var log = _d.value;
|
||||
var row = document.createElement("tr");
|
||||
var cell = document.createElement("td");
|
||||
var code = document.createElement("code");
|
||||
code.innerHTML = log;
|
||||
cell.appendChild(code);
|
||||
row.appendChild(cell);
|
||||
logBody.appendChild(row);
|
||||
}
|
||||
}
|
||||
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
||||
finally {
|
||||
try {
|
||||
if (_d && !_d.done && (_a = _c["return"])) _a.call(_c);
|
||||
}
|
||||
finally { if (e_2) throw e_2.error; }
|
||||
}
|
||||
var filterModalFooter = document.getElementById("filterResultsDiv");
|
||||
filterModalFooter.innerHTML = "";
|
||||
try {
|
||||
for (var _b = __values(node.results), _c = _b.next(); !_c.done; _c = _b.next()) {
|
||||
var result = _c.value;
|
||||
for (var _e = __values(node.results), _f = _e.next(); !_f.done; _f = _e.next()) {
|
||||
var result = _f.value;
|
||||
var cardDiv = document.createElement("div");
|
||||
cardDiv.classList.add("card", "my-2");
|
||||
var cardBody = document.createElement("div");
|
||||
|
|
@ -741,43 +769,14 @@ function editNode(node) {
|
|||
filterModalFooter.appendChild(cardDiv);
|
||||
}
|
||||
}
|
||||
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
||||
finally {
|
||||
try {
|
||||
if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
|
||||
}
|
||||
finally { if (e_2) throw e_2.error; }
|
||||
}
|
||||
submitButton.onclick = function () { submitEditNode(node); };
|
||||
}
|
||||
function logNode(node) {
|
||||
var e_3, _a;
|
||||
var logButton = document.getElementById("logButton");
|
||||
logButton.click();
|
||||
var logTitle = document.getElementById("logModalLabel");
|
||||
logTitle.innerHTML = node.label;
|
||||
var logBody = document.getElementById("logTableBody");
|
||||
logBody.innerHTML = "";
|
||||
var logTable = document.getElementById("logTable");
|
||||
try {
|
||||
for (var _b = __values(node.logs), _c = _b.next(); !_c.done; _c = _b.next()) {
|
||||
var log = _c.value;
|
||||
var row = document.createElement("tr");
|
||||
var cell = document.createElement("td");
|
||||
var code = document.createElement("code");
|
||||
code.innerHTML = log;
|
||||
cell.appendChild(code);
|
||||
row.appendChild(cell);
|
||||
logBody.appendChild(row);
|
||||
}
|
||||
}
|
||||
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
||||
finally {
|
||||
try {
|
||||
if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
|
||||
if (_f && !_f.done && (_b = _e["return"])) _b.call(_e);
|
||||
}
|
||||
finally { if (e_3) throw e_3.error; }
|
||||
}
|
||||
submitButton.onclick = function () { submitEditNode(node); };
|
||||
}
|
||||
function deleteNode(node) {
|
||||
_diagram.nodes["delete"](node.id);
|
||||
|
|
|
|||
|
|
@ -724,6 +724,24 @@ function editNode(node: DiagramNode){
|
|||
let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement;
|
||||
submitButton.innerHTML = "Save";
|
||||
|
||||
let logHeader = document.getElementById("logHeader") as HTMLHeadElement;
|
||||
if (node.logs.length > 0){
|
||||
logHeader.innerHTML = "Logs";
|
||||
} else {
|
||||
logHeader.innerHTML = "";
|
||||
}
|
||||
let logBody = document.getElementById("logTableBody") as HTMLElement;
|
||||
logBody.innerHTML = "";
|
||||
for (let log of node.logs){
|
||||
let row = document.createElement("tr");
|
||||
let cell = document.createElement("td");
|
||||
let code = document.createElement("code");
|
||||
code.innerHTML = log;
|
||||
cell.appendChild(code);
|
||||
row.appendChild(cell);
|
||||
logBody.appendChild(row);
|
||||
}
|
||||
|
||||
let filterModalFooter = document.getElementById("filterResultsDiv") as HTMLDivElement;
|
||||
filterModalFooter.innerHTML = "";
|
||||
for (let result of node.results){
|
||||
|
|
@ -747,26 +765,6 @@ function editNode(node: DiagramNode){
|
|||
submitButton.onclick = function() {submitEditNode(node);}
|
||||
}
|
||||
|
||||
function logNode(node: DiagramNode){
|
||||
let logButton = document.getElementById("logButton") as HTMLButtonElement;
|
||||
logButton.click();
|
||||
|
||||
let logTitle = document.getElementById("logModalLabel") as HTMLHeadElement;
|
||||
logTitle.innerHTML = node.label;
|
||||
let logBody = document.getElementById("logTableBody") as HTMLElement;
|
||||
logBody.innerHTML = "";
|
||||
let logTable = document.getElementById("logTable") as HTMLTableElement;
|
||||
for (let log of node.logs){
|
||||
let row = document.createElement("tr");
|
||||
let cell = document.createElement("td");
|
||||
let code = document.createElement("code");
|
||||
code.innerHTML = log;
|
||||
cell.appendChild(code);
|
||||
row.appendChild(cell);
|
||||
logBody.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteNode(node: DiagramNode){
|
||||
_diagram.nodes.delete(node.id)
|
||||
for (let i = 0; i < _diagram.connections.length; i++){
|
||||
|
|
|
|||
|
|
@ -39,11 +39,6 @@
|
|||
Import Watch
|
||||
</button>
|
||||
</td>
|
||||
<td id="OpenLogTD" hidden>
|
||||
<button type="button" id="logButton" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#LogModal">
|
||||
Open Log
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<a href="/watch/view/{{ .Watch.ID }}" class="btn btn-outline-secondary btn-sm">
|
||||
View Watch
|
||||
|
|
@ -106,6 +101,13 @@
|
|||
<div >
|
||||
<button class="btn btn-primary mt-4" data-bs-dismiss="modal" id="submitFilterButton">Add Filter</button>
|
||||
</div>
|
||||
<div class="h3 text-center text-danger" id="logHeader">Logs</div>
|
||||
<table class="table table-hover table-sm" id="logTable">
|
||||
<tbody id="logTableBody">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="h3 text-center">Outputs</div>
|
||||
<div id="filterResultsDiv">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -158,31 +160,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="LogModal" tabindex="-1" aria-labelledby="logModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="logModalLabel">-</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<table class="table table-hover table-sm" id="logTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="logTableBody">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="ImportModal" tabindex="-1" aria-labelledby="ImportModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
|
|
@ -211,7 +188,7 @@
|
|||
<script>
|
||||
var diagrams;
|
||||
function canvasInit() {
|
||||
diagrams = new Diagrams("canvas", editNode, deleteNode, logNode);
|
||||
diagrams = new Diagrams("canvas", editNode, deleteNode);
|
||||
{{ range .Filters }}
|
||||
diagrams.addNode(
|
||||
{{ .ID }},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue