added url on/off and css styles (#66)
* added basic styles css
* added toggle on/off for URL
* added loggedinuser check
* minor changes
* minor changes v2
* minor changes v3
* chore: stylistic fixes
---------
Co-authored-by: Giorgi Lekveishvili <lekva@gl-mbp-m1-max.local>
diff --git a/apps/url-shortener/index.html b/apps/url-shortener/index.html
index 15eee68..5861daf 100644
--- a/apps/url-shortener/index.html
+++ b/apps/url-shortener/index.html
@@ -1,42 +1,59 @@
<!DOCTYPE html>
<html lang="en">
-
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Shortener</title>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
</head>
-
<body>
<h1>URL Shortener</h1>
-
<form action="/" method="post">
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
-
<label for="custom">Custom Name (optional):</label>
<input type="text" id="custom" name="custom">
-
<button type="submit">Shorten URL</button>
</form>
-
<h2>Named Addresses:</h2>
<table>
<tr>
<th>Name</th>
<th>Address</th>
- <th>Owner</th>
<th>Active</th>
</tr>
- {{ range .NamedAddresses }}
+ {{- range .NamedAddresses -}}
<tr>
<td><a href="{{ .Name }}" target="_blank">{{ .Name }}</a></td>
<td>{{ .Address }}</td>
- <td>{{ .OwnerId }}</td>
- <td>{{ .Active }}</td>
+ <td>
+ <input type="checkbox" role="switch" {{ if .Active }}checked{{ end }} onclick="toggle('{{ .Name }}', {{ not .Active }});">
+ </td>
</tr>
- {{ end }}
+ {{- end -}}
</table>
</body>
-
+<script type="application/javascript">
+ function toggle(name, status) {
+ const data = {
+ "name": name,
+ "active": status,
+ };
+ fetch("/api/update/", {
+ method: "POST",
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(data),
+ })
+ .then(response => {
+ if (response.ok) {
+ window.location.reload();
+ }
+ })
+ .catch((error) => {
+ console.error('Error:', error);
+ });
+ }
+</script>
</html>