# 我的日程本

:::info
:bulb: 最新進度：靜態頁面大致完成，等米浩睿那邊合併，與等待後端接口。
:::

## :book: 登陸頁面

:::success
使用一站式登陸，等待後端Post接口中。
:::

### 📑 代碼

const Login = () => {
    // 變數
    const [uid, SetUid] = useState("");
    const [pw, SetPW] = useState("");
    let navigate = useNavigate();

    // 根據使用者裝置螢幕大小自動縮放頁面
    if(window.innerWidth > window.innerHeight){
        return(
            <div className="hint"><h2>请将萤幕转为纵向或使用手机检视并重整页面</h2></div>
        );
    }
    else{
        // 頁面自動縮放
        let bodyStyle = document.body.style;
        bodyStyle.zoom = window.innerWidth/750;

        // 暫存學號與密碼
        function studentIDChange(value){
            SetUid(value);
        }
        function passwordChange(value){
            SetPW(value);
        }
        
        // Post數據再依照返回值判斷是否跳轉頁面
        function submitChange(){
            let LoginPost = postData("login", {"password": pw, "uid": uid});
            if(LoginPost === 114514) navigate("/HomePage");
            else alert("学号或密码错误，请再试一次。");
        }
        
        return(
            <div className="view">
                <img alt='' src={baseLayer} className="baseLayer"/>
                <img alt='' src={textBox} className="textBox"/>
                <img alt='' src={studentID} className="studentID"/>
                <img alt='' src={password} className="password"/>
                <Link to="/HomePage"><img alt='' src={login} className="login"/></Link>
                <img alt='' src={logo} className="logo"/>
                <img alt='' src={pottedPlant} className="pottedPlant2"/>
                <img alt='' src={bacterium} className="bacterium"/>
                <input type="text" className="studentIDText Text" onChange={studentIDChange}></input>
                <input type="password" className="passwordText Text" onChange={passwordChange}></input>
                <input type="submit" className="submit" onChange={submitChange}></input>
            </div>
        );
    }
}

export default Login;

### ✒️ 實際效果

#### 🖼〈圖一〉當屏幕寬度大於高度時，要求用戶將屏幕轉為縱向或使用手機進行瀏覽，並重整頁面。

#### 🖼〈圖二〉當用戶使用縱向屏幕進行瀏覽時。

#### 🖼〈圖三〉當學號或密碼錯誤時。

## :book: 主頁面

:::success
包含多個元件，點擊後進行頁面跳轉。右上方日曆日期根據本地時間同步更新。
:::

### 📑 代碼

const HomePage = () => {
    // 根據使用者裝置螢幕大小自動縮放頁面
    if(window.innerWidth > window.innerHeight){
        return(
            <div className="hint"><h2>请将萤幕转为纵向或使用手机检视并重整页面</h2></div>
        );
    }
    else{
        // 頁面自動縮放
        let bodyStyle = document.body.style;
        bodyStyle.zoom = window.innerWidth/750;

        // 變數
        let time = new Date();
        let month = time.getMonth()+1;
        let date = time.getDate();
        let timing = month + '.' + date;

        return(
            <div className="view">
                <img alt='' src={baseLayer} className="baseLayer"/>
                <Link to="/BulletinBoard"><img alt='' src={bulletinBoard} className="bulletinBoard"/></Link>
                <Link to="/Calendar">
                    <img alt='' src={calendar} className="calendar item"/>
                    <input type="text" className="timing" defaultValue={timing}></input>
                </Link>
                <Link to="/GarbageCan"><img alt='' src={garbageCan} className="garbageCan item"/></Link>
                <img alt='' src={paperAirplane} className="paperAirplane item"/>
                <img alt='' src={pottedPlant} className="pottedPlant1 item"/>
                <Link to="/TodoList"><img alt='' src={todoList} className="todoList item"/></Link>
            </div>
        );
    }
}

export default HomePage;

### ✒️ 實際效果

#### 🖼〈圖四〉主頁面。

#### 🖼〈圖五〉使用電腦版瀏覽器時，可點擊物件有hover效果。手機板則須長壓才有。

## :book: 背景板

:::success
可編輯與檢視當日代辦事項。等待後端Get、Put、Post接口中。
:::

### 📑 代碼

#### :small_blue_diamond: 主部件

