Ohm

README.md

@@ -1,2 +1,134 @@
-# acs-timetable
-A simple My SQL database and springboot build for ACS@Fsci student to get their timetable.
+# ACS TIME TABLE
+
+## Topic
+
+- [Installation](#installation)
+- [Frontend](#frontend)
+- [Backend](#backend)
+- [How to use](#how-to-use)
+- [OOP Concept](#oop-concept)
+
+# Installation
+
+```
+git clone https://github.com/tententgc/acs-timetable.git
+
+cd acs-timetable
+
+```
+
+# Frontend
+
+- Tool
+  - React
+  - MobX
+  - Tailwind
+  - and more...
+
+## Frontend Setup
+
+`Installation`
+
+```bash
+cd client
+npm install
+```
+
+`Run`
+
+```bash
+npm start
+```
+
+will running on port 3000
+
+<br/>
+<br/>
+<br/>
+<br/>
+
+# Backend
+
+- Tool
+  - Spring Boot JPA
+  - Postgresql
+  - JWT
+  - Bcrypt
+
+## Backend Setup
+
+- สร้าง schema ใน database ชื่อ acs
+  เปลี่ยนค่าต่าง ๆ ใน file application.properties ในไฟล์ `application.properties` ใน folder `server/src/main/resources` ให้เปลี่ยนค่าต่าง ๆ ให้ตรงกับค่าของ database ที่ใช้ โดยค่า default จะเป็น Schema ชื่อ Test ใน database postgres
+
+```sql
+create schema YOUR_SCHEMA_NAME;
+```
+
+- `สร้าง folder secret ใน path ต่อไปนี้`
+
+```bash
+cd server/src/main/java/com/oop/server
+mkdir secret
+cd secret
+touch SecretKeyENV.java
+```
+
+- `ใน file SecretKeyENV.java ประกอบด้วย secretKey และ adminKey`
+
+```java
+package com.oop.server.secret;
+
+public class SecretKeyENV {
+  public static String secretKey = "your custom";
+  public static String adminKey = "your custom";
+}
+```
+
+### Folder Structure
+
+```bash
+src/
+|____test
+| |____java
+| | |____com
+| | | |____oop
+| | | | |____server
+| | | | | |____ServerApplicationTests.java
+|____main
+| |____resources
+| | |____static
+| | |____templates
+| | |____application.properties
+| |____java
+| | |____com
+| | | |____oop
+| | | | |____server
+| | | | | |____middleware
+| | | | | | |____TokenHandler.java
+| | | | | |____ServerApplication.java
+| | | | | |____repository
+| | | | | |____controller
+| | | | | |____model
+| | | | | |____secret
+```
+
+- Folder `Middleware` จะเก็บ middleware ต่างๆเอาไว้จัดการกับ request เช่น Token Handle.
+
+- Folder `Repository` จะเก็บการ Connection กับ database เช่น คำสั่งที่ใช้ในการ query.
+
+- Folder `Controller` จะเก็บการจัดการกับ request ที่เข้ามาจาก client และส่ง response กลับไป.
+
+  - สามารถดู API ต่าง ๆ ได้ผ่าน file API.txt
+
+- Folder `Model` จะเก็บ model entity ต่างๆที่ใช้ในการเก็บข้อมูล.
+
+- Folder `Secret` จะเก็บ secret key ต่างๆที่ใช้ในการเข้าถึงข้อมูล.
+
+<br/>
+<br/>
+<br/>
+<br/>
+
+# How to install
+
+- สามารถดูวิธีการติดตั้งงานได้ที่ [Click here](https://youtu.be/h8YF-NsLznU)

client/src/components/Calendar.tsx

@@ -7,6 +7,7 @@ import CalendarModal from "./CalendarModal";
 
 interface CalendarProps {
   store: CalendarStoreImpl;
+  theme: boolean;
 }
 
 const Calendar: React.FC<CalendarProps> = observer((props) => {
@@ -45,14 +46,17 @@ const Calendar: React.FC<CalendarProps> = observer((props) => {
           currMonth={currMonth}
           handleChangeMonth={handleChangeMonth}
           store={props.store}
+          theme={props.theme}
         />
         <CalendarBody
           currYear={currYear}
           currMonth={currMonth}
           store={props.store}
         />
       </div>
-      {props.store.modalOpen && <CalendarModal store={props.store} />}
+      {props.store.modalOpen && (
+        <CalendarModal store={props.store} theme={props.theme} />
+      )}
     </div>
   );
 });

client/src/components/CalendarAccordian.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import autoAnimate from "@formkit/auto-animate";
-import { MdOutlineClose } from "react-icons/md";
+import { FiX } from "react-icons/fi";
 import styled from "styled-components";
 import Chip from "./Chip";
 import { deleteEvent, EventType } from "../api/eventRouter";
@@ -15,6 +15,7 @@ import EventEditForm from "./EventEditForm";
 type CalendarAccordianProps = EventType & {
   store: AuthenStoreImpl;
   eventStore: CalendarStoreImpl;
+  theme: boolean;
 };
 
 const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
@@ -66,7 +67,7 @@ const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
   return (
     <div className="animate-popup">
       <div
-        className={`bg-[#1D2A36] p-5 flex items-center rounded-xl gap-4 ${
+        className={`bg-[#1D2A36] p-5 flex items-center rounded-xl gap-4 dark:bg-[#bfe2ff] ${
           show ? "max-w-[40vw] max-h-[50vh] overflow-scroll" : ""
         } min-w-[30vw]`}
       >
@@ -88,7 +89,7 @@ const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
               }`}
             >
               <HeaderCustom
-                className={`dropdown-label text-xl text-white hover:cursor-pointer ${
+                className={`dropdown-label text-xl text-white hover:cursor-pointer dark:text-black ${
                   show ? "text-3xl font-bold" : "max-w-[20vw] truncate"
                 }`}
                 onClick={reveal}
@@ -107,14 +108,14 @@ const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
               {props.store.user_status === 200 && !show ? (
                 <div className="flex">
                   <div
-                    className="mr-2 hover:bg-slate-300 hover:bg-opacity-40 duration-100 ease-in p-1 rounded-full cursor-pointer"
+                    className="mr-2 hover:bg-slate-300 hover:bg-opacity-40 duration-100 ease-in p-1 rounded-full cursor-pointer dark:hover:bg-white dark:hover:bg-opacity-70"
                     onClick={() => setOpenEditForm(true)}
                   >
                     <FcSupport size={25} />
                   </div>
 
                   <div
-                    className="mr-2 hover:bg-slate-300 hover:bg-opacity-40 duration-100 ease-in p-1 rounded-full cursor-pointer"
+                    className="mr-2 hover:bg-slate-300 hover:bg-opacity-40 duration-100 ease-in p-1 rounded-full cursor-pointer dark:hover:bg-white dark:hover:bg-opacity-70"
                     onClick={() => setDeleteInterupt(true)}
                   >
                     <FcFullTrash size={25} />
@@ -141,15 +142,25 @@ const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
             {show && (
               <div className="flex flex-grow items-start justify-end pl-10">
                 <div
-                  className="rounded-full p-2 hover:bg-slate-400 cursor-pointer duration-200 ease-linear"
+                  className="rounded-full p-2 hover:bg-slate-400 cursor-pointer duration-200 ease-linear dark:hover:bg-white dark:hover:bg-opacity-70"
                   onClick={reveal}
                 >
-                  <MdOutlineClose color="white" />
+                  <FiX className="dark:stroke-black" />
                 </div>
               </div>
             )}
           </div>
-          {show && <p className="text-white leading-7">{props.description}</p>}
+          {show && (
+            <div className="text-white leading-7  max-w-[35vw] break-words min-h-fit">
+              {props.description.split("\n").map((item) => {
+                return (
+                  <p className="dark:text-black" key={Math.random()}>
+                    {item}
+                  </p>
+                );
+              })}
+            </div>
+          )}
         </div>
       </div>
       {openEditform ? (
@@ -162,15 +173,20 @@ const CalendarAccordian: React.FC<CalendarAccordianProps> = (props) => {
           time_range={props.time_range}
           header={props.header}
           event_id={props.event_id}
+          theme={props.theme}
         />
       ) : (
         ""
       )}
+
       <ToastContainer
         position="bottom-right"
-        autoClose={1000}
-        hideProgressBar={true}
-        theme="light"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        theme={"dark"}
       />
     </div>
   );
@@ -190,7 +206,7 @@ const HeaderCustom = styled.p`
     height: 1px;
     bottom: 0px;
     left: 0;
-    background-color: white;
+    background-color: black;
     transform-origin: bottom right;
     transition: transform 0.2s ease-out;
   }

client/src/components/CalendarBody.tsx

@@ -21,7 +21,7 @@ interface CalendarBodyProps {
 
 const CalendarBody: React.FC<CalendarBodyProps> = observer((props) => {
   return (
-    <div className="border-2 rounded-3xl h-[90vh] m-14 bg-[#464675] overflow-scroll relative backdrop-blur-sm bg-opacity-40">
+    <div className="border-2 rounded-3xl h-[90vh] m-14 bg-[#464675] overflow-scroll relative backdrop-blur-sm bg-opacity-40 dark:bg-white dark:bg-opacity-30 duration-1000 ease-in dark:text-black dark:border-[#3f3f3f]">
       {props.store.workAll === null ? (
         <WaitingData animate={animationLottie} />
       ) : (
@@ -34,7 +34,7 @@ const CalendarBody: React.FC<CalendarBodyProps> = observer((props) => {
         {dateList.map((item, index) => {
           return (
             <div
-              className="flex justify-center items-center text-white border-b-[1px]"
+              className="flex justify-center items-center text-white dark:font-bold border-b-[1px] dark:text-[#3f3f3f] dark:border-[#3f3f3f] "
               key={index}
             >
               {item}

client/src/components/CalendarBox.tsx

@@ -16,42 +16,49 @@ const CalendarBox: React.FC<CalendarBoxProps> = observer((props) => {
   };
 
   return (
-    <div
-      className={`cursor-pointer p-[.5px] hover:p-0 duration-200 ease-in-out bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 w-[5.3rem] rounded-lg ${
-        props.isShow ? "block" : "hidden"
-      }`}
-      onClick={handleClick}
-    >
+    <div className="h-[6rem] items-center w-[5.3rem] mx-[23px]">
       <div
-        className={`h-20 rounded-lg overflow-scroll p-[2px] animate-boxOpen bg-[#2B1D36] ${
-          new Date().getDate() === props.day &&
-          new Date().getMonth() === props.store.currMonth &&
-          new Date().getFullYear() === props.store.currYear
-            ? "bg-opacity-50"
-            : ""
+        className={`cursor-pointer p-[1px] hover:p-0 duration-200 ease-in-out bg-gradient-to-tl from-[#653581] via-indigo-300 to-indigo-500 w-[5.3rem] rounded-lg dark:from-[#99cefa] dark:to-[#a1d3fc] ${
+          props.isShow ? "block" : "hidden"
         }`}
+        onClick={handleClick}
       >
-        <div className="px-1">
-          <p className="text-[#F9F9F9] font-mono">{props.day}</p>
-        </div>
-        <div className="flex flex-col gap-1 pb-1">
-          {props.store.checkWorkDay(props.day)
-            ? props.store.workDayFilter[props.day].map((item) => {
-                return (
-                  <div key={Math.random()} className="flex gap-1 items-center">
-                    <div className="pl-1">
-                      <div
-                        className="h-3 w-3 rounded-full cursor-pointer hover:bg-opacity-50 duration-200 ease-linear overflow-hidden"
-                        style={{ backgroundColor: `#${item.color.hex_code}` }}
-                      ></div>
+        <div
+          className={`h-20 rounded-lg overflow-scroll p-[2px] animate-boxOpen bg-[#261e3e] hover:bg-black hover:bg-opacity-10 dark:bg-white dark:bg-opacity- dark:hover:bg-gradient-to-tl dark:hover:from-[#c0d8eb] dark:hover:via-[#e9fcff] dark:hover:to-[#cfe9ff] dark:text-black ease-in duration-200 ${
+            new Date().getDate() === props.day &&
+            new Date().getMonth() === props.store.currMonth &&
+            new Date().getFullYear() === props.store.currYear
+              ? "bg-opacity-50 dark:bg-opacity-50 dark:bg-gradient-to-tl dark:from-[#d4e5f3] dark:via-[#eaf7f8] dark:to-[#d6e8fa]"
+              : ""
+          }`}
+        >
+          <div className="px-1">
+            <p className="text-[#F9F9F9] font-mono dark:text-black">
+              {props.day}
+            </p>
+          </div>
+          <div className="flex flex-col gap-1 pb-1">
+            {props.store.checkWorkDay(props.day)
+              ? props.store.workDayFilter[props.day].map((item) => {
+                  return (
+                    <div
+                      key={Math.random()}
+                      className="flex gap-1 items-center"
+                    >
+                      <div className="pl-1">
+                        <div
+                          className="h-3 w-3 rounded-full cursor-pointer hover:bg-opacity-50 duration-200 ease-linear overflow-hidden"
+                          style={{ backgroundColor: `#${item.color.hex_code}` }}
+                        ></div>
+                      </div>
+                      <p className="text-white text-[10px] truncate dark:text-black">
+                        {item.header}
+                      </p>
                     </div>
-                    <p className="text-white text-[10px] truncate">
-                      {item.header}
-                    </p>
-                  </div>
-                );
-              })
-            : ""}
+                  );
+                })
+              : ""}
+          </div>
         </div>
       </div>
     </div>

client/src/components/CalendarColorTheme.tsx

@@ -24,7 +24,7 @@ const CalendarColorTheme: React.FC<CalendarColorThemeProps> = observer(
     }, [props.colorStore]);
 
     return (
-      <div className="absolute border-2 w-[10rem] top-[5%] left-[2%] rounded-lg shadow-xl py-2">
+      <div className="absolute border-2 w-[10rem] top-[5%] left-[2%] rounded-lg shadow-xl py-2 dark:border-[#3f3f3f]">
         <div className="flex flex-col gap-[1px] px-2">
           {colordata.map((item, index) => {
             // wait fetch data from backend color table
@@ -39,11 +39,7 @@ const CalendarColorTheme: React.FC<CalendarColorThemeProps> = observer(
           })}
           {props.store.colorFilter.length ? (
             <div className="animate-popup">
-              <ColorTheme
-                title="reset filter"
-                color="FFFFFF"
-                store={props.store}
-              />
+              <ColorTheme title="reset filter" store={props.store} />
             </div>
           ) : (
             ""