Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated UI landing page #119

Closed
wants to merge 3 commits into from
Closed

Updated UI landing page #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
52dc000
new landing page for web UI
eljeko Dec 13, 2023
bfcb298
UI fix
eljeko Dec 13, 2023
a360037
Merge remote-tracking branch 'upstream/main'
eljeko Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 25 additions & 184 deletions pkg/cmd/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,203 +9,44 @@
<link href="/bs/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!--link href="/stylesheets/main.css?s" rel="stylesheet" crossorigin="anonymous"-->
</head>

<script src="/js/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="/bs/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="/js/font-awesome.js" crossorigin="anonymous"></script>

<body class="p-0 m-0 border-3 bd-example m-4 border-0">

<div>
<img src="/images/jr_logo.png" class="rounded float-left" alt="JR"><h1 class="p-1 m-2 border-3">Web Console</h1>
</div>
<img src="/images/jr_logo.png" class="rounded float-left" alt="JR">
<h1 class="p-1 m-2 border-3">Web UI</h1>
</div>
<br>
<div id="infobox" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Emitter info</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div id="infobox_text" class="modal-body">
<p>Modal body text goes here.</p>

<!--div class="d-flex justify-content-center m-2"-->
<div class="d-flex justify-content-center p-2">

<div class="card m-2" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"><i class="fa-solid fa-rocket"></i> Emitters web UI</h5>
<p class="card-text">First (alpha) version to manage the configured JR Emitters</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<div class="d-flex justify-content-center m-2">
<a href="/emitters.html" class="btn btn-primary">Go to Emitters</a>
</div>
</div>
</div>
</div>

<div class="list-group" id="emitters">

<div class="card m-2" style="width: 18rem;">

<div class="card-body">
<h5 class="card-title"><i class="fa-solid fa-edit"></i> Template Editor</h5>
<p class="card-text">The web UI JR template editor</p>
</div>
<div class="d-flex justify-content-center m-2">
<a href="/templatedev.html" class="btn btn-primary">Go to editor</a>
</div>
</div>
</div>

<script>
// Fetch JSON data from the HTTP endpoint
fetch('/emitters')

.then(response => response.json())

.then(data => {
// Access the JSON data and create a list

const emitters_list = document.getElementById('emitters');

data.forEach(item => {
var an_emitter_html = "";

an_emitter_html +=

"<div class='card'>" +
" <div class='card-header' id='heading" + item.Name + "'>" +
" <div class='row'>" +//row
" <div class='col align-self-center'>" +//col
" <h5 class='mb-0 '>" +
" <button class='btn btn-link collapsed' data-toggle='collapse' data-target='#collapse" + item.Name + "' aria-expanded='false' aria-controls='collapse" + item.Name + "'>" +
" " + item.Name + "" +
" </button>" +
" </h5>" +
" </div>" +//col
" <div class='col-auto'>" +//col
" <div class='m-1 btn-toolbar text-center well'>" +
" <button type='button' class='m-2 btn btn-success btn-sm' onclick=\"startEmitter('" + item.Name + "')\">" +
" Start" +
" </button>" +
" <button type='button' class='m-2 btn-danger btn-sm' onclick=\"stopEmitter('" + item.Name + "')\">" +
" Stop" +
" </button>" +
" <button type='button' class='m-2 btn-warning btn-sm' onclick=\"pauseEmitter('" + item.Name + "')\">" +
" Pause" +
" </button>" +
" <button type='button' class='m-2 btn-info btn-sm' onclick=\"statusEmitter('" + item.Name + "')\">" +
" Status" +
" </button>" +
" </div>" +
" </div>" +//row
" </div>" +//col

" </div>" +
" <div id='collapse" + item.Name + "' class='collapse' aria-labelledby='heading" + item.Name + "' data-parent='#emitters'>" +
" <div class='card-body'>";

//Emitters details table:
an_emitter_html +=
"<table class='table table-striped w-25 p-3'>" +
" <thead class='thead-dark'>" +
" <tr>" +
" <th scope='col'>Key</th>" +
" <th scope='col'>Value</th>" +
" </tr>" +
" </thead>" +
"<tbody>";

for (var prop in item) {
if (Object.prototype.hasOwnProperty.call(item, prop) && (prop !== "KTpl") && (prop !== "VTpl")) {
an_emitter_html +=
" <tr>" +
" <th scope='row'>" + prop + "</th>" +
" <td>" + item[prop] + "</td>" +
" </tr>";
} else {
an_emitter_html +=
" <tr>" +
" <th scope='row'>" + prop + "</th>" +
" <td> Context=" + item[prop].Context + "<br> Template=" + item[prop].Template + "</td>" +
" </tr>";
}
}
an_emitter_html +=
"</table>";

an_emitter_html +=
" </div>" +
" </div>" +

"</div>";

emitters_list.innerHTML += an_emitter_html;

});
})
.catch(error => console.log('Error:', error));

