From fe445d3aefe65dd3a6b6ae64d6993540dafee656 Mon Sep 17 00:00:00 2001
From: OliverGreen27 <oliver@green.nu>
Date: Fri, 3 Feb 2023 16:50:27 +0100
Subject: [PATCH] homepage and browserpage, lab1 done, not very stylish
---
client.css | 18 +++++++++
client.html | 48 ++++++++++++++++++++---
client.js | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++-
3 files changed, 171 insertions(+), 6 deletions(-)
diff --git a/client.css b/client.css
index 5c2289b..a314e00 100644
--- a/client.css
+++ b/client.css
@@ -61,7 +61,25 @@ input[type=text]:focus {
/* Style the tab content */
.tabcontent {
display: none;
+ max-height: 100vh;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
+}
+
+.user-data-elements {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-left: 10px;
+}
+
+.data-field {
+ display: flex;
+ justify-content: left;
+}
+
+textarea {
+ overflow: hidden;
+ resize: none;
}
\ No newline at end of file
diff --git a/client.html b/client.html
index b62b733..6da8250 100644
--- a/client.html
+++ b/client.html
@@ -83,25 +83,63 @@
<div class="user-data-elements">
<div class="data-field">
- <label for="home-gender"></label>
<p id=home-gender></p>
</div>
<div class="data-field">
- <label for="home-location"></label>
<p id=home-location></p>
</div>
<div class="data-field">
- <label for="home-email"></label>
<p id=home-email></p>
</div>
</div>
+
+ <form id=board-text-form>
+ <textarea rows="5" max-rows="5" cols="50" maxlength="250" name="comment" form="board-text-form"></textarea>
+ <input type="submit" value="Post message">
+ </form>
+ <div id="message3"></div>
+
+ <button id="reloadbutton">Reload board</button>
+ <div id="home-message-board">
+
+ </div>
+
</div>
<div id="Browse" class="tabcontent">
- <h3>Browse</h3>
- <p>Here you can browse very cool stuff.</p>
+ <form id="browse-search">
+ <input type="text" id="search-value">
+ </form>
+ <div id="message5"></div>
+ <div id="browse-window" style="display:none">
+ <h3 id=browse-username>Home</h3>
+
+ <div class="user-data-elements">
+ <div class="data-field">
+ <p id=browse-gender></p>
+ </div>
+
+ <div class="data-field">
+ <p id=browse-location></p>
+ </div>
+
+ <div class="data-field">
+ <p id=browse-email></p>
+ </div>
+ </div>
+
+ <form id=browse-board-text-form>
+ <textarea rows="5" max-rows="5" cols="50" maxlength="250" name="comment" form="browse-board-text-form"></textarea>
+ <input type="submit" value="Post message">
+ </form>
+ <div id="message4"></div>
+
+ <button id="browse-reloadbutton">Reload board</button>
+ <div id="browse-message-board">
+ </div>
+ </div>
</div>
<div id="Account" class="tabcontent">
diff --git a/client.js b/client.js
index 7a77b72..39c1d37 100644
--- a/client.js
+++ b/client.js
@@ -82,8 +82,9 @@ loadProfileView = function() {
document.getElementById("pagecontent").innerHTML = document.getElementById("profileview").innerText;
document.getElementById("defaultOpen").click();
+ reloadBoard(document.getElementById("home-message-board"));
-
+ // Account page
var changepassform = document.forms["changepassform"];
changepassform.addEventListener("submit", function(event) {
event.preventDefault();
@@ -119,6 +120,114 @@ loadProfileView = function() {
document.getElementById('home-gender').innerText = userData.gender;
document.getElementById('home-location').innerText = userData.city + ', ' + userData.country;
document.getElementById('home-email').innerText = userData.email;
+
+ var postmessageform = document.forms["board-text-form"];
+ postmessageform.addEventListener("submit", function(event) {
+ event.preventDefault();
+ postmessageform["comment"].value
+ var message = serverstub.postMessage(localStorage.getItem("logintoken"), postmessageform["comment"].value);
+ var messageBox = document.getElementById("message3");
+ if(!message.success) {
+ messageBox.innerText = "There was an error with sending your message.";
+ messageBox.style.color = "red";
+ } else {
+ messageBox.innerText = message.message;
+ messageBox.style.color = "green";
+ }
+ })
+
+ document.getElementById("reloadbutton").addEventListener("click", function(event) {
+ reloadBoard(document.getElementById("home-message-board"));
+ })
+
+ // Browse page
+ var searchform = document.forms["browse-search"];
+ searchform.addEventListener("submit", function(event) {
+ event.preventDefault();
+ loadBrowseProfile();
+ })
+ var searchinput = searchform["search-value"];
+ console.log(searchinput);
+ searchinput.addEventListener("input", function(event) {
+ document.getElementById("message5").innerText = "";
+ console.log("JDIFJAIOSDJPIJ");
+ })
+
+
+}
+
+loadBrowseProfile = function() {
+ var searchEmail = document.forms["browse-search"]["search-value"].value;
+ var message = serverstub.getUserDataByEmail(localStorage.getItem("logintoken"), searchEmail)
+ if(!message.success) {
+ document.getElementById("message5").innerText = message.message;
+ document.getElementById("message5").style.color = "red";
+ return;
+ }
+ document.getElementById("message5").innerText = "";
+
+ document.getElementById("browse-window").style.display = "block";
+
+ var userData = message.data;
+ // Change the information displayed on the browsepage to the user credentials
+ document.getElementById('browse-username').innerText = userData.firstname + ' ' + userData.familyname;
+ document.getElementById('browse-gender').innerText = userData.gender;
+ document.getElementById('browse-location').innerText = userData.city + ', ' + userData.country;
+ document.getElementById('browse-email').innerText = userData.email;
+ var postmessageform = document.forms["browse-board-text-form"];
+ postmessageform.addEventListener("submit", function(event) {
+ event.preventDefault();
+ postmessageform["comment"].value
+ var message = serverstub.postMessage(localStorage.getItem("logintoken"), postmessageform["comment"].value, searchEmail);
+ var messageBox = document.getElementById("message4");
+ if(!message.success) {
+ messageBox.innerText = "There was an error with sending your message.";
+ messageBox.style.color = "red";
+ } else {
+ messageBox.innerText = message.message;
+ messageBox.style.color = "green";
+ }
+ })
+
+ document.getElementById("browse-reloadbutton").addEventListener("click", function(event) {
+ reloadBoard(document.getElementById("browse-message-board"), searchEmail);
+ })
+
+}
+
+reloadBoard = function(board, email=null) {
+
+ var boardBox = board;
+ boardBox.innerHTML = "";
+ boardBox.innerText = "";
+ var messageBoardData;
+ if(email != null) {
+ messageBoardData = serverstub.getUserMessagesByEmail(localStorage.getItem("logintoken"), email);
+ } else {
+ messageBoardData = serverstub.getUserMessagesByToken(localStorage.getItem("logintoken"));
+ }
+ console.log(messageBoardData.data);
+ console.log(boardBox);
+ for(var i = 0; i < messageBoardData.data.length; i++) {
+ var messageHTML = document.createElement('div');
+ var title = document.createElement('h2')
+ title.innerText = messageBoardData.data[i]["writer"];
+ messageHTML.appendChild(title);
+
+ var contentHTML = document.createElement('textarea');
+ contentHTML.setAttribute("readonly", "");
+ contentHTML.setAttribute("rows", "5");
+ contentHTML.setAttribute("max-rows", "5");
+ contentHTML.setAttribute("cols", "50");
+ contentHTML.innerText = messageBoardData.data[i]["content"];
+ messageHTML.appendChild(contentHTML);
+ messageHTML.appendChild(document.createElement('br'));
+
+ boardBox.appendChild(messageHTML);
+ boardBox.style.backgroundColor = "white";
+ boardBox.style.overflowY= "scroll";
+ boardBox.style.maxHeight = "45vh";
+ }
}
inputValidation = function(formID) {
--
GitLab