From 09540f37c3b9f1589d27de723257af5d41c4f99b Mon Sep 17 00:00:00 2001 From: marcbudd Date: Sat, 6 Jan 2024 21:57:35 +0100 Subject: [PATCH] Draft second iteration [might contain mistakes] --- src/1_login-registration/login.js | 4 + .../change_password.html | 33 +++++++ .../change_password.js | 33 +++++++ .../change_trivial_information.html | 33 +++++++ .../change_trivial_information.js | 33 +++++++ .../personal_global_feed.html | 35 +++++++ .../personal_global_feed.js | 94 +++++++++++++++++++ src/2_posts/create_post.js | 64 +++++++++++++ src/2_posts/create_posts.html | 33 +++++++ src/2_user-feed-subscription/search_user.html | 33 +++++++ src/2_user-feed-subscription/search_user.js | 66 +++++++++++++ .../subscribe_user.html | 32 +++++++ .../subscribe_user.js | 31 ++++++ .../unsubscribe_user.html | 32 +++++++ .../unsubscribe_user.js | 30 ++++++ .../visit_user_profile.html | 46 +++++++++ .../visit_user_profile.js | 90 ++++++++++++++++++ src/index.html | 45 ++++++++- 18 files changed, 765 insertions(+), 2 deletions(-) create mode 100644 src/2_account-configuration/change_password.html create mode 100644 src/2_account-configuration/change_password.js create mode 100644 src/2_account-configuration/change_trivial_information.html create mode 100644 src/2_account-configuration/change_trivial_information.js create mode 100644 src/2_personal-global-feed/personal_global_feed.html create mode 100644 src/2_personal-global-feed/personal_global_feed.js create mode 100644 src/2_posts/create_post.js create mode 100644 src/2_posts/create_posts.html create mode 100644 src/2_user-feed-subscription/search_user.html create mode 100644 src/2_user-feed-subscription/search_user.js create mode 100644 src/2_user-feed-subscription/subscribe_user.html create mode 100644 src/2_user-feed-subscription/subscribe_user.js create mode 100644 src/2_user-feed-subscription/unsubscribe_user.html create mode 100644 src/2_user-feed-subscription/unsubscribe_user.js create mode 100644 src/2_user-feed-subscription/visit_user_profile.html create mode 100644 src/2_user-feed-subscription/visit_user_profile.js diff --git a/src/1_login-registration/login.js b/src/1_login-registration/login.js index 37588d8..7a7e720 100644 --- a/src/1_login-registration/login.js +++ b/src/1_login-registration/login.js @@ -25,6 +25,10 @@ function login() { document.getElementById('response').innerHTML = 'Status Code: ' + status + '
' + '
' + JSON.stringify(json, null, 2) + '
'; + + if (status === 200) { + localStorage.setItem('token', json.token); // store token in local storage + } }) .catch(error => console.error('Error:', error)); } \ No newline at end of file diff --git a/src/2_account-configuration/change_password.html b/src/2_account-configuration/change_password.html new file mode 100644 index 0000000..7e47f7b --- /dev/null +++ b/src/2_account-configuration/change_password.html @@ -0,0 +1,33 @@ + + + + + Change Password + + + +
+
+

Change Password

+
+
+ +
+
+

Response

+
+
+
+ + + + + diff --git a/src/2_account-configuration/change_password.js b/src/2_account-configuration/change_password.js new file mode 100644 index 0000000..13af31e --- /dev/null +++ b/src/2_account-configuration/change_password.js @@ -0,0 +1,33 @@ +import { GlobalSettings } from '../global_settings.js'; + +document.getElementById("changePassword").addEventListener("click", login) + +function login() { + const changePasswordDTO = { + oldPassword: document.getElementById('oldPassword').value, + newPassword: document.getElementById('newPassword').value, + }; + + const token = localStorage.getItem('token') + + fetch(GlobalSettings.apiUrl+'/users', { + method: 'PATCH', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + token + }, + body: JSON.stringify(changePasswordDTO) + }) + .then(response => { + return response.json().then(json => ({ + status: response.status, + json + })); + }) + .then(({ status, json }) => { + document.getElementById('response').innerHTML = + 'Status Code: ' + status + '
' + + '
' + JSON.stringify(json, null, 2) + '
'; + }) + .catch(error => console.error('Error:', error)); +} \ No newline at end of file diff --git a/src/2_account-configuration/change_trivial_information.html b/src/2_account-configuration/change_trivial_information.html new file mode 100644 index 0000000..bfab17d --- /dev/null +++ b/src/2_account-configuration/change_trivial_information.html @@ -0,0 +1,33 @@ + + + + + Change Trivial Information + + + +
+
+

Change Trivial Information

+
+
+ +
+
+

Response

+
+
+
+ + + + + diff --git a/src/2_account-configuration/change_trivial_information.js b/src/2_account-configuration/change_trivial_information.js new file mode 100644 index 0000000..d047c32 --- /dev/null +++ b/src/2_account-configuration/change_trivial_information.js @@ -0,0 +1,33 @@ +import { GlobalSettings } from '../global_settings.js'; + +document.getElementById("changeInformation").addEventListener("click", login) + +function login() { + const changeInformationDTO = { + nickname: document.getElementById('nickname').value, + status: document.getElementById('status').value, + }; + + const token = localStorage.getItem('token') + + fetch(GlobalSettings.apiUrl+'/users', { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + token + }, + body: JSON.stringify(changeInformationDTO) + }) + .then(response => { + return response.json().then(json => ({ + status: response.status, + json + })); + }) + .then(({ status, json }) => { + document.getElementById('response').innerHTML = + 'Status Code: ' + status + '
' + + '
' + JSON.stringify(json, null, 2) + '
'; + }) + .catch(error => console.error('Error:', error)); +} \ No newline at end of file diff --git a/src/2_personal-global-feed/personal_global_feed.html b/src/2_personal-global-feed/personal_global_feed.html new file mode 100644 index 0000000..9a4aa59 --- /dev/null +++ b/src/2_personal-global-feed/personal_global_feed.html @@ -0,0 +1,35 @@ + + + + + Global or Personal Feed + + + +
+
+

Global or Personal Feed

+
+ +
+ +
+

Response

+
+ +
+
+ + + + diff --git a/src/2_personal-global-feed/personal_global_feed.js b/src/2_personal-global-feed/personal_global_feed.js new file mode 100644 index 0000000..b5368f1 --- /dev/null +++ b/src/2_personal-global-feed/personal_global_feed.js @@ -0,0 +1,94 @@ +import { GlobalSettings } from '../global_settings.js'; + +document.getElementById("personalFeed").checked = false +let lastPostId = null +let limit = 10 +let loggedIn = false +let personalFeed = false +let token = "" + +document.getElementById("personalFeed").addEventListener("change", function () { + token = localStorage.getItem('token') + console.log(token) + if (token === null) { // if user is not logged in, no personal feed + personalFeed = false + document.getElementById("personalFeed").checked = false + } else { + loggedIn = true + personalFeed = document.getElementById("personalFeed").checked; + } + + resetResponse() +}) + + +document.getElementById("getFeedButton").addEventListener("click", function () { + resetResponse() + getFeed() +}) + +document.getElementById("nextPage").addEventListener("click", function () { + getFeed() +}) + +function resetResponse() { + lastPostId = null + document.getElementById('response').innerHTML = '' +} + +function getFeed() { + + // Construct URL + let baseUrl = GlobalSettings.apiUrl + '/feed' + let paginationUrl + let feedTypeUrl + if (lastPostId == null) { + paginationUrl = '?limit=' + limit + } else { + paginationUrl = '?postId=' + lastPostId + '&limit=' + limit + } + if (loggedIn && personalFeed) { + feedTypeUrl += '&feedType=personal' + } else { + feedTypeUrl += '&feedType=global' + } + + const url = baseUrl + paginationUrl + feedTypeUrl + + // Fetch data + fetch(url, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + token + }, + }) + .then(response => { + return response.json() + }) + .then(data => { + displayResults(data); + }) + .catch(error => console.error('Error:', error)); +} + +function displayResults(data) { + const responseDiv = document.getElementById('response') + responseDiv.innerHTML = '' + + if (data.records && data.records.length > 0) { + + responseDiv.innerHTML += 'Shown records ' + data.pagination.limit + ' - Total number of records ' + data.pagination.records + '

' + + data.records.forEach(post => { + const postDiv = document.createElement('div'); + postDiv.innerHTML = `PostId: ${post.postId} Content: ${post.content}, Creation Date: ${post.creationDate}`; + responseDiv.appendChild(postDiv); + + lastPostId = post.postId + }); + } else { + responseDiv.innerHTML = 'No users found'; + } + +} diff --git a/src/2_posts/create_post.js b/src/2_posts/create_post.js new file mode 100644 index 0000000..d27afcd --- /dev/null +++ b/src/2_posts/create_post.js @@ -0,0 +1,64 @@ +import { GlobalSettings } from '../global_settings.js'; + +document.getElementById("createPost").addEventListener("click", create_post) + +function create_post() { + const content = document.getElementById('content').value; + const image = document.getElementById('image').files[0]; + const token = localStorage.getItem('token') + + if (image == null) { + const postCreateRequestDTO = { + content: content + }; + + fetch(GlobalSettings.apiUrl+'/posts', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + token + }, + body: JSON.stringify(postCreateRequestDTO) + }) + .then(response => { + return response.json().then(json => ({ + status: response.status, + json + })); + }) + .then(({ status, json }) => { + document.getElementById('response').innerHTML = + 'Status Code: ' + status + '
' + + '
' + JSON.stringify(json, null, 2) + '
'; + }) + .catch(error => console.error('Error:', error)); + } + else { + // Create FormData object + let formData = new FormData(); + formData.append('content', content); + if (image) { + formData.append('image', image); + } + + fetch(GlobalSettings.apiUrl+'/posts', { + method: 'POST', + headers: { + 'Authorization': 'Bearer ' + token + }, + body: formData + }) + .then(response => { + return response.json().then(json => ({ + status: response.status, + json + })); + }) + .then(({ status, json }) => { + document.getElementById('response').innerHTML = + 'Status Code: ' + status + '
' + + '
' + JSON.stringify(json, null, 2) + '
'; + }) + .catch(error => console.error('Error:', error)); + } +} \ No newline at end of file diff --git a/src/2_posts/create_posts.html b/src/2_posts/create_posts.html new file mode 100644 index 0000000..5a90275 --- /dev/null +++ b/src/2_posts/create_posts.html @@ -0,0 +1,33 @@ + + + + + Create Posts + + + +
+
+

Create Posts

+
+
+ +
+
+

Response

+
+
+
+ + + + + diff --git a/src/2_user-feed-subscription/search_user.html b/src/2_user-feed-subscription/search_user.html new file mode 100644 index 0000000..98d7e73 --- /dev/null +++ b/src/2_user-feed-subscription/search_user.html @@ -0,0 +1,33 @@ + + + + + Search User + + + +
+
+

Search User

+
+ +
+
+

Response

+
+ + +
+
+ + + + diff --git a/src/2_user-feed-subscription/search_user.js b/src/2_user-feed-subscription/search_user.js new file mode 100644 index 0000000..16a1342 --- /dev/null +++ b/src/2_user-feed-subscription/search_user.js @@ -0,0 +1,66 @@ +import { GlobalSettings } from '../global_settings.js'; + +let offset = 0 +let limit = 10 + +document.getElementById("search").addEventListener("click", function() { + offset = 0 + searchUsers() +}) +document.getElementById("nextPage").addEventListener("click", function(){ + offset += limit + searchUsers() +}) +document.getElementById("prevPage").addEventListener("click", function() { + offset -= limit + if (offset < 0) { + offset = 0 + } + searchUsers() +}) + +function searchUsers() { + const username = document.getElementById('username').value; + const url = GlobalSettings.apiUrl+'/users?username=' + username + '&offset=' + offset + '&limit=' + limit + + fetch(url, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }) + .then(response => { + response.json() + }) + .then(data => { + displayResults(data); + }) + .catch(error => console.error('Error:', error)); +} + +function displayResults(data) { + const responseDiv = document.getElementById('response') + responseDiv.innerHTML = '' + + // if status code is not 200, display error message + if (data.statusCode !== 200) { + responseDiv.innerHTML = 'Status Code: ' + data.statusCode + '
' + + '
' + JSON.stringify(data.message, null, 2) + '
'; + return + } + + if (data.records && data.records.length > 0) { + const startRecord = offset + 1 + const endRecord = offset + data.records.length + responseDiv.innerHTML += 'Shown records ' + startRecord + ' - ' + endRecord + 'of' + data.pagination.records + '

' + + data.records.forEach(user => { + const userDiv = document.createElement('div'); + userDiv.innerHTML = `Username: ${user.username}, Nickname: ${user.nickname}`; + responseDiv.appendChild(userDiv); + }); + } else { + responseDiv.innerHTML = 'No users found'; + } + +} \ No newline at end of file diff --git a/src/2_user-feed-subscription/subscribe_user.html b/src/2_user-feed-subscription/subscribe_user.html new file mode 100644 index 0000000..ed7217b --- /dev/null +++ b/src/2_user-feed-subscription/subscribe_user.html @@ -0,0 +1,32 @@ + + + + + Subscribe User + + + +
+
+

Subscribe User

+
+ +
+
+

Response

+
+
+
+ + + + + diff --git a/src/2_user-feed-subscription/subscribe_user.js b/src/2_user-feed-subscription/subscribe_user.js new file mode 100644 index 0000000..7cae1aa --- /dev/null +++ b/src/2_user-feed-subscription/subscribe_user.js @@ -0,0 +1,31 @@ +import { GlobalSettings } from '../global_settings.js'; + +document.getElementById("subscribeButton").addEventListener("click", subscribe) + +function subscribe() { + const subscriptionCreateRequestDTO = { + following: document.getElementById('username').value, + }; + const token = localStorage.getItem('token') + + fetch(GlobalSettings.apiUrl+'/subscription', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + token + }, + body: JSON.stringify(subscriptionCreateRequestDTO) + }) + .then(response => { + return response.json().then(json => ({ + status: response.status, + json + })); + }) + .then(({ status, json }) => { + document.getElementById('response').innerHTML = + 'Status Code: ' + status + '
' + + '
' + JSON.stringify(json, null, 2) + '
'; + }) + .catch(error => console.error('Error:', error)); +} \ No newline at end of file diff --git a/src/2_user-feed-subscription/unsubscribe_user.html b/src/2_user-feed-subscription/unsubscribe_user.html new file mode 100644 index 0000000..e4c42d1 --- /dev/null +++ b/src/2_user-feed-subscription/unsubscribe_user.html @@ -0,0 +1,32 @@ + + + + + Unsubscribe User + + + +
+
+

Unsubscribe User

+
+ +
+
+

Response

+
+
+
+ + + + + diff --git a/src/2_user-feed-subscription/unsubscribe_user.js b/src/2_user-feed-subscription/unsubscribe_user.js new file mode 100644 index 0000000..fe7ed07 --- /dev/null +++ b/src/2_user-feed-subscription/unsubscribe_user.js @@ -0,0 +1,30 @@ +import { GlobalSettings } from '../global_settings.js'; + +document.getElementById("unsubscribeButton").addEventListener("click", unsubscribe) + +function unsubscribe() { + const subscriptionId = document.getElementById('subscriptionId').value; + const token = localStorage.getItem('token') + + const url = GlobalSettings.apiUrl+'/subscription/' + subscriptionId + + fetch(url, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + token + } + }) + .then(response => { + return response.json().then(json => ({ + status: response.status, + json + })); + }) + .then(({ status, json }) => { + document.getElementById('response').innerHTML = + 'Status Code: ' + status + '
' + + '
' + JSON.stringify(json, null, 2) + '
'; + }) + .catch(error => console.error('Error:', error)); +} \ No newline at end of file diff --git a/src/2_user-feed-subscription/visit_user_profile.html b/src/2_user-feed-subscription/visit_user_profile.html new file mode 100644 index 0000000..2a73274 --- /dev/null +++ b/src/2_user-feed-subscription/visit_user_profile.html @@ -0,0 +1,46 @@ + + + + + Visit User Profile + + + +
+
+

Visit User Profile

+
+ +
+
+

Response

+
+
+
+ + +
+
+
+ +
+ + + + + diff --git a/src/2_user-feed-subscription/visit_user_profile.js b/src/2_user-feed-subscription/visit_user_profile.js new file mode 100644 index 0000000..313e09b --- /dev/null +++ b/src/2_user-feed-subscription/visit_user_profile.js @@ -0,0 +1,90 @@ +import { GlobalSettings } from '../global_settings.js'; + +let offset = 0 +let limit = 10 + +document.getElementById("openUser").addEventListener("click", function() { + offset = 0 + openUser() +}) +document.getElementById("nextPage").addEventListener("click", function(){ + offset += limit + openUser() +}) +document.getElementById("prevPage").addEventListener("click", function() { + offset -= limit + if (offset < 0) { + offset = 0 + } + openUser() +}) + +function openUser() { + const username = document.getElementById('username').value; + + // fetch user profile information first + fetch(GlobalSettings.apiUrl+'/users/'+username, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + } + }) + .then(response => { + return response.json().then(json => ({ + status: response.status, + json + })); + }) + .then(({ status, json }) => { + document.getElementById('response').innerHTML = + 'Status Code: ' + status + '
' + + '
' + JSON.stringify(json, null, 2) + '
'; + + if (status === 200) { + localStorage.setItem('token', json.token); // store token in local storage + } + }) + .catch(error => console.error('Error:', error)); + + // fetch user posts + const url = GlobalSettings.apiUrl+'/posts?username=' + username + '&offset=' + offset + '&limit=' + limit + fetch(url, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }) + .then(response => { + response.json() + }) + .then(data => { + displayResults(data); + }) + .catch(error => console.error('Error:', error)); +} + +function displayResults(data) { + const responseDiv = document.getElementById('responseFeed') + responseDiv.innerHTML = '' + + // if status code is not 200, display error message + if (data.statusCode !== 200) { + responseDiv.innerHTML = 'Status Code: ' + data.statusCode + '
' + + '
' + JSON.stringify(data.message, null, 2) + '
'; + return + } + + if (data.records && data.records.length > 0) { + const startRecord = offset + 1 + const endRecord = offset + data.records.length + responseDiv.innerHTML += 'Shown records ' + startRecord + ' - ' + endRecord + 'of' + data.pagination.records + '

' + + data.records.forEach(post => { + const postDiv = document.createElement('div'); + postDiv.innerHTML = `PostId: ${post.postId} Content: ${post.content}, Creation Date: ${post.creationDate}`; + responseDiv.appendChild(postDiv); + }); + } else { + responseDiv.innerHTML = 'No users found'; + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 7a14b77..19ef6b1 100644 --- a/src/index.html +++ b/src/index.html @@ -16,7 +16,11 @@

API Mock Client

@@ -33,13 +37,50 @@

Registration & Activation & Login

+
+

Create Post

+ + +
+ +
+

Account Configuration

+ + + + +
+ +
+

User Profile

+ + + + + + +
+ +
+

Generated Feed

+ + +