Skip to content

Commit

Permalink
Updated notes box look and created some utility functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@klpulliam-37
klpulliam-37 committed May 1, 2023
1 parent 23f25b2 commit 87b8c6e
Show file tree
Hide file tree
Showing 7 changed files with 185 additions and 157 deletions.
87 changes: 49 additions & 38 deletions UserInterface/api/api.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,44 @@
import * as Utils from "../js/utilities.js";

const url = "http://127.0.0.1:5000"
const token = `Bearer ${sessionStorage.getItem('access_token')}`;



export class GreenhouseProxy {
constructor() {}

parseJwt (token) {
var base64Url = token.split('.')[1];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));

return JSON.parse(jsonPayload);
}

getJwt(obj) {
return JSON.parse(obj)["access_token"];
constructor() {
// this.debugMode = false;

// const optionsPost = {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(user)
// }

// const options = {
// method: 'PUT',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(dateObj)
// }

// const optionsPatch = {
// method: 'PATCH',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(userData)
// }

// const optionsDelete = {
// method: 'DELETE',
// headers: {
// 'Authorization': token
// }
// }
}

// ------------------USERS------------------
Expand All @@ -38,21 +61,6 @@ export class GreenhouseProxy {
}
}

Login() {
fetch(`${url}/login`, this.o_login)
.then((res) => {
if (res.ok) {
console.log("Login Successful");
// console.log(res.body);
res.text()
.then((result) => sessionStorage.setItem('jwt', this.getJwt(result)));
// console.log(res);
}else{
console.log("Invalid Login");
}
})
}