const TodoList = () => {
    // 根據使用者裝置螢幕大小自動縮放頁面
    if(window.innerWidth > window.innerHeight){
        return(
            <div className="hint"><h2>请将萤幕转为纵向或使用手机检视并重整页面</h2></div>
        );
    }
    else{
        // 頁面自動縮放
        let bodyStyle = document.body.style;
        bodyStyle.zoom = window.innerWidth/750;

        return (
            <div className="base">
                <div className="view">
                    <img alt='' src={baseMap} className="baseMap" />
                    <img alt='' src={paper} className="paper" />
                    <TodolistOuterContent/>
                    <img alt='' src={greenBook} className="greenBook" />
                </div>
            </div>
        );
    }
}

#### :small_blue_diamond: 分部件
先暫時將todolist資料存處在本地。

const TodolistOuterContent = () => {
    // fetch
    let CheckGet = getJSON("calendar");
    console.log(CheckGet);
    let CompletePut = putData("calendar/check/", "<content>");
    let WritePost = postData("calendar/write", { "content": "" });


    // 本地暫存
    let todos = getTodos();
    const [temp, setTemp] = useState(todos);
    function getTodos(){
        const value = localStorage.getItem("todo") || "[]";
        return JSON.parse(value);
    }
    function setTodos(todos){
        const todosJson = JSON.stringify(todos);
        localStorage.setItem("todo", todosJson);
        setTemp(todos);
    }
    if (todos.length === 0){
        for (let i = 0; i < 10; i++) {
            todos.unshift({
                description: "",
                completed: false
            });
            setTodos(todos);
        }
    }

    // 更新本地
    function updateTodo(todo, key, value){
        todo[key] = value;
        setTodos(todos);
    }
    function todoChange(id, e){
        updateTodo(todos[id], "description", e.target.value);
        setTodos(todos);
    }
    function checked(id, e){
        updateTodo(todos[id], "completed", e.target.checked);
        setTodos(todos);
        window.location.reload();
    }
    
    return(
        <div className="TodolistOuterContent">
            <div className="TodolistContent">
                <img alt='' src={paperContent} className="paperContent" />
                <img alt='' src={checkBox} className="checkBox" />
                <img alt='' src={check} className={`check1 check ${temp[0].completed ? "a" : "b"}`} />
                <img alt='' src={check} className={`check2 check ${temp[1].completed ? "a" : "b"}`} />
                <img alt='' src={check} className={`check3 check ${temp[2].completed ? "a" : "b"}`} />
                <img alt='' src={check} className={`check4 check ${temp[3].completed ? "a" : "b"}`} />
                <img alt='' src={check} className={`check5 check ${temp[4].completed ? "a" : "b"}`} />
                <input type="checkbox" className="check1 checker" defaultChecked={temp[0].completed} onChange={checked.bind(this, 0)}></input>                            
                <input type="text" className="todo1 todo descriptionInput" defaultValue={temp[0].description} onChange={todoChange.bind(this, 0)}></input>
                <input type="checkbox" className="check2 checker" defaultChecked={temp[1].completed} onChange={checked.bind(this, 1)}></input>
                <input type="text" className="todo2 todo descriptionInput" defaultValue={temp[1].description} onChange={todoChange.bind(this, 1)}></input>
                <input type="checkbox" className="check3 checker" defaultChecked={temp[2].completed} onChange={checked.bind(this, 2)}></input>
                <input type="text" className="todo3 todo descriptionInput" defaultValue={temp[2].description} onChange={todoChange.bind(this, 2)}></input>
                <input type="checkbox" className="check4 checker" defaultChecked={temp[3].completed} onChange={checked.bind(this, 3)}></input>
                <input type="text" className="todo4 todo descriptionInput" defaultValue={temp[3].description} onChange={todoChange.bind(this, 3)}></input>
                <input type="checkbox" className="check5 checker" defaultChecked={temp[4].completed} onChange={checked.bind(this, 4)}></input>
                <input type="text" className="todo5 todo descriptionInput" defaultValue={temp[4].description} onChange={todoChange.bind(this, 4)}></input>
            </div>
            <div className="TodolistContent">
                <img alt='' src={paperContent} className="paperContent" />
                <img alt='' src={checkBox} className="checkBox" />
                <img alt='' src={check} className={`check1 check ${temp[5].completed ? "a" : "b"}`} />
                <img alt='' src={check} className={`check2 check ${temp[6].completed ? "a" : "b"}`} />
                <img alt='' src={check} className={`check3 check ${temp[7].completed ? "a" : "b"}`} />
                <img alt='' src={check} className={`check4 check ${temp[8].completed ? "a" : "b"}`} />
                <img alt='' src={check} className={`check5 check ${temp[9].completed ? "a" : "b"}`} />
                <input type="checkbox" className="check1 checker" defaultChecked={temp[5].completed} onChange={checked.bind(this, 5)}></input>                            
                <input type="text" className="todo1 todo descriptionInput" defaultValue={temp[5].description} onChange={todoChange.bind(this, 5)}></input>
                <input type="checkbox" className="check2 checker" defaultChecked={temp[6].completed} onChange={checked.bind(this, 6)}></input>
                <input type="text" className="todo2 todo descriptionInput" defaultValue={temp[6].description} onChange={todoChange.bind(this, 6)}></input>
                <input type="checkbox" className="check3 checker" defaultChecked={temp[7].completed} onChange={checked.bind(this, 7)}></input>
                <input type="text" className="todo3 todo descriptionInput" defaultValue={temp[7].description} onChange={todoChange.bind(this, 7)}></input>
                <input type="checkbox" className="check4 checker" defaultChecked={temp[8].completed} onChange={checked.bind(this, 8)}></input>
                <input type="text" className="todo4 todo descriptionInput" defaultValue={temp[8].description} onChange={todoChange.bind(this, 8)}></input>
                <input type="checkbox" className="check5 checker" defaultChecked={temp[9].completed} onChange={checked.bind(this, 9)}></input>
                <input type="text" className="todo5 todo descriptionInput" defaultValue={temp[9].description} onChange={todoChange.bind(this, 9)}></input>
            </div>           
        </div>
    );
}

