remove this stuff later, atak chat testing

Signed-off-by: faradaym <[email protected]>
Project-Owl · Oct 3, 2024 · b486858 · b486858
1 parent 09d7f2f
commit b486858
Show file tree

Hide file tree

Showing 4 changed files with 276 additions and 0 deletions.
diff --git a/src/DuckNet.cpp b/src/DuckNet.cpp
@@ -52,6 +52,9 @@ int DuckNet::setupWebServer(bool createCaptivePortal, std::string html) {
   webServer.on("/main", HTTP_GET, [&](AsyncWebServerRequest* request) {
     request->send(200, "text/html", MAIN_page);
   });
+  webServer.on("/atakChatPage", HTTP_GET, [&](AsyncWebServerRequest* request) {
+    request->send(200, "text/html", chat_page);
+  });
 
   webServer.on("/papamain", HTTP_GET, [&](AsyncWebServerRequest* request) {
     request->send(200, "text/html", papa_page);

diff --git a/src/include/DuckNet.h b/src/include/DuckNet.h
@@ -46,6 +46,7 @@
 #include "index.h"
 #include "wifiCredentials.h"
 #include "controlPanel.h"
+#include "chatPage.h"
 #include "cdpHome.h"
 #include "papaHome.h"
 

diff --git a/src/include/cdpHome.h b/src/include/cdpHome.h
@@ -15,6 +15,7 @@ const char home_page[] PROGMEM = R"=====(
 
     <a id="message-button" href="/main">Send A Message &#x1F4E9</a>
     <a href="/controlpanel">Control Panel &#x2699</a>
+    <a href="/atakChatPage">ATAK CHAT &#x2699</a>
 </div>
 </body>
 </html>

diff --git a/src/include/chatPage.h b/src/include/chatPage.h
@@ -0,0 +1,271 @@
+#ifndef CHAT_PAGE_H
+#define CHAT_PAGE_H
+
+const char chat_page[] PROGMEM = R"=====(
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Global Chat</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+<div class="header">
+    <h2>Global Chat</h2>
+    <a href="/" class="home-link">&#x1F3E0;</a>
+</div>
+
+
+<div id="message-container"></div>
+<div class="chat-bar">
+    <div id="form">
+        <form>
+            <input type="text" name="chatMessage" id="chatMessage" placeholder="Your Message"></input>
+            <button type="button" id="sendBtn" class="sendBtn">Send</button>
+            <p id="makeshiftErrorOutput" class="hidden"></p>
+        </form>
+    </div>
+</div>
+
+<script>
+    var sduid = "you";
+    const username = sessionStorage.getItem("username");
+    function displayNewMessage(newMessage, sent) {
+        var card = document.createElement("div");
+        if (sent) {
+            card.classList.add("sent-message-card");
+            // card.classList.add("acked-message");
+        } else {
+            card.classList.add("received-message-card");
+        }
+        card.innerHTML = newMessage.body.body + '</p><span class="duid">FROM DUCKID: '
+        + newMessage.sduid + '</span></p><span class="name">' 
+        + newMessage.body.username + '</span>';
+
+        document.getElementById('message-container').prepend(card);
+    }
+
+    function chatHistoryListener() {
+        var data = JSON.parse(this.responseText);
+        clearMessages();
+        data.posts.forEach(item => {
+            let sent = sduid == item.sduid ? true : false;
+            displayNewMessage(item, sent);
+        });
+    }
+
+    function startChatInterval(){
+        setInterval(function(){
+            requestChatHistory();
+        }, 20000);
+    }
+
+    function sduidListener() {
+        sduid = this.responseText;
+    }
+
+    function requestChatHistory() {
+        var req = new XMLHttpRequest();
+        req.addEventListener("load", chatHistoryListener);
+        req.addEventListener("error", errorListener);
+        req.open("GET", "/atakHistory");
+        req.send();
+    }
+
+    function clearMessages(){
+         document.getElementById('message-container').innerHTML = '';
+    }
+
+    function requestSduid() {
+        var req = new XMLHttpRequest();
+        req.addEventListener("load", sduidListener);
+        req.open("GET", "/id");
+        req.send();
+    }
+
+    function requestResend(resendMuid){
+        console.log('requested resend');
+        // let params = new URLSearchParams("");
+        // params.append("resendMuid", resendMuid);
+        // var req = new XMLHttpRequest();
+        // req.addEventListener("load", loadListener);
+        // req.addEventListener("error", errorListener);
+        // req.open("POST", "/requestPublicMessageResend.json?" + params.toString());
+        // req.send();
+    }
+
+
+    function loadListener() {
+        var errEl = document.getElementById('makeshiftErrorOutput');
+        if (!errEl.classList.toString().includes("hidden")) {
+            errEl.innerHTML = '';
+            errEl.classList.add("hidden");
+        }
+    };
+
+    function errorListener() {
+        var errorMessage = 'There was an error sending the message. Please try again.';
+        console.log(errorMessage);
+        var errEl = document.getElementById('makeshiftErrorOutput');
+        errEl.innerHTML = errorMessage;
+        errEl.classList.remove("hidden");
+    };
+
+    function sendMessage() {
+        let messageBody = document.getElementById('chatMessage').value;
+        let message = JSON.stringify({
+            body: messageBody,
+            username: username
+        });
+        let messageParams = new URLSearchParams("");
+        messageParams.append("chatMessage", message);
+        var req = new XMLHttpRequest();
+        req.addEventListener("load", loadListener);
+        req.addEventListener("error", errorListener);
+        req.open("POST", "/sendAtakMessage.json?" + messageParams.toString());
+        req.send();
+        displayNewMessage({message: {body: messageBody, username: username}, sduid: sduid}, true);
+
+        document.getElementById('chatMessage').value = "";
+    }
+
+    if (!!window.EventSource) {
+        var source = new EventSource('/events');
+
+        source.addEventListener('open', function (e) {
+            console.log("Events Connected");
+        }, false);
+
+        source.addEventListener('error', function (e) {
+            if (e.target.readyState != EventSource.OPEN) {
+                console.log("Events Disconnected");
+            }
+        }, false);
+        source.addEventListener('refreshPage', function (data) {
+            location.reload();
+        }, false);
+
+    }
+    document.getElementById('sendBtn').addEventListener('click', sendMessage);
+
+    requestSduid();
+    requestChatHistory();
+    startChatInterval();
+    document.getElementById("chatMessage").focus();
+</script>
+</body>
+</html>
+<style>
+
+
+    .header {
+        position: relative;
+        text-align: center;
+    }
+
+    .home-link {
+        position: absolute;
+        right: 20px; /* Adjust this value as needed */
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .received-message-card {
+        border-radius: 10px;
+        background-color: #F0EEF7;
+        padding: 0 3vw 1vh;
+        margin: 2vw;
+        overflow: auto;
+        width: 70%;
+        padding-top: 5px;
+    }
+
+    .sent-message-card {
+        border-radius: 10px;
+        background-color: #ffff004f;
+        padding: 5px 3vw 1vh;
+        margin: 2vw;
+        overflow: auto;
+        width: 70%;
+        float: right;
+    }
+
+    #message-container {
+        width: 95%;
+        margin: 10vh auto;
+    }
+
+    .name {
+        margin-right: 3vw;
+        float: right;
+        color: gray;
+        font-size: 0.8em;
+    }
+
+    .duid {
+        float: left;
+        color: gray;
+        font-size: 0.8em;
+    }
+
+    #title {
+        font-size: 1.2em;
+        top: 20%;
+        position: relative;
+        font-weight: bold;
+    }
+
+    .title-bar {
+        background-color: black;
+        box-shadow: 0 2px 3px gray;
+        height: 35px;
+        position: fixed;
+        top: 0%;
+        width: 100%;
+        color: white;
+        left: 0%;
+        text-align: center;
+    }
+
+    .chat-bar {
+        background-color: #E1E1E1;
+        height: 50px;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        padding: 16px;
+        left: 0%;
+    }
+
+    #chatMessage {
+        width: 60%;
+        border: 1px solid #2A2C49;
+        border-radius: 12px;
+        padding: 0.5em;
+    }
+
+    #sendBtn {
+        background-color: #2A2C49;
+        border-radius: 12px;
+        border-style: none;
+        height: 34px;
+        width: 100px;
+        float: right;
+        margin-right: 32px;
+        color: white;
+    }
+
+    body {
+        font-family: sans-serif;
+        font-size: .9em;
+    }
+    .acked-message{
+        background-color: #c1ff91 !important;
+    }
+    .resend-message{
+        background-color: rgba(255, 0, 20, .35) !important;
+    }
+
+</style>
+)=====";
+#endif