Improved Design and added on site ChatLog Request per ID

AunaCraft · Mar 16, 2022 · d0d685a · d0d685a
1 parent c851df1
commit d0d685a
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 14 deletions.
diff --git a/API.js b/API.js
@@ -1,12 +1,18 @@
+const apiAddress = "dev.aunacraft.de:8082"
+
 async function load(logID) {
-    const response = await fetch("http://45.142.114.107:8082/chatlog/v1/get/" + logID + "/")
+    const response = await fetch("http://" + apiAddress + "/chatlog/v1/get/" + logID + "/")
+
+    console.log("1 - " + logID)
 
     if(response.ok) {
         const json = await response.json();
         const messages = json["messages"]
 
         const table = document.getElementById('table');
 
+        console.log(2)
+
         for (let i = 0; i < messages.length; i++) {
             const messageObject = messages[i]
             const uuid = messageObject["uuid"]
@@ -25,12 +31,29 @@ async function load(logID) {
 
         }
     }else {
-        setState(`<h1>Error</h1>
-         <h3>${response.status}</h3>`
+        var errorMessage = "Response-Code: " + response.status;
+        if(response.status == 404){
+            errorMessage = "Requested Log does not exist"
+        }
+        setState(`<h1 style="color: #dd0027">Error</h1>
+         <h3>${errorMessage}</h3>`
         )
     }
 }
 
+function resetTable(){
+    const table = document.getElementById('table');
+    table.innerHTML = ""
+    setState("")
+}
+
+document.getElementById("searchButton").addEventListener("click", function () {
+    const logID = document.querySelector("input").value;
+    console.log(logID)
+    resetTable()
+    load(logID)
+})
+
 function escapeHtml(raw) {
     return raw.replace(/[&<>"']/g, function onReplace(match) {
         return '&#' + match.charCodeAt(0) + ';';
@@ -47,7 +70,6 @@ const logID = url.searchParams.get("logID")
 if(logID != null) {
     load(logID)
 }else {
-
     setState(
         `<h1>Invalid Request</h1>
          <h3>URL-Parameter logID is missing</h3>`

diff --git a/config.json b/config.json
@@ -0,0 +1,5 @@
+{
+  "url": "",
+  "apiAddress": "",
+  "siteAddress": ""
+}
diff --git a/index.html b/index.html
@@ -8,14 +8,21 @@
 <body>
 
 <div id="main">
+    <div id="background"></div>
+    <div id="foreground"></div>
     <div id="header">
         <center>
-            <img src="assets/server-icon.png">
-            <a class="title">ChatLog</a>
+            <img id="logo" src="assets/server-icon.png">
+            <p>
+            <input type="text" id="search" placeholder="Enter Log ID...">
+                <input type="submit" id="searchButton" name="" value="Request Log">
         </center>
+        <hr color="#4f4f4f">
     </div>
-    <div id="state">
-    </div>
+    <center>
+        <div id="state">
+        </div>
+    </center>
     <table id="chat" cellspacing="0" cellpadding="4">
         <tr>
             <th><span>Head</span></th>

diff --git a/style.css b/style.css
@@ -1,18 +1,24 @@
 
 body {
-    background-image: linear-gradient(90deg, #002766 0%, #03b1fc 30%, #2003fc 90%);
+    background-color: #383838;
 }
 
-#foreground{
-    backdrop-filter: blur(10px);
+.bg{
+    filter: blur(10px);
 }
 
 .title{
-    font-family: "Arial Black";
-    font-size: 800%;
+    font-family: Arial;
+    font-size: 400%;
     color: #03b1fc;
 }
 
+#logo{
+    width: 7%;
+    height: 7%;
+    padding: 0% 0% 0% 1%;
+}
+
 #chat {
     font-family: Arial, Helvetica, sans-serif;
     width: 100%;
@@ -27,18 +33,57 @@ body {
 }
 
 #head {
+    border: 0;
     text-align: center;
     border-radius: 10px 0px 0px 10px;
     width: 6%;
 }
 
 #time {
+    border: 0;
     text-align: right;
     width: 15%;
     border-radius: 0px 10px 10px 0px;
     color: #8a8a8a;
 }
 
+#header input[type = "submit"]{
+    border:0;
+    background: none;
+    display: block;
+    margin: 20px auto;
+    text-align: center;
+    border: 2px solid #7b797b;
+    padding: 14px 40px;
+    outline: none;
+    color: white;
+    border-radius: 24px;
+    transition: 0.25s;
+    cursor: pointer;
+}
+
+#header input[type = "submit"]:hover{
+    background: #6a6b6e;
+}
+
+#header input[type = "text"]{
+    border:0;
+    background: none;
+    display: block;
+    margin: 20px auto;
+    text-align: center;
+    border: 2px solid #3498db;
+    padding: 14px 10px;
+    width: 200px;
+    outline: none;
+    color: white;
+    border-radius: 24px;
+    transition: 0.25s;
+}
+#header input[type = "text"]:focus{
+    border-color: #355f7c;
+}
+
 #name {
     text-align: left;
     width: 7%;
@@ -53,11 +98,17 @@ body {
     font-family: "Segoe UI";
 }
 
+
+tr:nth-child(even) {
+    background-image: linear-gradient(90deg, #003193 0%, #0060ce 6%, #0c0064 89%);
+}
+
 a:link, a:visited {
     text-decoration: none;
 }
 
 #message {
+    border: 0;
     text-align: left;
     width: 70%;
 }
@@ -72,7 +123,9 @@ span {
 
 #table {
     background-color: dimgrey;
-    border-radius: 40px;
+    padding-left: 20%;
+    padding-right: 80%;
+    background-image: linear-gradient(90deg, #003193 0%, #0060ce 5%, #0c0064 88%);
 }
 
 h1, h3 {