add some styling to api page

This commit is contained in:
bakito
2021-08-09 22:54:39 +02:00
parent 484cf26119
commit d2a6f0aa20
3 changed files with 62 additions and 1 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

+17 -1
View File
@@ -1,6 +1,8 @@
package sync
import (
_ "embed"
"context"
"fmt"
"net"
@@ -14,6 +16,13 @@ import (
"github.com/bakito/adguardhome-sync/pkg/log"
)
var (
//go:embed index.html
index []byte
//go:embed favicon.ico
favicon []byte
)
func (w *worker) handleSync(rw http.ResponseWriter, req *http.Request) {
switch req.Method {
case http.MethodPost:
@@ -25,7 +34,13 @@ func (w *worker) handleSync(rw http.ResponseWriter, req *http.Request) {
}
func (w *worker) handleRoot(rw http.ResponseWriter, _ *http.Request) {
_, _ = rw.Write([]byte("adguardhome-sync"))
rw.Header().Set("Content-Type", "text/html")
_, _ = rw.Write(index)
}
func (w *worker) handleFavicon(rw http.ResponseWriter, _ *http.Request) {
rw.Header().Set("Content-Type", "image/x-icon")
_, _ = rw.Write(favicon)
}
func (w *worker) handleLogs(rw http.ResponseWriter, _ *http.Request) {
@@ -78,6 +93,7 @@ func (w *worker) listenAndServe() {
mux.HandleFunc("/api/v1/sync", use(w.handleSync, mw...))
mux.HandleFunc("/api/v1/logs", use(w.handleLogs, mw...))
mux.HandleFunc("/favicon.ico", use(w.handleFavicon, mw...))
mux.HandleFunc("/", use(w.handleRoot, mw...))
go func() {
+45
View File
@@ -0,0 +1,45 @@
<html>
<head>
<title>AdGuardHome sync</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#showLogs").click(function () {
$.get("/api/v1/logs", {}, function (data) {
$('#logs').html(data);
}
);
});
$("#sync").click(function () {
$.post("/api/v1/sync", {}, function (data) {
});
});
$("#showLogs").click()
});
</script>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div class="container-fluid px-4">
<div class="row">
<h1 class="display-4">AdGuardHome sync</h1>
</div>
<div class="row">
<div class="col">
<div class="btn-group" role="group">
<input class="btn btn-success" type="button" id="sync" value="Synchronize"/>
<input class="btn btn-secondary" type="button" id="showLogs" value="Update Logs"/>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<pre class="p-3 border"><code id="logs"></code></pre>
</div>
</div>
</div>
</body>
</html>