Created frontend

2024-11-22 09:16:46 +00:00 · 2020-02-14 19:52:14 +01:00 · 2020-02-14 19:52:14 +01:00 · a132a99fbe
commit a132a99fbe
parent a61e820b5e
2 changed files with 139 additions and 0 deletions
--- a/src/main/resources/public/index.html
+++ b/src/main/resources/public/index.html
@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Url</title>
+
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"
+          integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47" crossorigin="anonymous">
+    <script src="js/main.js"></script>
+
+    <style>
+        body {
+            background: #333333;
+            color: #fafafa;
+        }
+
+        label, legend, a {
+            color: #fafafa !important;
+        }
+
+        .container {
+            max-width: 950px;
+            margin: 20px auto auto;
+        }
+
+        table {
+            width: 100%;
+        }
+
+
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <form class="pure-form pure-form-aligned" name="new-url-form">
+        <fieldset>
+            <legend>Add new URL</legend>
+            <div class="pure-control-group">
+                <label for="longUrl">Long URL</label>
+                <input type="text" name="longUrl" id="longUrl" placeholder="Long URL" required/>
+            </div>
+            <div class="pure-control-group">
+                <label for="shortUrl">Short URL (Optional)</label>
+                <input type="text" name="shortUrl" id="shortUrl" placeholder="Short URL (optional)"/>
+            </div>
+            <div class="pure-controls">
+                <button class="pure-button pure-button-primary">Submit</button>
+            </div>
+        </fieldset>
+
+    </form>
+
+    <table class="pure-table">
+        <thead>
+        <tr>
+            <td>Long URL</td>
+            <td>Short url</td>
+        </tr>
+        </thead>
+        <tbody id="url-table">
+
+        </tbody>
+    </table>
+</div>
+
+</body>
+</html>
--- a/src/main/resources/public/js/main.js
+++ b/src/main/resources/public/js/main.js
@ -0,0 +1,68 @@
+const refreshData = async () => {
+    let data = await fetch("/all").then(res => res.text());
+    data = data
+        .split("\n")
+        .filter(line => line !== "")
+        .map(line => line.split(","))
+        .map(arr => ({
+            long: arr[1],
+            short: arr[0]
+        }));
+
+    displayData(data);
+};
+
+const displayData = (data) => {
+    const table = document.querySelector("#url-table");
+    table.innerHTML = ''; // Clear
+    data.map(TR)
+        .forEach(tr => table.appendChild(tr));
+};
+
+const TR = (row) => {
+    const tr = document.createElement("tr");
+    const longTD = TD(A(row.long));
+    const shortTD = TD(A_INT(row.short));
+
+    tr.appendChild(longTD);
+    tr.appendChild(shortTD);
+
+    return tr;
+};
+
+const A = (s) => `<a href='${s}'>${s}</a>`;
+const A_INT = (s) => `<a href='/${s}'>${window.location.host}/${s}</a>`;
+
+const TD = (s) => {
+    const td = document.createElement("td");
+    td.innerHTML = s;
+    return td;
+};
+
+const submitForm = () => {
+    const form = document.forms.namedItem("new-url-form");
+    const longUrl = form.elements["longUrl"];
+    const shortUrl = form.elements["shortUrl"];
+
+    const url = `/new?long=${longUrl.value}&short=${shortUrl.value}`;
+
+    fetch(url, {
+        method: "POST"
+    })
+        .then(_ => {
+            longUrl.value = "";
+            shortUrl.value = "";
+
+            refreshData();
+        });
+
+};
+
+(async () => {
+    await refreshData();
+    const form = document.forms.namedItem("new-url-form");
+    form.onsubmit = e => {
+        e.preventDefault();
+        submitForm();
+    }
+})();