Index: ReserveNGo-frontend/src/Api_Classes/ApiClient.js =================================================================== --- ReserveNGo-frontend/src/Api_Classes/ApiClient.js (revision 873cdd028d645074a037f50fdff0319236ef3769) +++ ReserveNGo-frontend/src/Api_Classes/ApiClient.js (revision 873cdd028d645074a037f50fdff0319236ef3769) @@ -0,0 +1,16 @@ +import {config} from '/src/constants/Api_config.js' +import { HttpClient } from '@/Api_Classes/HttpClient.js' + +const BASE_API_URL = config.API_BASE_URL + +export class ApiClient { + constructor(baseURL) { + this.httpClient = new HttpClient(baseURL); + } + + + +} + +export const apiClient = new ApiClient(BASE_API_URL); + Index: ReserveNGo-frontend/src/Api_Classes/HttpClient.js =================================================================== --- ReserveNGo-frontend/src/Api_Classes/HttpClient.js (revision 873cdd028d645074a037f50fdff0319236ef3769) +++ ReserveNGo-frontend/src/Api_Classes/HttpClient.js (revision 873cdd028d645074a037f50fdff0319236ef3769) @@ -0,0 +1,153 @@ + + + + +export class HttpClient { + + constructor(baseURL) { + this.baseURL = baseURL; + } + + + async baseFetch(endpoint, { method = 'GET', headers = {}, body, queryParams } = {}) { + const url = new URL(endpoint, this.baseURL); + + + + if (queryParams) { + Object.entries(queryParams).forEach(([k, v]) => url.searchParams.append(k, v)); + } + + const finalHeaders = { ...headers }; + + //Crutial code, adds the jwt, maybe to be changed later. + const nonParsed = localStorage.getItem('userData'); + if (nonParsed) { + const token = JSON.parse(nonParsed).token; + if (token) { + finalHeaders['Authorization'] = `Bearer ${token}`; + } + } + + const config = { method, headers: finalHeaders, body }; + + /* console.warn(config);*/ + + /* console.warn(url.toString());*/ + + const res = await fetch(url.toString(), config); + const clonedRes = res.clone(); + + const contentType = res.headers.get('Content-Type') || ''; + + let parsed; + + try { + if (contentType.includes('application/json')) { + parsed = await res.json(); + } else if (contentType.startsWith('text/')) { + parsed = await res.text(); + } else { + parsed = await res.blob(); + } + } catch (err) { + console.warn('Error parsing response body:', err); + parsed = null; + } + + if (!res.ok) { + const error = new Error(`Request failed with status ${res.status}`); + error.status = res.status; + error.statusText = res.statusText; + error.url = url.toString(); + error.response = parsed; // <--- THIS LINE + error.rawResponse = clonedRes; + throw error; + } + + return parsed; + } + + + + json(endpoint, method, data = null, options = {}) { + return this.baseFetch(endpoint, { + ...options, + method, + headers: { + 'Content-Type': 'application/json', + ...(options.headers || {}), + }, + body: data ? JSON.stringify(data) : undefined, + }); + } + + form(endpoint, method, formData, options = {}) { + return this.baseFetch(endpoint, { + ...options, + method, + body: formData, + headers: { + ...(options.headers || {}), + }, + }); + } + + get(endpoint, options = {}) { + const config = { + ...options, + method: 'GET', + body: undefined, + }; + return this.baseFetch(endpoint, config); + } + + post(endpoint, data, options = {}) { + return this.json(endpoint, 'POST', data, options); + } + + put(endpoint, data, options = {}) { + return this.json(endpoint, 'PUT', data, options); + } + + delete(endpoint, options = {}) { + return this.json(endpoint, 'DELETE', null, options); + } + + upload(endpoint, formData, options = {}) { + return this.form(endpoint, 'POST', formData, options); + } + + async fetchImageAsBase64(imagePath) { + try { + console.warn(`Fetching image as Base64 using baseFetch from: ${imagePath}`); + const blob = await this.baseFetch(imagePath, { method: 'GET' }); + + // Ensure that the response is indeed a Blob + if (!(blob instanceof Blob)) { + throw new Error("Expected a Blob response, but received a different type. Check Content-Type header."); + } + + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onloadend = () => { + if (typeof reader.result === 'string') { + resolve(reader.result); // This is the base64 string + } else { + reject(new Error("FileReader did not return a string result for Base64 conversion.")); + } + }; + reader.onerror = (error) => { + console.error("FileReader error:", error); + reject(new Error("Failed to read image as Base64.")); + }; + reader.readAsDataURL(blob); // Convert blob to base64 data URL + }); + + } catch (err) { + console.error("Error fetching or converting image to Base64:", err); + throw err; // Re-throw the error for the caller to handle + } + } + +} Index: ReserveNGo-frontend/src/PiniaStores/UserStore.js =================================================================== --- ReserveNGo-frontend/src/PiniaStores/UserStore.js (revision 24773993a3920d696f87df9772f0ae52ca96af83) +++ ReserveNGo-frontend/src/PiniaStores/UserStore.js (revision 873cdd028d645074a037f50fdff0319236ef3769) @@ -12,5 +12,5 @@ phoneNumber: "", role: "UN_AUTHENTICATED", - token: "", + token: null, logoUrl: null, profilePictureBase64Encoded: null @@ -91,5 +91,5 @@ phoneNumber: "", role: "UN_AUTHENTICATED", - token: "", + token: null, logoUrl: null, profilePictureBase64Encoded: null Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue =================================================================== --- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue (revision 24773993a3920d696f87df9772f0ae52ca96af83) +++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue (revision 873cdd028d645074a037f50fdff0319236ef3769) @@ -5,7 +5,11 @@ import events_carousel from '@/components/Project/Restaurant/events_carousel_in_locale.vue' import WorkingHoursTable from '@/components/Project/Restaurant/working-hours-table.vue' +import PlusAddImage from '@/components/Project/Utility/PlusAddImage.vue' +import { useLocalManager } from '@/repository/LocalManager.ts' +import {useUtility} from '@/repository/Utility.ts' export default { components: { + PlusAddImage, events_carousel, WorkingHoursTable, @@ -29,4 +33,5 @@ }, local_id: this.$route.params['id'], + locale_logo_base64encoded: '', userStore: userStore(), router: useRouter(), @@ -44,7 +49,10 @@ this.locale = data console.log("PRINTING WORKING HOURS BEFORE THEY DONT WORK", this.locale.workingHours) - this.locale.events = transformArray(this.locale.events, 2) + this.locale.events = transformArray(this.locale.events, 2); + useUtility.fetchImageBase64(this.locale.logo) + .then((base64) => {this.locale_logo_base64encoded = base64}); }) .catch((err) => console.log('Error in Locale_', err)) + }, methods: { @@ -57,4 +65,19 @@ }).catch((error) => console.log(error)) }, + uploadLogo() { + const profilePictureFile = document.getElementById('logoPhotoInput').files[0]; + if (!profilePictureFile) {console.warn("Unable to find the logoPhotoInput"); return;} + + const formData = new FormData(); + formData.append('logo', profilePictureFile); + + useLocalManager.uploadLogo(formData) + .then((imagePath) => useUtility.fetchImageBase64(imagePath) + .then((base64) => {this.locale_logo_base64encoded = base64}) + .catch((error) => console.log(error))) + .catch((error) => {console.log(error)}); + + + } }, } @@ -67,12 +90,16 @@
-
+
Restaurant Logo +
+ +
Index: ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue =================================================================== --- ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue (revision 24773993a3920d696f87df9772f0ae52ca96af83) +++ ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue (revision 873cdd028d645074a037f50fdff0319236ef3769) @@ -2,4 +2,5 @@ import { userStore } from '@/PiniaStores/UserStore.js' import { restaurantStore } from '@/PiniaStores/restaurantStore.js' +import { useUtility } from '@/repository/utility.ts' export default { @@ -14,5 +15,12 @@ return { userStore_: userStore(), + localeLogo: null, } + }, + beforeMount() { + console.log("LOGO",this.local.logo) + useUtility.fetchImageBase64(this.local.logo) + .then((base64) => this.localeLogo = base64) + .catch(error => console.log(error)) }, @@ -56,5 +64,5 @@
Logo
{{ local.name }}
-

- {{ local.address }} -

-

- {{ }} -

+

{{ local.address }}

+

{{}}

{{ local.averageRating }} @@ -80,8 +84,5 @@

-
+
@@ -121,5 +119,5 @@ #container:not(.selected) { - border-left-color: #5EA5BC; + border-left-color: #5ea5bc; } @@ -134,5 +132,5 @@ #container.selected::before { - content: ""; + content: ''; position: absolute; top: 0; @@ -140,5 +138,5 @@ width: 100%; height: 100%; - border: 3px solid #5EA5BC; + border: 3px solid #5ea5bc; border-radius: 8px; animation: drawBorder 0.3s linear forwards; @@ -166,5 +164,7 @@ .button-group { - transition: opacity 0.3s ease, transform 0.3s ease; + transition: + opacity 0.3s ease, + transform 0.3s ease; height: 60px; align-items: center; Index: ReserveNGo-frontend/src/components/Project/Utility/PlusAddImage.vue =================================================================== --- ReserveNGo-frontend/src/components/Project/Utility/PlusAddImage.vue (revision 873cdd028d645074a037f50fdff0319236ef3769) +++ ReserveNGo-frontend/src/components/Project/Utility/PlusAddImage.vue (revision 873cdd028d645074a037f50fdff0319236ef3769) @@ -0,0 +1,56 @@ + + + + + Index: ReserveNGo-frontend/src/constants/Api_config.js =================================================================== --- ReserveNGo-frontend/src/constants/Api_config.js (revision 873cdd028d645074a037f50fdff0319236ef3769) +++ ReserveNGo-frontend/src/constants/Api_config.js (revision 873cdd028d645074a037f50fdff0319236ef3769) @@ -0,0 +1,4 @@ +export const config = { + API_BASE_URL: import.meta.env.VITE_API_BASE_URL ? import.meta.env.VITE_API_BASE_URL : 'http://localhost:8080', +}; + Index: ReserveNGo-frontend/src/repository/LocalManager.ts =================================================================== --- ReserveNGo-frontend/src/repository/LocalManager.ts (revision 873cdd028d645074a037f50fdff0319236ef3769) +++ ReserveNGo-frontend/src/repository/LocalManager.ts (revision 873cdd028d645074a037f50fdff0319236ef3769) @@ -0,0 +1,28 @@ +import { ApiClient } from '@/Api_Classes/ApiClient' +import { config } from '@/constants/Api_config' + +const BASE_API_URL = config.API_BASE_URL + +/* +console.warn("THIS IS THE BASE URL",BASE_API_URL) +*/ + + +class LocalManager extends ApiClient { + private readonly endpoint: string + + constructor(baseUrl : string, endpoint : string) { + super(baseUrl) + this.endpoint = endpoint + } + + uploadLogo(formData : FormData) : Promise { + return this.httpClient.upload(this.endpoint + '/upload-logo', formData) + } + + + +} + + +export const useLocalManager = new LocalManager(BASE_API_URL, "/api/local-manager") Index: ReserveNGo-frontend/src/repository/utility.ts =================================================================== --- ReserveNGo-frontend/src/repository/utility.ts (revision 873cdd028d645074a037f50fdff0319236ef3769) +++ ReserveNGo-frontend/src/repository/utility.ts (revision 873cdd028d645074a037f50fdff0319236ef3769) @@ -0,0 +1,23 @@ +import { ApiClient } from '@/Api_Classes/ApiClient' +import { config } from '@/constants/Api_config' + +const BASE_API_URL = config.API_BASE_URL + +class Utility extends ApiClient { + private readonly endpoint: string + + constructor(baseUrl : string) { + super(baseUrl) + } + + fetchImageBase64(imagePath : string) : Promise { + return this.httpClient.fetchImageAsBase64(imagePath); + } + + + + +} + + +export const useUtility = new Utility(BASE_API_URL)