function startEmitter(name) {
fetch('/emitters/' + name + '/start')

.then(response => response.json())

.then(data => {
$('#infobox').modal()
$('#infobox_text').empty();
text_div = document.createElement( "div" );
for (var prop in data) {
text_div.innerHTML+= prop + "="+ data[prop];
}
$('#infobox_text').append(text_div);
});


}

function stopEmitter(name) {
fetch('/emitters/' + name + '/stop')

.then(response => response.json())

.then(data => {
$('#infobox').modal()
$('#infobox_text').empty();
text_div = document.createElement( "div" );
for (var prop in data) {
text_div.innerHTML+= prop + "="+ data[prop];
}
$('#infobox_text').append(text_div);
});


}

function pauseEmitter(name) {
fetch('/emitters/' + name + '/pause')

.then(response => response.json())

.then(data => {
$('#infobox').modal()
$('#infobox_text').empty();
text_div = document.createElement( "div" );
for (var prop in data) {
text_div.innerHTML+= prop + "="+ data[prop];
}
$('#infobox_text').append(text_div);
});


}

function statusEmitter(name) {
fetch('/emitters/' + name + '/status')

.then(response => response.json())

.then(data => {
$('#infobox').modal()
$('#infobox_text').empty();
text_div = document.createElement( "div" );
for (var prop in data) {
text_div.innerHTML+= prop + "="+ data[prop];
}
$('#infobox_text').append(text_div);
});


}



</script>

</body>

<!-- localhost:7482/emitters -->
Expand Down
15 changes: 13 additions & 2 deletions pkg/cmd/html/templatedev.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,8 @@
<body class="p-0 m-0 border-3 bd-example m-4 border-0" onload="loadLastStatus()">

<div>
<img src="/images/jr_logo.png" class="rounded float-left" alt="JR">
<h1 class="p-1 m-2 border-3">Template editor</h1>
<img src="/images/jr_logo.png" class="rounded float-left mr-3" alt="JR">
<h1 class="p-1 border-3">Template editor</h1>
</div>
<br>
<div id="infobox" class="modal" tabindex="-1" role="dialog">
Expand Down Expand Up @@ -162,6 +162,11 @@ <h5 class="modal-title">Emitter info</h5>
<code class="language-json" id="templaterendered"></code>
</pre>
</div>
<div class="d-flex justify-content-center p-2">
<div class="d-flex justify-content-center m-2">
<a href="/index.html" class="btn btn-primary">Home</a>
</div>
</div>
</div>
<!-- Function tab panel -->
<div class="tab-pane " id="nav-functions" role="tabpanel" aria-labelledby="nav-functions-tab">
Expand All @@ -172,6 +177,11 @@ <h5 class="modal-title">Emitter info</h5>
<div>
<div id="functionslist"></div>
</div>
<div class="fixed-bottom d-flex justify-content-center p-2">
<div class="d-flex justify-content-center m-2">
<a href="/index.html" class="btn btn-primary">Home</a>
</div>
</div>
</div>
</div>

Expand All @@ -180,6 +190,7 @@ <h5 class="modal-title">Emitter info</h5>
</div>



<script>

function filterFunctions() {
Expand Down
7 changes: 7 additions & 0 deletions pkg/cmd/server.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@
//go:embed html/index.html
var index_html string

//go:embed html/emitters.html

Check failure on line 28 in pkg/cmd/server.go

View workflow job for this annotation

GitHub Actions / build 

pattern html/emitters.html: no matching files found

Check failure on line 28 in pkg/cmd/server.go

View workflow job for this annotation

GitHub Actions / build 

pattern html/emitters.html: no matching files found
var emitters_html string

//go:embed html/templatedev.html
var templatedev_html string

Expand Down Expand Up @@ -139,6 +142,10 @@
w.Write([]byte(index_html))
})

router.Get("/emitters.html", func(w http.ResponseWriter, r *http.Request) {
w.Write([]byte(emitters_html))
})

router.Get("/templatedev.html", func(w http.ResponseWriter, r *http.Request) {
w.Write([]byte(templatedev_html))
})
Expand Down
Loading