export default TodolistOuterContent;

### ✒️ 實際效果

#### 🖼〈圖六〉背景板。

## :book: 垃圾桶

:::success
回顧過往已完成代辦事項。等待後端Get接口中。
:::

### 📑 代碼

#### :small_blue_diamond: 主部件

const GarbageCan = () => {
    // 根據使用者裝置螢幕大小自動縮放頁面
    if(window.innerWidth > window.innerHeight){
        return(
            <div className="hint"><h2>请将萤幕转为纵向或使用手机检视并重整页面</h2></div>
        );
    }
    else{
        // 頁面自動縮放
        let bodyStyle = document.body.style;
        bodyStyle.zoom = window.innerWidth/750;

        return(
            <div className="view">
                <img alt='' src={baseLayer} className="baseLayer2" />
                <img alt='' src={crumpledPaper} className="crumpledPaper" />
                <GarbageCanContentOuterBox/>
                <GarbageCanPastDate/>
            </div>
        );
    }
}

export default GarbageCan;

#### :small_blue_diamond: 分部件1

const GarbageCanContentOuterBox = () => {
    return(
        <div className="contentOuterBox">
            <GarbageCanContentBox/>
            <GarbageCanContentBox/>
        </div>
    );
}

export default GarbageCanContentOuterBox;

#### :small_blue_diamond: 分部件1之子部件

const GarbageCanContentBox = () => {
    // fetch
    let crash = getJSON("crash");
    console.log(crash);

    return(
        <div className="contentBox">
            <img alt='' src={crumpledPaperContent} className="" />
            <img alt='' src={check} className="pastChecker1" />
            <img alt='' src={check} className="pastChecker2" />
            <img alt='' src={check} className="pastChecker3" />
            <img alt='' src={check} className="pastChecker4" />
            <img alt='' src={check} className="pastChecker5" />
            <input type="checkbox" className="pastChecker1 pastChecker"></input>
            <input type="checkbox" className="pastChecker2 pastChecker"></input>
            <input type="checkbox" className="pastChecker3 pastChecker"></input>
            <input type="checkbox" className="pastChecker4 pastChecker"></input>
            <input type="checkbox" className="pastChecker5 pastChecker"></input>
            <input type="text" className="pastTodo1 pastTodo"></input>
            <input type="text" className="pastTodo2 pastTodo"></input>
            <input type="text" className="pastTodo3 pastTodo"></input>
            <input type="text" className="pastTodo4 pastTodo"></input>
            <input type="text" className="pastTodo5 pastTodo"></input>
        </div>
    );
}

export default GarbageCanContentBox;

#### :small_blue_diamond: 分部件2

const GarbageCanPastDate = () => {
    return(
        <div>
            <input type="text" className="tenDigitsOfTheMonth pastTime"></input>
            <input type="text" className="singleDigitOfTheMonth pastTime"></input>
            <input type="text" className="tenDigitsOfTheDate pastTime"></input>
            <input type="text" className="singleDigitOfTheDate pastTime"></input>
        </div>      
    );
}

export default GarbageCanPastDate;

### ✒️ 實際效果

#### 🖼〈圖七〉垃圾桶。