init

01191c54 · Christian Hess Bore · 01191c54 · 01191c54 · 01191c54 · 01191c54
Commit 01191c54 authored 4 months ago by Christian Hess Bore
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+.vscode/
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+/cypress/videos/
+/cypress/screenshots/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.tsbuildinfo
--- a/README.md
+++ b/README.md
+# np-6-frontend
+This template should help get you started developing with Vue 3 in Vite.
+## Recommended IDE Setup
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+## Customize configuration
+See [Vite Configuration Reference](https://vite.dev/config/).
+## Project Setup
+```sh
+npm install
+```
+### Compile and Hot-Reload for Development
+```sh
+npm run dev
+```
+### Compile and Minify for Production
+```sh
+npm run build
+```
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "np-6-frontend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^3.0.1",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.1.0",
+    "vite-plugin-vue-devtools": "^7.7.2"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
+<script setup>
+import ChatView from "@/components/ChatView.vue";
+</script>
+<template>
+  <ChatView />
+</template>
+<style scoped>
+</style>
--- a/src/components/ChatInput.vue
+++ b/src/components/ChatInput.vue
+<script setup>
+import { useChatStore } from "@/stores/ChatStore.js";
+import { generateID } from "@/utils/ID.js";
+import { request_post } from "@/utils/Controller.js";
+const chatStore = useChatStore();
+function handleInput() {
+  if (chatStore.id === 0) {
+    chatStore.id = generateID();
+  }
+  const post = chatStore.id + ": " + chatStore.chat_input
+  request_post(chatStore, post)
+  chatStore.logs.push(post);
+  chatStore.chat_input = "";
+}
+</script>
+<template>
+  <div class="chat-input">
+    <input class="input" v-model="chatStore.chat_input"/>
+    <button class="button" @click="handleInput">Submit</button>
+  </div>
+</template>
+<style scoped>
+.chat-input {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 50vw;
+  gap: 10px;
+}
+.input {
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 10px;
+  font-size: 1.5vw;
+  width: 100%;
+}
+.button {
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 10px;
+  font-size: 1.5vw;
+}
+.button:hover {
+  background-color: grey;
+  cursor: pointer;
+}
+.button:active {
+  background-color: dimgray;
+}
+</style>
\ No newline at end of file
--- a/src/components/ChatLog.vue
+++ b/src/components/ChatLog.vue
+<script setup>
+import { useChatStore } from "@/stores/ChatStore.js";
+const chatStore = useChatStore();
+</script>
+<template>
+  <div class="chat-log">
+    <h2>Chat Log</h2>
+    <ul>
+      <li v-for="(message, index) in chatStore.logs" :key="index">
+        {{ message }}
+      </li>
+    </ul>
+  </div>
+</template>
+<style scoped>
+.chat-log {
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 10px;
+  margin-top: 10px;
+  height: 70vh;
+  width: 50vw;
+  overflow-y: auto;
+}
+ul {
+  list-style-type: none;
+  padding: 5px;
+  font-size: 1.5vw;
+}
+</style>
\ No newline at end of file
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
+<script setup>
+import ChatLog from "@/components/ChatLog.vue";
+import ChatInput from "@/components/ChatInput.vue";
+</script>
+<template>
+  <div class="container">
+    <div class="chat-elements">
+      <ChatLog />
+      <ChatInput />
+    </div>
+  </div>
+</template>
+<style scoped>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: #f0f0f0;
+}
+.chat-elements {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 50vw;
+  gap: 10px;
+}
+</style>
\ No newline at end of file
--- a/src/main.js
+++ b/src/main.js
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+const app = createApp(App)
+const pinia = createPinia()
+app.use(pinia)
+app.mount('#app')
--- a/src/stores/ChatStore.js
+++ b/src/stores/ChatStore.js
+import { defineStore } from "pinia";
+export const useChatStore = defineStore("chat", {
+    state: () => ({
+        logs: [],
+        chat_input: "",
+        id: 0,
+    }),
+})
\ No newline at end of file
--- a/src/utils/Controller.js
+++ b/src/utils/Controller.js
+export const request_post = async (chatStore, post) => {
+    try {
+        const response = await fetch('http://localhost:3000/add_post', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ chat_input: post })
+        });
+    } catch(error) {
+        console.error('Error submitting form:', error);
+    }
+}
+export const get_post = async (chatStore) => {
+    try {
+        const response = await fetch('http://localhost:3000/get_post');
+        const data = await response.json();
+        chatStore.logs.push(data);
+    } catch(error) {
+        console.error('Error fetching posts:', error);
+    }
+}
--- a/src/utils/ID.js
+++ b/src/utils/ID.js
+export function generateID() {
+    const now = new Date();
+    const id = now.getHours() * 1000 + now.getMinutes() * 10 + Math.floor(now.getSeconds() / 6);
+    return id % 10000;
+}
\ No newline at end of file
--- a/vite.config.js
+++ b/vite.config.js
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})