async login(loginObj) {
const options = {
method: 'POST',
Expand Down Expand Up @@ -257,14 +265,17 @@ export class GreenhouseProxy {

try {
let response = await fetch(`${url}/rooms/${roomID}/messages`, options);
return await response.json();
if (response.ok) {
let data = await response.json();
return data;
}
} catch (error) {
console.log(error);
}
}

// Create new room message by room id
createRoomMessage(roomID, userID, message) {
async createRoomMessage(roomID, userID, message) {
const _body = {
"user_id": userID,
"body": message
Expand All @@ -278,14 +289,14 @@ export class GreenhouseProxy {
body: JSON.stringify(_body)
}

fetch(`${url}/rooms/${roomID}/messages`, options)
.then((res) => {
if (res.ok) {
console.log("Message Successfully Created");
}else{
console.log(res);
try {
let response = await fetch(`${url}/rooms/${roomID}/messages`, options);
if (response.ok) {
console.log("Messages Created Successfully");
}
});
} catch (error) {
console.log(error);
}
}

// Update a message by message id
Expand Down
1 change: 1 addition & 0 deletions UserInterface/js/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ function updateChart(dates, data, key) {
},
options: {
animation: false,
aspectRatio: 1,
scales: {
y: {
beginAtZero: false,
Expand Down
12 changes: 10 additions & 2 deletions UserInterface/js/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@ const room_grid = document.getElementById('room-grid');
const main = document.createElement('main');
room_grid.append(main);

async function renderRooms() {
function resetRoomsList() {
while(main.firstChild) {
main.removeChild(main.lastChild);
}
}

export async function renderRoomCards() {
resetRoomsList();

const rooms = await proxy.getRooms();
// console.log(rooms);

Expand Down Expand Up @@ -132,5 +140,5 @@ function renderNewRoomCard() {
main.append(card);
}

renderRooms();
renderRoomCards();
// renderNewRoomCard();
10 changes: 4 additions & 6 deletions UserInterface/js/modal.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { GreenhouseProxy } from "../api/api.js";
import { renderRoomCards } from "./home.js";

const proxy = new GreenhouseProxy();
const usersButton = document.getElementById('users-modal-trigger');
Expand Down Expand Up @@ -26,8 +27,6 @@ function resetUserList() {
}

async function renderUsers() {
console.log("rendering users...");

// Reset current list
resetUserList();

Expand Down Expand Up @@ -81,8 +80,6 @@ async function renderUsers() {
deletedUser.textContent = `${fullname}`;
});
});

console.log("rendered users.");
}

async function editUser() {
Expand Down Expand Up @@ -366,6 +363,7 @@ createRoomButton.addEventListener('click', createRoom);
createRoomButton.addEventListener('click', () => {
document.removeEventListener('keyup', checkCreateRoomInputFields);
});
// createRoomButton.addEventListener('click', renderRoomCards);

const saveRoomButton = document.getElementById('edit-room-button');
saveRoomButton.addEventListener('click', editRoom);
Expand All @@ -385,6 +383,7 @@ async function createRoom() {
await proxy.createRoom(room);
resetCreateRoomInputFields();
renderRooms();
renderRoomCards();
}

async function editRoom() {
Expand All @@ -398,6 +397,7 @@ async function deleteRoom() {

await proxy.deleteRoom(roomID);
renderRooms();
renderRoomCards();
}

function isCreateRoomInputFieldsEmpty(room) {
Expand Down Expand Up @@ -449,7 +449,6 @@ function resetCreateRoomInputFields() {

// Visually create and append each room card to the room settings list
async function renderRooms() {
console.log("rendering rooms...");
// Reset current list
resetRoomList();

Expand Down Expand Up @@ -484,7 +483,6 @@ async function renderRooms() {
deletedRoom.textContent = `${room['name']}`;
});
});
console.log("rooms rendered.");
}

// Reset the list of rooms to be rendered
Expand Down
121 changes: 38 additions & 83 deletions UserInterface/js/roomMessages.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import { GreenhouseProxy } from "../api/api.js";
import * as Utils from "../js/utilities.js";

const proxy = new GreenhouseProxy();

const chatbox_dropdown = document.getElementById('chatbox-dropdown');
const roomID = sessionStorage.getItem('roomID');
const chatbox_body = document.getElementById('chat-box-body');
const users = await proxy.getUsers();
let usernames = {};
// console.log(users);

const sendMessageBtn = document.getElementById('send-message-btn');
sendMessageBtn.addEventListener('click', sendMessage);

function createUserList() {
users.forEach(user => {
Expand All @@ -17,95 +20,39 @@ function createUserList() {
createUserList();
// console.log(usernames);

async function generateDropdownItems() {
const rooms = await proxy.getRooms();

// console.log(rooms);

// Check if there are any rooms
// If not, then don't generate the dropdown menu
if (rooms.length) {
// console.log("There are no rooms...");
const defaultOption = document.createElement('option')
defaultOption.setAttribute('selected', 'selected');
defaultOption.setAttribute('disabled', 'disabled');
defaultOption.setAttribute('hidden', 'hidden');
defaultOption.value = "";
defaultOption.textContent = "Select Room";
chatbox_dropdown.append(defaultOption);

rooms.forEach(room => {

// Item based on bootstrap dropdown
// const item = document.createElement('li');
// item.setAttribute('class', 'dropdown-item');
// item.setAttribute('id', `${room['id']}`);
// item.textContent = `${room["name"]}`;
// document.getElementById('dropdown-menu').append(item);

// Item based on html option selector
const option = document.createElement('option');
option.setAttribute('value', `${room['id']}`);
option.textContent = `${room['name']}`;
chatbox_dropdown.append(option);
});
}else{
const defaultOption = document.createElement('option')
defaultOption.setAttribute('selected', 'selected');
defaultOption.setAttribute('disabled', 'disabled');
defaultOption.setAttribute('hidden', 'hidden');
defaultOption.value = "";
defaultOption.textContent = "No Rooms Exist";
chatbox_dropdown.append(defaultOption);
chatbox_dropdown.setAttribute('disabled', 'disabled');
}
}

function resetChatbox() {
while(chatbox_body.firstChild) {
chatbox_body.removeChild(chatbox_body.lastChild);
}
}

generateDropdownItems();

async function renderMessages() {
// console.log(chatbox_dropdown.value);
const roomID = chatbox_dropdown.value;
const messages = proxy.getAllMessagesByRoom(roomID);
console.log(messages);
resetChatbox();

if (roomID != "") {
const messages = await proxy.getAllMessagesByRoom(roomID);
if (messages.length) {
messages.forEach(message => {
const user = message["user_id"];
const textContainer = document.createElement('div');
textContainer.setAttribute('class', 'd-flex align-items-baseline mb-4');
const container2 = document.createElement('div');
container2.setAttribute('class', 'pe-2');
const textCard = document.createElement('div');
textCard.setAttribute('class', 'card card-text d-inline-block p-2 px-3 m-1');
const date = document.createElement('div');
date.setAttribute('class', 'small');
date.textContent = usernames[message['user_id']];

textCard.textContent = message["body"];

container2.append(textCard);
container2.append(date);

textContainer.append(container2);

chatbox_body.append(textContainer);
});
}else{
const emptyMessagesText = document.createElement('div');
emptyMessagesText.textContent = "No Messages Available";
emptyMessagesText.setAttribute('style', 'color: grey');
chatbox_body.append(emptyMessagesText);
}

// console.log(messages);
if (messages.length) {
messages.forEach(message => {
const user = message["user_id"];
const textContainer = document.createElement('div');
textContainer.setAttribute('class', 'd-flex align-items-baseline mb-4');
const container2 = document.createElement('div');
container2.setAttribute('class', 'pe-2');
const textCard = document.createElement('div');
textCard.setAttribute('class', 'card card-text d-inline-block p-2 px-3 m-1');
const date = document.createElement('div');
date.setAttribute('class', 'small');
date.textContent = usernames[message['user_id']];

textCard.textContent = message["body"];

container2.append(textCard);
container2.append(date);

textContainer.append(container2);

chatbox_body.append(textContainer);
});
}else{
const emptyMessagesText = document.createElement('div');
emptyMessagesText.textContent = "No Messages Available";
Expand All @@ -115,4 +62,12 @@ async function renderMessages() {
}

renderMessages();
chatbox_dropdown.addEventListener("click", renderMessages);

async function sendMessage() {
const messageBox = document.getElementById('message-input-box');
const message = messageBox.value;
console.log(message);

// Get user ID from access_token
Utils.
}
Loading

0 comments on commit 87b8c6e

Please sign in to comment.