go-watch/web/templates/watch/edit.html

230 lines
No EOL
10 KiB
HTML

{{define "head"}}
<script src="{{.urlPrefix}}static/diagram.js"></script>
<script src="{{.urlPrefix}}static/edit.js"></script>
{{ end }}
{{define "content"}}
<div class="canvas_parent">
<canvas id="canvas">
</canvas>
</div>
{{ end }}
{{define "title"}}
GoWatch Edit {{ .Watch.Name }}
{{end}}
{{ define "left" }}
<table role="presentation">
<tr>
<td>
<button type="button" id="filterButton" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#FilterModal">
Add Filter
</button>
</td>
<td>
<button type="button" id="filterButton" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#WatchModal">
Edit Watch
</button>
</td>
<td>
<button type="button" id="saveButtonMain" class="btn btn-primary btn-sm">
Save Watch
</button>
</td>
<td>
<a href="{{.urlPrefix}}watch/export/{{ .Watch.ID }}" class="btn btn-success btn-sm">
Export Watch
</a>
</td>
<td>
<button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#ImportModal">
Import Watch
</button>
</td>
<td>
<button type="button" id="clearCacheButton" class="btn btn-info btn-sm">
Clear Cache
</button>
</td>
<td>
<a href="{{.urlPrefix}}watch/view/{{ .Watch.ID }}" class="btn btn-outline-secondary btn-sm">
View Watch
</a>
</td>
</tr>
</table>
<div class="modal fade" id="FilterModal" tabindex="-1" aria-labelledby="FilterModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="FilterModalLabel">Add Filter</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div>
<form action="{{.urlPrefix}}filter/create" method="post">
<div class="mb-3 m-3 row">
<label for="nameInput" class="col-sm-2 col-form-label">Name:</label>
<div class="col-sm-10 p-2">
<input type="text" class="form-control" name="filter_name" id="nameInput" placeholder="Name">
</div>
<label for="typeInput" class="col-sm-2 col-form-label">Type:</label>
<div class="col-sm-10 p-2">
<select id="typeInput" class="form-control" name="type">
<option value="gurl">Get URL</option>
<option value="gurls">Get URLs</option>
<option value="xpath" selected="true">XPath</option>
<option value="css">CSS</option>
<option value="json">JSON</option>
<option value="replace">Replace</option>
<option value="match">Match</option>
<option value="substring">Substring</option>
<option value="subset">Subset</option>
<option value="contains">Contains</option>
<option value="unique">Unique</option>
<option value="math">Math</option>
<option value="store">Store</option>
<option value="condition">Condition</option>
<option value="expect">Expect</option>
<option value="disable">Disable Schedules</option>
<option value="notify">Notify</option>
<option value="cron">Schedule</option>
<option value="brow">Browserless</option>
<option value="lua">Lua</option>
</select>
</div>
<label for="var1" id="var1Label" class="col-sm-2 col-form-label">XPath:</label>
<div class="col-sm-10 p-2" id="var1Div">
<input type="text" class="form-control" name="var1" id="var1Input" placeholder="//a[@class='price']">
</div>
<label for="var2" id="var2Label" class="col-sm-2 col-form-label">-</label>
<div class="col-sm-10 p-2" id="var2Div">
<input type="text" class="form-control" name="var2" id="var2Input" placeholder="" disabled>
</div>
<div id="var3Div">
</div>
</div>
</form>
<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" role="presentation" id="logTable">
<tbody id="logTableBody">
</tbody>
</table>
<div class="h3 text-center">Outputs</div>
<div id="filterResultsDiv">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="WatchModal" tabindex="-1" aria-labelledby="WatchModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="WatchModalLabel">Watch - {{ .Watch.Name }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div>
<form action="{{.urlPrefix}}watch/update" id="saveWatchForm" method="post">
<div class="mb-3 m-3 row">
<input type="hidden" id="watch_id" name="watch_id" value="{{ .Watch.ID }}">
<label for="watchNameInput" class="col-sm-2 col-form-label">Name:</label>
<div class="col-sm-10 p-2">
<input type="text" class="form-control" id="watchNameInput" name="watch_name" value="{{ .Watch.Name }}" placeholder="Name">
</div>
<input type="hidden" id="filtersInput" name="filters" value="">
<input type="hidden" id="connectionsInput" name="connections" value="">
</div>
</form>
<button class="btn btn-primary mt-4 float-start" id="saveButtonModal" data-bs-dismiss="modal" id="submitWatchButton">Save</button>
<form action="{{.urlPrefix}}watch/delete" method="post">
<input type="hidden" name="watch_id" value="{{ .Watch.ID }}">
<button class="btn btn-danger mt-4 float-end" data-bs-dismiss="modal" id="deleteFilterButton">Delete Watch</button>
</form>
</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">
<div class="modal-header">
<h5 class="modal-title" id="ImportModalLabel">Import</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="{{.urlPrefix}}watch/import/{{ .Watch.ID }}" enctype="multipart/form-data" method="post" class="row g-3">
<div class="mb-3">
<label for="json" class="form-label">Upload JSON to import</label>
<input class="form-control" type="file" id="json" name="json">
<select class="form-select form-select-lg mb-3 mt-2" name="type">
<option value="clear" selected>Clear filters</option>
<option value="add">Add to filters</option>
</select>
<input type="hidden" id="offset_x" name="offset_x" value="0">
<input type="hidden" id="offset_y" name="offset_y" value="0">
<div class="col-auto mt-3">
<button type="submit" class="btn btn-primary mb-3">Import</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{{ end }}
{{define "scripts"}}
<script>
var diagrams;
function canvasInit() {
diagrams = new Diagrams("canvas", editNode, deleteNode);
{{ range .Filters }}
diagrams.addNode(
{{ .ID }},
{{ .X }},
{{ .Y }},
"{{ .Name }}",
{
type: "{{ .Type }}",
var1: "{{ .Var1 }}",
var2: "{{ .Var2 }}",
},
[
{{ range .Results }}
'{{ . }}',
{{ end }}
],
[
{{ range.Logs }}
'{{ . }}',
{{ end }}
]
);
{{ end }}
{{ range .Connections }}
diagrams.addConnectionById({{ .OutputID }}, {{ .InputID }});
{{ end }}
diagrams.fillParent();
}
document.addEventListener('DOMContentLoaded', canvasInit, false);
var notifiers = {{ .Notifiers }};
</script>
{{ end }}