Feature/issue 110/update frontend cookies222

src/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="app">
+    <!-- routing view -->
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+};
+</script>
+
+<style>
+/* Adding Global Styles */
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 0;
+}
+</style>

src/Display interface/Cookie.vue

@@ -0,0 +1,113 @@
+<template>
+  <div id="cookiePopUp" class="cookie-popup">
+    <div class="cookie-content">
+      <p>We use cookies to optimize your experience. Do you agree to optional cookies?</p>
+      <button class="reject-button" @click="handleConsent(false)">Refuse partial cookies</button>
+      <button class="accept-button" @click="handleConsent(true)">Allow all cookies</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleConsent(isConsent) {
+      this.setConsentCookie(isConsent);
+      this.signUp();
+    },
+    setConsentCookie(isConsent) {
+      const consentValue = isConsent ? "true" : "false";
+      const d = new Date();
+      d.setTime(d.getTime() + 30 * 24 * 60 * 60 * 1000);
+      const expires = "expires=" + d.toUTCString();
+      document.cookie = `optionalConsent=${consentValue};${expires};path=/`;
+    },
+    signUp() {
+      fetch("https://ailearningtool.ddns.net:8080", {
+        method: "GET",
+        credentials: "include",
+      })
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error("Non-200 response, back-end API call failed");
+            } else {
+              document.getElementById("cookiePopUp").style.display = "none";
+              this.redirectToMain();
+            }
+          })
+          .catch((error) => {
+            console.error("Registration failure:", error);
+          });
+    },
+
+    redirectToMain() {
+    this.$router.push("/main");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.cookie-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+}
+
+.cookie-content {
+  position: relative;
+  width: 80%;
+  max-width: 500px;
+  background-color: #fff;
+  padding: 40px 20px;
+  border-radius: 10px;
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.cookie-content p {
+  font-size: 20px;
+  margin: 0 0 40px;
+}
+
+.reject-button {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.reject-button:hover {
+  background-color: #c82333;
+}
+
+.accept-button {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.accept-button:hover {
+  background-color: #218838;
+}
+</style>

src/Display interface/MainView.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="main-view">
+    <div class="left-sidebar-container">
+      <HistorySidebar />
+      <SettingSidebar @toggleSettings="toggleSettings" />
+    </div>
+    <MainContent />
+    <ImportantSidebar :isDisabled="isSettingsOpen" />
+  </div>
+</template>
+
+<script>
+import HistorySidebar from '../components/HistorySidebar.vue';
+import MainContent from '../components/MainContent.vue';
+import ImportantSidebar from '../components/ImportantSidebar.vue';
+import SettingSidebar from '../components/SettingSidebar.vue';
+export default {
+  name: 'MainView',
+  data() {
+    return {
+      isSettingsOpen: false, // Controls whether important parts are disabled
+    };
+  },
+  methods: {
+    toggleSettings(isOpen) {
+      this.isSettingsOpen = isOpen;
+    },
+  },
+  components: {
+    HistorySidebar,
+    MainContent,
+    ImportantSidebar,
+    SettingSidebar,
+  },
+};
+</script>
+
+<style scoped>
+.main-view {
+  display: flex;
+  height: 100vh;
+}
+
+.left-sidebar-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+}
+</style>

src/components/HistorySidebar.vue

@@ -0,0 +1,108 @@
+<template>
+  <aside :class="{'collapsed': isCollapsed}">
+    <!-- Toggle Button for Collapsing/Expanding -->
+    <button @click="toggleSidebar">History</button>
+
+    <!-- History content, only visible when not collapsed -->
+    <div v-if="!isCollapsed" class="history-content">
+      <h3>Conversation History</h3>
+      <ul>
+        <!-- Dynamically generated chat log button -->
+        <li v-for="conversation in conversations" :key="conversation.chatId">
+          <button @click="loadConversation(conversation.chatId)">
+            {{ conversation.chatId }}
+          </button>
+        </li>
+      </ul>
+
+      <!-- Button for adding a new conversation -->
+      <button class="new-conversation-btn" @click="createNewConversation">➕ New Conversation</button>
+    </div>
+  </aside>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data() {
+    return {
+      isCollapsed: false, // Controls the collapse state of the sidebar
+      conversations: [], // List of conversations (chatId)
+    };
+  },
+  methods: {
+    toggleSidebar() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+
+    // Create new conversations and dynamically add them to the session list
+    async createNewConversation() {
+      try {
+        const response = await axios.get('https://ailearningtool.ddns.net:8080/createChat', {
+          params: {
+            userId: localStorage.getItem('userId'), // Get userId from LocalStorage
+            initialMessage: "", // Empty initial content
+          },
+        });
+
+        const chatId = response.data.chatId; // Assuming the return field is chatId
+        console.log('Created chat with ID:', chatId);
+
+        // Dynamically added to the session list
+        this.conversations.push({ chatId });
+      } catch (error) {
+        console.error('Failed to create a new conversation:', error);
+        alert('Failed to create a new conversation. Please try again.');
+      }
+    },
+
+    // Load the contents of the specified session
+    async loadConversation(chatId) {
+      try {
+        const response = await axios.get('https://ailearningtool.ddns.net:8080/getChatHistory', {
+          params: {
+            userId: localStorage.getItem('userId'), // Get userId from LocalStorage
+            chatId, // The currently selected chatId
+          },
+        });
+
+        const chatHistory = response.data.history; // Assuming the return field is history
+        console.log('Chat History:', chatHistory);
+
+        // Pass the chat content to the parent component (requires the parent component to listen to this event)
+        this.$emit('loadConversation', chatHistory);
+      } catch (error) {
+        console.error('Failed to load conversation:', error);
+        alert('Failed to load the conversation. Please try again.');
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+aside {
+  width: 250px;
+  background-color: #f0f0f0;
+  padding: 10px;
+  transition: width 0.3s ease;
+  position: relative;
+}
+
+.collapsed {
+  width: 50px;
+}
+
+button {
+  margin: 5px 0;
+}
+
+.history-content {
+  margin-top: 10px;
+}
+
+.new-conversation-btn {
+  margin-top: 10px;
+}
+</style>

src/components/ImportantSidebar.vue

@@ -0,0 +1,79 @@
+<template>
+  <aside :class="{'disabled': isDisabled}">
+    <button @click="toggleSidebar">Important</button>
+    <div v-if="!isCollapsed && !isDisabled">
+      <h3>Memo</h3>
+      <textarea
+          v-model="memoContent"
+          placeholder="Write your memo here "
+          @input="handleInput"
+      ></textarea>
+    </div>
+  </aside>
+</template>
+
+<script>
+export default
+{
+    props: {
+     isDisabled: {
+        type: Boolean,
+        default: false,
+     },
+   },
+    data() {
+      return {
+        isCollapsed: false,
+        memoContent: '',
+     };
+    },
+   methods: {
+     toggleSidebar() {
+       this.isCollapsed = !this.isCollapsed;
+      },
+      handleInput() {
+       // Handle input if necessary
+     },
+    },
+};
+</script>
+
+<style scoped>
+aside {
+  width: 250px;
+  background-color: #f0f0f0;
+  padding: 10px;
+  transition: width 0.3s ease;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.collapsed {
+  width: 50px;
+}
+
+textarea {
+  width: 100%;
+  height: 800px;
+  resize: none;
+  padding: 5px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+textarea:focus {
+  outline: none;
+}
+
+button {
+  margin: 5px 0;
+}
+
+p {
+  font-size: 12px;
+  color: gray;
+}
+</style>