Merge pull request #2 from syzygy608/dev

temp front end finish, class table has problem

README.md

@@ -1,18 +1,38 @@
-# Vue 3 + TypeScript + Vite
+# Pineapple Schedule - A simple schedule web for CCU students
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Local development
 
-## Recommended IDE Setup
+### Prerequisites
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+- [Node.js](https://nodejs.org/en/) (>= 10.16.0)
+- [npm](https://www.npmjs.com/) (>= 6.9.0)
 
-## Type Support For `.vue` Imports in TS
+### Installation
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+```bash
+npm install
+```
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+### Run
 
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+```bash
+npm run dev
+```
+
+### Build
+
+```bash
+npm run build
+```
+
+### Preview
+
+```bash
+npm run preview
+```
+
+### Tailwind CSS Hot Reload
+
+```bash
+npm run hotfix
+```

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "hotfix": "npx tailwindcss -i ./src/css/style.css -o ./src/css/tailwind.css --minify --watch"
   },
   "dependencies": {
     "vue": "^3.2.47",

src/components/announcement.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class = "w-full text-center px-3 md:w-8/12 mx-auto py-9">
+        <div class = 'text-orange-300 font-semibold text-3xl'>
+            公告
+        </div>
+        <div class = 'mx-auto my-2 py-5 px-10 shadow-xl rounded-xl text-center bg-gray-100/10'>
+            若要刪除單一課程，請點擊下方之展開課程列表，<br>
+            即可看到已選課程，點擊刪除按鈕即可刪除。
+        </div>
+    </div>
+</template>

src/components/classTable.vue

@@ -1,8 +1,8 @@
 <template>
-    <table class = 'w-11/12 bg-orange-100/50 rounded-md my-3 py-1 mx-auto border-separate md:w-9/12'>
+    <table class = 'w-11/12 bg-orange-100/50 rounded-lg px-2 my-3 py-2 mx-auto border-separate shadow-lg md:w-9/12' id = "class_table">
         <thead>
             <tr>
-                <th class = "py-3 border-collapse bg-orange-100 " v-for = "day in week"> {{ day }} </th>
+                <th class = "py-3 border-collapse bg-orange-100 rounded-lg" v-for = "day in week"> {{ day }} </th>
             </tr>
         </thead>
         <tbody>
@@ -35,11 +35,11 @@ var data = [
     ["7", "E", "", "", "", "", "", ""], 
     ["7", "E", "", "", "", "", "", ""], 
     ["8", "E", "", "", "", "", "", ""], 
-    ["8", "F", "", "", "", "", "", ""], 
-    ["9", "F", "", "", "", "", "", ""], 
-    ["9", "F", "", "", "", "", "", ""], 
-    ["10", "G", "", "", "", "", "", ""], 
-    ["10", "G", "", "", "", "", "", ""], 
+    ["8", "F", "", "", "", "", "", "5"], 
+    ["9", "F", "", "", "", "", "", "5"], 
+    ["9", "F", "", "", "", "", "", "7"], 
+    ["10", "G", "", "", "", "", "", "7"], 
+    ["10", "G", "", "", "", "", "", "7"], 
     ["11", "G", "", "", "", "", "", ""], 
     ["11", "H", "", "", "", "", "", ""], 
     ["12", "H", "", "", "", "", "", ""], 
@@ -51,7 +51,7 @@ var data = [
     ["15", "J", "", "", "", "", "", ""], 
     ["15", "J", "", "", "", "", "", ""]
 ]
-
+/*
 function rowspanData(data)
 {
     let rowspanData = []
@@ -82,8 +82,46 @@ function rowspanData(data)
         rowspanData.push(rowsArray)
     }
     return rowspanData
-}
+}*/
 
+function rowspanData(data)
+{
+    // we create a table with data, and then we will use this table to create a rowspan table
+    // if the data element is the same as the previous one, we will try to merge them together
+    let rowspanData = []
+    for(let i = 0; i < data.length; i++)
+    {
+        let rowsArray = [] //一行
+        for(let j = 0; j < data[i].length; j++)
+        {
+            let obj = 
+            {
+                name: data[i][j],
+                rowspan: 1, //行
+                visible: 1
+            }
+            if(i == 0)
+                rowsArray.push(obj)
+            if(i > 0)
+            {
+                if(data[i][j] == data[i - 1][j])
+                {
+                    obj.rowspan = rowspanData[i - 1][j].rowspan + 1;
+                    rowspanData[i - 1][j].visible = 0;
+                    rowspanData[i - 1][j].rowspan = 0;
+                }
+                else
+                    rowspanData[i - 1][j].visible = 1;
+                if(i == data.length - 1)
+                    obj.visible = 1;
+                rowsArray.push(obj)
+            }
+        }
+        rowspanData.push(rowsArray)
+    }
+    console.log(rowspanData)
+    return rowspanData
+}
 var renderData = rowspanData(data)
 
 </script>

src/components/interact.vue

@@ -1,10 +1,16 @@
 <template>
-    <div class = "w-11/12 mx-auto my-6 px-3 py-3 bg-orange-100/60 rounded-lg md:w-9/12">
+    <div class = "w-11/12 mx-auto my-6 px-4 py-4 bg-gray-100 rounded-lg shadow-lg md:w-9/12">
         <div class = 'text-xl font-semibold'>
             開始建置你的課表    
         </div>
         <div class = "my-2">
-            <form class = 'flex py-1 mx-auto'>
+            <div class = 'flex py-1 mx-auto'>
+                <div class = 'mx-3 py-1 font-semibold'>
+                    課程搜尋
+                </div>
+                <input class = 'mx-2 w-10/12 py-1 rounded-md text-center' type = "text" placeholder = "在此搜尋課程"/>
+            </div>
+            <div class = 'flex py-1 mx-auto items-center'>
                 <div class = 'mx-3 py-1 font-semibold'>
                     課程資訊
                 </div>
@@ -22,41 +28,72 @@
                     <option selected>終堂</option>
                     <option v-for = "cla in classes" :value = "cla">{{cla}}</option>
                 </select>
-                <button class = 'btn-normal'>
+                <button class = 'btn-normal' v-on:click = "push_to_table">
                     新增課程
                 </button>
-            </form>
-            <div class = 'mx-3 text-red-500'>
-
             </div>
             <hr class = 'mx-3 my-3 text-slate-300'>
             <div class = 'flex place-content-end'>
-                <button class = 'btn-normal'>
+                <input type = "checkbox" id = "checkbox" v-model = "checked">
+                <label for = "checkbox" class = "px-3 items-center flex">顯示學分</label>
+                <button class = 'btn-normal' v-on:click = "show_list">
                     展開課程列表
                 </button>
-                <button class = 'btn-normal'>
+                <button class = 'btn-normal' v-on:click = "clearTable">
                     清空課表
                 </button>
-                <button class = 'btn-normal' v-on:click = "download()">
+                <button class = 'btn-normal' v-on:click = "download">
                     下載課表
                 </button>
             </div>
+            <div id = "class_list" v-if = "class_list_visible == true">
+                <p class = "text-right py-2 mx-3" v-show = "checked">
+                    目前學分: {{credit}}
+                </p>
+                <table class = "w-full my-1 mb-1">
+                    <thead>
+                        <tr>
+                            <th v-for = "title in class_list_title" class = "text-center py-2 px-2 border-collapse bg-gray-200">
+                                {{title}}
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup>
 import { ref } from "@vue/reactivity"
+import renderImage from "../functions/image_render.ts"
+import courseAdd from "../functions/course_add.ts"
 const week = ["一", "二", "三", "四", "五", "六"]
 const classes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
 const className = ref()
 const classRoom = ref()
 const weekDay = ref("星期")
 const start = ref("始堂")
 const end = ref("終堂")
-var alert = ""
+let class_list_title = ["課程名稱", "課程教室", "課程時間", "操作"];
+let class_list_visible = ref(false);
+let checked = ref(false);
+let credit = ref(0);
 
-const download = () => {
-    
+var show_list = function() {
+    class_list_visible.value = !class_list_visible.value
 }
+
+var push_to_table = function() {
+    // 手動新增課程
+    // courseAdd(className.value: string, classRoom.value: string, weekDay.value: string, start.value: string, end.value: string)
+    courseAdd(className.value, classRoom.value, weekDay.value, start.value, end.value)
+}
+
+var download = function() {
+    renderImage("class_table") // finish 
+}
+
 </script>

src/components/intro.vue

@@ -1,25 +1,13 @@
 <template>
     <div class = "w-full mx-auto">
         <div>
-            <div class = "mx-auto py-12 bg-slate-100">
-                <div class = 'w-full px-3 md:w-8/12 mb-3 mx-auto tracking-tight'>
-                    <div class = 'bg-gradient-to-br from-orange-300 to-red-700 text-transparent bg-clip-text font-semibold text-3xl'>
-                        CCU Pineapple Schedule
-                    </div>
-                    <div class = 'font-semibold text-3xl'>
-                        阿梨課表
-                    </div>
-                    <div class = 'text-xl text-gray-500 my-1'>
-                        歡迎來到專屬於所有中正人的排課與課表製作網頁服務
-                    </div>
-                </div>
-            </div>
+
             <div class = "w-full px-3 md:w-8/12 mx-auto py-9">
                 <div class = 'text-orange-300 font-semibold text-3xl'>
                     初次見面?
                 </div>
                 <div class = 'text-xl text-gray-500 my-1'>
-                    我們是現在就讀於中正大學的學生，為了改善中正學生的排課選課體驗而建立了阿梨課表團隊，<br>
+                    我們是現在就讀於中正大學的學生，為了改善中正學生的排課選課體驗而建立了鳳梨課表團隊，<br>
                     希望能透過我們所學和自身經驗打造一個更加舒適且符合中正學生所需的服務。<br><br>
                     目前本網站提供之功能如下<br>
                     <ol class = 'list-decimal list-inside my-3'>
@@ -64,7 +52,7 @@
                 <div class = 'text-orange-300 font-semibold text-3xl'>
                     相關連結
                 </div>
-                <div class = 'w-8/12 mx-auto my-5'>
+                <div class = 'w-8/12 mx-auto my-5 py-5'>
                     <a class = 'btn-link' href = 'https://github.com/syzygy608/AhriSchedule' target = "_blank">Github原始碼</a>
                     <a class = 'btn-link' href = 'https://forms.gle/j9MKseJp9e89SAxJ6' target = "_blank">回饋表單</a>
                 </div>

src/components/navbar.vue

@@ -7,7 +7,7 @@ const router = useRouter();
     <div class = "z-40 bg-orange-200 px-3 py-3 flex items-center place-content-between">
         <router-link to = "/">
             <div class = "font-bold text-2xl bg-gradient-to-br from-orange-300 to-red-700 text-transparent bg-clip-text">
-                阿梨課表
+                鳳梨課表
             </div>
         </router-link>
         <div class = "text-md hidden md:block">

src/css/style.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+img
+{
+    display: unset;
+}
 .btn-head
 {
     @apply rounded-3xl px-5 py-2 mx-1 hover:bg-white duration-500;
@@ -16,7 +20,7 @@
 }
 .btn-normal
 {
-    @apply text-center font-medium mx-2 px-5 py-1 border-2 border-orange-200 bg-orange-200 rounded-lg hover:bg-transparent duration-500;
+    @apply text-center shadow-2xl text-white font-medium mx-2 px-5 py-1 border-2 border-gray-500 bg-gray-500 rounded-lg hover:bg-transparent hover:text-black duration-500;
 }
 table
 {