# Django 程式
## Templates
### layout.html
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{% load static %}
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="Shortcut Icon" type="image/x-icon" href="{% static 'images/logo.jpg' %}"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.css" />
{% block css %}{% endblock %}
<title>EzAnalysis</title>
{% load bootstrap4 %}
</head>
<body>
{% block body %}{% endblock %}
</body>
<!-- LineLiff.js -->
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<!-- SweetAlert2.js -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.js" type="text/javascript"></script>
{% block js %}{% endblock %}
</html>
```
### Diary
* EzAnalysis/EmotionDiary/templates/Diary/
#### MenuDiary.html
```html=
{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/menuDiary.css' %}">
{% endblock %}
{% block body %}
<div id="menu">
<div id="userid" style="display:none;">{{ pk }}</div>
<div id="message" style="display:none;">{{ message }}</div>
<div id="bh">
<!-- 拍立得線 -->
<svg class="_13" viewBox="0 0 259 59.969">
<path id="_13" d="M 259 0 C 259 0 207.640869140625 38.790283203125 142.890869140625 52.790283203125 C 78.140869140625 66.790283203125 0 56 0 56">
</path>
</svg>
<!-- KEEP -->
<div id="KEEP_bn">
<span>KEEP</span>
</div>
<div id="KEEP">
<span>KEEP</span>
</div>
<!-- Diary -->
<div id="DIARY_bn">
<span>DIARY</span>
</div>
<div id="DIARY">
<span>DIARY</span>
</div>
<img id="_bh" src="{% static 'images/decoration/_bh.png' %}" srcset="{% static 'images/decoration/_bh.png' %} 1x, {% static 'images/decoration/_bh@2x.png' %} 2x">
<!-- 拍立得1 -->
<div id="_61">
<svg class="_136">
<rect id="_136" rx="0" ry="0" x="0" y="0" width="45.66" height="63.539">
</rect>
</svg>
<img id="vh9keWU" src="{% static 'images/decoration/vh9keWU.png' %}" srcset="{% static 'images/decoration/vh9keWU.png' %} 1x, {% static 'images/decoration/vh9keWU@2x.png' %} 2x">
</div>
<img id="clothespin_PNG57" src="{% static 'images/decoration/clothespin_PNG57.png' %}" srcset="{% static 'images/decoration/clothespin_PNG57.png' %} 1x, {% static 'images/decoration/clothespin_PNG57@2x.png' %} 2x">
<!-- 拍立得2 -->
<div id="_62">
<svg class="_136_bu">
<rect id="_136_bu" rx="0" ry="0" x="0" y="0" width="45.66" height="63.539">
</rect>
</svg>
<img id="ID8164a8766028c1cc7d82587f62dd" src="{% static 'images/decoration/ID8164a8766028c1cc7d82587f62dd.png' %}" srcset="{% static 'images/decoration/ID8164a8766028c1cc7d82587f62dd.png' %} 1x, {% static 'images/decoration/ID8164a8766028c1cc7d82587f62dd@2x.png' %} 2x">
</div>
<img id="clothespin_PNG57_bw" src="{% static 'images/decoration/clothespin_PNG57.png' %}" srcset="{% static 'images/decoration/clothespin_PNG57.png' %} 1x, {% static 'images/decoration/clothespin_PNG57@2x.png' %} 2x">
</div>
<!-- 新增日記 -->
<div id="_ba">
<button id="add_btn" onclick="addDiary(this);">
<svg class="_127">
<rect id="_127" rx="5" ry="5" x="0" y="0" width="350" height="203">
</rect>
</svg>
<svg class="_126">
<rect id="_126" rx="5" ry="5" x="0" y="0" width="328" height="182">
</rect>
</svg>
<div id="Add_Diary">
<span>新增日記</span>
</div>
</button>
<div id="w644">
<img id="w644_1" src="{% static 'images/decoration/w644_1.png' %}" srcset="{% static 'images/decoration/w644_1.png' %} 1x, {% static 'images/decoration/w644_1@2x.png' %} 2x">
</div>
</div>
<!-- 修改日記 -->
<div id="_ba1">
<button id="edit_btn" onclick="editDiary(this);">
<svg class="_125">
<rect id="_125" rx="5" ry="5" x="0" y="0" width="350" height="203">
</rect>
</svg>
<svg class="_128">
<rect id="_128" rx="5" ry="5" x="0" y="0" width="328" height="182">
</rect>
</svg>
<div id="Revise_Diary">
<span>修改日記</span>
</div>
</button>
<div id="w644_bj">
<img id="w644_1_bj" src="{% static 'images/decoration/w644_1.png' %}" srcset="{% static 'images/decoration/w644_1.png' %} 1x, {% static 'images/decoration/w644_1@2x.png' %} 2x">
</div>
<div id="_bc">
<div id="img_bc">
<img id="_be" src="{% static 'images/decoration_be.png' %}" srcset="{% static 'images/decoration/_be.png' %} 1x, {% static 'images/decoration/_be@2x.png' %} 2x">
<img id="_bf" src="{% static 'images/decoration/_bf.png' %}" srcset="{% static 'images/decoration/_bf.png' %} 1x, {% static 'images/decoration/_bf@2x.png' %} 2x">
<img id="_1" src="{% static 'images/decoration/_1.png' %}" srcset="{% static 'images/decoration/_1.png' %} 1x, {% static 'images/decoration/_1@2x.png' %} 2x">
</div>
</div>
</div>
<div id="img_3">
<img id="_3" src="{% static 'images/decoration/_3.png' %}" srcset="{% static 'images/decoration/_3.png' %} 1x, {% static 'images/decoration/_3@2x.png' %} 2x">
</div>
</div>
{% endblock %}
{% block js %}
<script src="{% static 'js/menuDiary.js' %}"></script>
{% endblock %}
```
#### addDiary1.html
```html=
{% extends 'layout.html' %}
{% load bootstrap4 %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/addDiary1.css' %}" xmlns="http://www.w3.org/1999/html">
{% endblock %}
{% block body %}
<form id="diaryForm1" method="post" action="" class="form" enctype="multipart/form-data">
{% csrf_token %}
<div id="ID2">
<!-- userid -->
{{ diary_form.line_id }}
<!-- 日期&時間 -->
<div id="date"></div>
<div id="time"></div>
{{ diary_form.date }}
<div id="line_9">
<svg id="line">
<path class="line" d="M 0 0 L 188.712890625 0 L 295 0">
</path>
</svg>
</div>
<!-- mood -->
<div id="emoji">
{{ diary_form.mood }}
<div id="area_1">
<!-- 洞洞 -->
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
</div>
<img id="w644" src="{% static 'images/decoration/w644.png' %}" srcset="{% static 'images/decoration/w644.png' %} 1x, {% static 'images/decoration/w644@2x.png' %} 2x">
<div id="emoji_text">
<span>今天心情如何呢？</span>
</div>
<div id="emoji_block">
<div id="cry">
<button id="cry_btn" name="emoji_btn" type="button" class="btn1" value="1">
<img id="ID051-cry" class="emoji_img" src="{% static 'images/moods/ID051-cry.png'%}" srcset="{% static 'images/moods/ID051-cry.png' %} 1x, {% static 'images/moods/ID051-cry@2x.png' %} 2x" style="padding: 2px">
</button>
<div id="cry_text" class="emoji_text">超難過</div>
</div>
<div id="sad">
<button id="sad_btn" name="emoji_btn" type="button" class="btn1" value="2">
<img id="ID051-sad" class="emoji_img" src="{% static 'images/moods/ID051-sad.png' %}" srcset="{% static 'images/moods/ID051-sad.png' %} 1x, {% static 'images/moods/ID051-sad@2x.png' %} 2x" style="padding: 2px;">
</button>
<div id="sad_text" class="emoji_text">難過</div>
</div>
<div id="neutral">
<button id="neutral_btn" name="emoji_btn" type="button" class="btn1" value="3">
<img id="ID051-neutral" class="emoji_img" src="{% static 'images/moods/ID051-neutral.png' %}" srcset="{% static 'images/moods/ID051-neutral.png' %} 1x, {% static 'images/moods/ID051-neutral@2x.png' %} 2x">
</button>
<div id="neutral_text" class="emoji_text">普通</div>
</div>
<div id="happy">
<button id="happy_btn" name="emoji_btn" type="button" class="btn1" value="4">
<img id="ID051-happy" class="emoji_img" src="{% static 'images/moods/ID051-happy.png' %}" srcset="{% static 'images/moods/ID051-happy.png' %} 1x, {% static 'images/moods/ID051-happy@2x.png' %} 2x">
</button>
<div id="happy_text" class="emoji_text">開心</div>
</div>
<div id="joy">
<button id="joy_btn" name="emoji_btn" type="button" class="btn1" value="5">
<img id="ID051-joy" class="emoji_img" src="{% static 'images/moods/ID051-joy.png' %}" srcset="{% static 'images/moods/ID051-joy.png' %} 1x, {% static 'images/moods/ID051-joy@2x.png' %} 2x">
</button>
<div id="joy_text" class="emoji_text">超開心</div>
</div>
</div>
</div>
<div id="_bx">
<div id="area_2">
<!-- 洞洞 -->
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
</div>
<div id="w644_1">
<img class="w644_1" src="{% static 'images/decoration/w644_1.png' %}" srcset="{% static 'images/decoration/w644_1.png' %} 1x, {% static 'images/decoration/w644_1@2x.png' %} 2x">
</div>
<div id="Face_Scanning">
<span class="Face_Scanning">Face Scanning</span>
<!-- input pic -->
<div id="user_photo" style="display: none">{{ diary_form.pic.value }}</div>
<img id="image" name="pic" class="image" src="">
{{ diary_form.pic }}
</div>
</div>
<div id="next">
<img id="_3" src="{% static 'images/decoration/_3.png' %}" srcset="{% static 'images/decoration/_3.png' %} 1x, {% static 'images/decoration/_3@2x.png' %} 2x">
<div id="next_btn">
<input id="_27" type="button" onclick="check(this);">
<svg class="_10" viewBox="0 0 30.915 15.458">
<path id="_10" d="M 30.9150390625 0 L 15.45751953125 15.45751953125 L 0 0">
</path>
</svg>
<div id="next_text">
<span>繼續</span>
</div>
</div>
</div>
</div>
</form>
{% endblock %}
{% block js %}
<script src="{% static 'js/addDiary1.js' %}"></script>
<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
{% endblock %}
```
#### addDiary2.html
```html=
{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/addDiary2.css' %}" xmlns="http://www.w3.org/1999/html">
{% endblock %}
{% block body %}
<form id="diaryForm2" method="post" action="" class="form" enctype="multipart/form-data">
{% csrf_token %}
<div id="ID2">
<!-- banner -->
<div id="banner">
<div id="mood" style="display:none">{{ get_diary.mood }}</div>
<div id="banner_text">
<div id="mood_text">
</div>
那今天做了什麼呢？
</div>
</div>
<!-- 裝飾 -->
<div id="decoration">
<div id="area">
<!-- 洞洞 -->
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
<svg class="dot"><ellipse class="dot_dot" rx="7.5" ry="7.5" cx="7.5" cy="7.5"></ellipse></svg>
</div>
<div id="w644_1">
<img class="w644_1" src="{% static 'images/decoration/w644_1.png' %}" srcset="{% static 'images/decoration/w644_1.png' %} 1x, {% static 'images/decoration/w644_1@2x.png' %} 2x">
</div>
<div id="user_things" style="display: none;">
{% for ut in user_things %}
<div id="{{ ut.things_id.things_id }}"></div>
{% endfor %}
</div>
{{ thing_form.things_id }}
<!-- 按鈕 -->
<div id="default_things">
<!-- shopping -->
<div id="T001" class="shopping">
<button id="shopping_btn" type="button" name="thing_btn" class="btn1" value="T001">
<img class="thing_img" src="{% static 'images/things/shopping-bag.png' %}" srcset="{% static 'images/things/shopping-bag.png' %} 1x, {% static 'images/things/shopping-bag@2x.png' %} 2x">
</button>
<div class="thing_text">購物</div>
</div>
<!-- eat -->
<div id="T002" class="eat">
<button id="eat_btn" type="button" name="thing_btn" class="btn1" value="T002">
<img class="thing_img" src="{% static 'images/things/fast-food.png' %}" srcset="{% static 'images/things/fast-food.png' %} 1x, {% static 'images/things/fast-food@2x.png' %} 2x">
</button>
<div class="thing_text">美食</div>
</div>
<!-- friends -->
<div id="T003" class="friend">
<button id="friend_btn" type="button" name="thing_btn" class="btn1" value="T003">
<img class="thing_img" src="{% static 'images/things/friends.png' %}" srcset="{% static 'images/things/friends.png' %} 1x, {% static 'images/things/friends@2x.png' %} 2x">
</button>
<div class="thing_text">朋友</div>
</div>
<!-- game -->
<div id="T004" class="game">
<button id="game_btn" type="button" name="thing_btn" class="btn1" value="T004">
<img class="thing_img" src="{% static 'images/things/joystick.png' %}" srcset="{% static 'images/things/joystick.png' %} 1x, {% static 'images/things/joystick@2x.png' %} 2x">
</button>
<div class="thing_text">玩遊戲</div>
</div>
<!-- sport -->
<div id="T005" class="sport">
<button id="sport_btn" type="button" name="thing_btn" class="btn1" value="T005">
<img class="thing_img" src="{% static 'images/things/sport.png' %}" srcset="{% static 'images/things/sport.png' %} 1x, {% static 'images/things/sport@2x.png' %} 2x">
</button>
<div class="thing_text">運動</div>
</div>
<!-- favourite -->
<div id="T006" class="favourite">
<button id="favourite_btn" type="button" name="thing_btn" class="btn1" value="T006">
<img class="thing_img" src="{% static 'images/things/favourite.png' %}" srcset="{% static 'images/things/favourite.png' %} 1x, {% static 'images/things/favourite@2x.png' %} 2x">
</button>
<div class="thing_text">約會</div>
</div>
<!-- clean -->
<div id="T007" class="clean">
<button id="clean_btn" type="button" name="thing_btn" class="btn1" value="T007">
<img class="thing_img" src="{% static 'images/things/broom.png' %}" srcset="{% static 'images/things/broom.png' %} 1x, {% static 'images/things/broom@2x.png' %} 2x">
</button>
<div class="thing_text">清潔</div>
</div>
<!-- travel -->
<div id="T008" class="travel">
<button id="travel_btn" type="button" name="thing_btn" class="btn1" value="T008">
<img class="thing_img" src="{% static 'images/things/luggage.png' %}" srcset="{% static 'images/things/luggage.png' %} 1x, {% static 'images/things/luggage@2x.png' %} 2x">
</button>
<div class="thing_text">旅行</div>
</div>
<!-- work -->
<div id="T009" class="work">
<button id="work_btn" type="button" name="thing_btn" class="btn1" value="T009">
<img class="thing_img" src="{% static 'images/things/briefcase.png' %}" srcset="{% static 'images/things/briefcase.png' %} 1x, {% static 'images/things/briefcase@2x.png' %} 2x">
</button>
<div class="thing_text">工作</div>
</div>
<!-- relax -->
<div id="T010" class="relax">
<button id="relax_btn" type="button" name="thing_btn" class="btn1" value="T010">
<img class="thing_img" src="{% static 'images/things/relaxing.png' %}" srcset="{% static 'images/things/relaxing.png' %} 1x, {% static 'images/things/relaxing@2x.png' %} 2x">
</button>
<div class="thing_text">放鬆</div>
</div>
<!-- party -->
<div id="T011" class="party">
<button id="party_btn" type="button" name="thing_btn" class="btn1" value="T011">
<img class="thing_img" src="{% static 'images/things/confetti.png' %}" srcset="{% static 'images/things/confetti.png' %} 1x, {% static 'images/things/confetti@2x.png' %} 2x">
</button>
<div class="thing_text">派對</div>
</div>
<!-- reading -->
<div id="T012" class="reading">
<button id="reading_btn" type="button" name="thing_btn" class="btn1" value="T012">
<img class="thing_img" src="{% static 'images/things/open-book.png' %}" srcset="{% static 'images/things/open-book.png' %} 1x, {% static 'images/things/open-book@2x.png' %} 2x">
</button>
<div class="thing_text">閱讀</div>
</div>
<!-- movie -->
<div id="T013" class="movie">
<button id="movie_btn" type="button" name="thing_btn" class="btn1" value="T013">
<img class="thing_img" src="{% static 'images/things/video-player.png' %}" srcset="{% static 'images/things/video-player.png' %} 1x, {% static 'images/things/video-player@2x.png' %} 2x">
</button>
<div class="thing_text">看電影</div>
</div>
<!-- other -->
<div id="T014" class="other">
<button id="other_btn" type="button" name="thing_btn" class="btn1" value="T014">
<img class="thing_img" src="{% static 'images/things/add.png' %}" srcset="{% static 'images/things/add.png' %} 1x, {% static 'images/things/add@2x.png' %} 2x">
</button>
<div class="thing_text">其他</div>
</div>
</div>
</div>
<div id="next">
<img id="_3" src="{% static 'images/decoration/_3.png' %}" srcset="{% static 'images/decoration/_3.png' %} 1x, {% static 'images/decoration/_3@2x.png' %} 2x">
<div id="next_btn">
<input id="_27" type="button" onclick="check(this);">
<svg class="_10" viewBox="0 0 30.915 15.458">
<path id="_10" d="M 30.9150390625 0 L 15.45751953125 15.45751953125 L 0 0">
</path>
</svg>
<div id="next_text">
<span>繼續</span>
</div>
</div>
</div>
</div>
</form>
{% endblock %}
{% block js %}
<script src="{% static 'js/addDiary2.js' %}"></script>
{% endblock %}
```
#### addDiary3.html
```html=
{% extends 'layout.html' %}
{% load bootstrap4 %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/addDiary3.css' %}">
{% endblock %}
{% block body %}
<form id="DiaryForm3" action="" method="post" class="form" enctype="multipart/form-data">
{% csrf_token %}
<div id="ID2">
<img id="background_img" src="{% static 'images/decoration/_2.png' %}" srcset="{% static 'images/decoration/_2.png' %} 1x, {% static 'images/decoration/_2@2x.png' %} 2x">
<!-- banner -->
<div id="banner">
<!-- banner_text -->
<div id="banner_text">今天想說什麼呢？</div>
<!--完成-->
<div id="finish_area">
<button id="finish_button" onclick="check(this);">
<span id="finish_text">完成</span>
</button>
</div>
<!-- 郵戳 -->
<img id="_dg" src="{% static 'images/decoration/_dg.png' %}" srcset="{% static 'images/decoration/_dg.png' %} 1x, {% static 'images/decoration/_dg@2x.png' %} 2x">
</div>
<!-- 備註 -->
<div id="text_msg">
{{ diary_form.note }}
</div>
<!-- 所選取做的事 -->
<div id="list">
{% for user_thing in get_thing %}
<div id="msg">
<div id="msg_thing">
{% for dt in default_thing %}
{% if dt.things_id == user_thing.things_id %}
<div id="msg_img">
<img class="msg_img" src="{% static 'images/' %}{{ dt.things_img }}">
</div>
<div id="msg_text">{{ dt.things }}</div>
{% endif %}
{% endfor %}
</div>
<div id="msg_btn">
{% for dn in default_note %}
{% if dn.things_id.things_id == user_thing.things_id %}
<button id="{{ dn.note_id }}" name="default_btn" type="button" class="btn1" value="{{ dn.default_note }}" onclick="thingSelect(this);">{{ dn.default_note }}</button>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</form>
{% endblock %}
{% block js %}
<script src="{% static 'js/addDiary3.js' %}"></script>
{% endblock %}
```
#### editDiary.html
```html=
{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/editDiary.css' %}">
{% endblock %}
{% block body %}
<form id="editDiaryForm" action="" method="post" class="form" enctype="multipart/form-data">
{% csrf_token %}
<div id="ID2">
<!-- title -->
<div id="title">
<span class="title">更改日記</span>
</div>
{{ diary_form.line_id }}
<!-- Date -->
{{ diary_form.date }}
<div id="_50">
<div id="Date">
<div id="date_text">Date</div>
<input id="date_input" type="date" value="" disabled>
</div>
</div>
<!-- Time -->
<div id="_51">
<div id="Time">
<div id="time_text">Time</div>
<input id="time_input" type="time" value="" disabled>
</div>
</div>
<!-- Mood -->
<div id="_52">
<div id="Mood">
<div id="mood_text">心情</div>
{{ diary_form.mood }}
<button id="mood_btn" type="button" onclick="showMood(this);">
<img id="mood_img" src="" srcset="">
</button>
</div>
</div>
<!-- Thing -->
<div id="_53">
<div id="Thing">
<div id="thing_text">事件</div>
<svg id="_9" viewBox="0 0 348 1">
<path class="_9" d="M 0 0 L 255.796875 0 L 348 0">
</path>
</svg>
<div id="get_user_thing" style="display: none;">
{% for ut in user_things %}
<div id="{{ ut.things_id.things_id }}"></div>
{% endfor %}
</div>
{{ thing_form.things_id }}
<button id="thing_btn" type="button" onclick="showThing(this);">
</button>
</div>
</div>
<!-- Photo -->
<div id="_54">
<div id="Photo">
<img id="image" class="image" src="{{ MEDIA_URL }}{{ diary_form.pic.value }}">
{{ diary_form.pic }}
</div>
<!-- Finish -->
<div id="Finish">
<button id="finish_btn" onclick="check(this);">
<span id="finish_text">完成</span>
</button>
</div>
</div>
<!-- Mood_test -->
<div id="mood_win" style="opacity: 0; display: none;">
<div id="mood_emoji">
<div class="text">選擇心情</div>
<svg id="line" viewBox="0 0 562 5">
<path class="line" d="M 562 0 L 0 0">
</path>
</svg>
<div id="emoji">
<div id="cry">
<button id="cry_btn" name="emoji_btn" type="button" class="btn1" value="1">
<img id="ID051-cry" class="emoji_img" src="{% static 'images/moods/ID051-cry.png'%}" srcset="{% static 'images/moods/ID051-cry.png' %} 1x, {% static 'images/moods/ID051-cry@2x.png' %} 2x" style="padding: 2px">
</button>
<div id="cry_text" class="emoji_text">超難過</div>
</div>
<div id="sad">
<button id="sad_btn" name="emoji_btn" type="button" class="btn1" value="2">
<img id="ID051-sad" class="emoji_img" src="{% static 'images/moods/ID051-sad.png' %}" srcset="{% static 'images/moods/ID051-sad.png' %} 1x, {% static 'images/moods/ID051-sad@2x.png' %} 2x" style="padding: 2px;">
</button>
<div id="sad_text" class="emoji_text">難過</div>
</div>
<div id="neutral">
<button id="neutral_btn" name="emoji_btn" type="button" class="btn1" value="3">
<img id="ID051-neutral" class="emoji_img" src="{% static 'images/moods/ID051-neutral.png' %}" srcset="{% static 'images/moods/ID051-neutral.png' %} 1x, {% static 'images/moods/ID051-neutral@2x.png' %} 2x">
</button>
<div id="neutral_text" class="emoji_text">普通</div>
</div>
<div id="happy">
<button id="happy_btn" name="emoji_btn" type="button" class="btn1" value="4">
<img id="ID051-happy" class="emoji_img" src="{% static 'images/moods/ID051-happy.png' %}" srcset="{% static 'images/moods/ID051-happy.png' %} 1x, {% static 'images/moods/ID051-happy@2x.png' %} 2x">
</button>
<div id="happy_text" class="emoji_text">開心</div>
</div>
<div id="joy">
<button id="joy_btn" name="emoji_btn" type="button" class="btn1" value="5">
<img id="ID051-joy" class="emoji_img" src="{% static 'images/moods/ID051-joy.png' %}" srcset="{% static 'images/moods/ID051-joy.png' %} 1x, {% static 'images/moods/ID051-joy@2x.png' %} 2x">
</button>
<div id="joy_text" class="emoji_text">超開心</div>
</div>
</div>
<button id="emoji_cancel" class="cancel" type="button">取消</button>
<button id="emoji_ok" class="ok" type="button">完成</button>
</div>
</div>
<!-- Thing_test -->
<div id="thing_win" style="opacity: 0; display: none;">
<div id="default_things_thing">
<div class="text">
<span>選擇事件</span>
</div>
<svg id="line" viewBox="0 0 562 5">
<path class="line" d="M 562 0 L 0 0">
</path>
</svg>
<!--按鈕-->
<div id="default_things_btn">
<!-- shopping -->
<div id="T001" class="shopping">
<button id="shopping_btn" type="button" name="thing_btn" class="btn3" value="T001">
<img class="thing_img" src="{% static 'images/things/shopping-bag.png' %}" srcset="{% static 'images/things/shopping-bag.png' %} 1x, {% static 'images/things/shopping-bag@2x.png' %} 2x">
</button>
<div class="thing_text">購物</div>
</div>
<!-- eat -->
<div id="T002" class="eat">
<button id="eat_btn" type="button" name="thing_btn" class="btn3" value="T002">
<img class="thing_img" src="{% static 'images/things/fast-food.png' %}" srcset="{% static 'images/things/fast-food.png' %} 1x, {% static 'images/things/fast-food@2x.png' %} 2x">
</button>
<div class="thing_text">美食</div>
</div>
<!-- friends -->
<div id="T003" class="friend">
<button id="friend_btn" type="button" name="thing_btn" class="btn3" value="T003">
<img class="thing_img" src="{% static 'images/things/friends.png' %}" srcset="{% static 'images/things/friends.png' %} 1x, {% static 'images/things/friends@2x.png' %} 2x">
</button>
<div class="thing_text">朋友</div>
</div>
<!-- game -->
<div id="T004" class="game">
<button id="game_btn" type="button" name="thing_btn" class="btn3" value="T004">
<img class="thing_img" src="{% static 'images/things/joystick.png' %}" srcset="{% static 'images/things/joystick.png' %} 1x, {% static 'images/things/joystick@2x.png' %} 2x">
</button>
<div class="thing_text">玩遊戲</div>
</div>
<!-- sport -->
<div id="T005" class="sport">
<button id="sport_btn" type="button" name="thing_btn" class="btn3" value="T005">
<img class="thing_img" src="{% static 'images/things/sport.png' %}" srcset="{% static 'images/things/sport.png' %} 1x, {% static 'images/things/sport@2x.png' %} 2x">
</button>
<div class="thing_text">運動</div>
</div>
<!-- favourite -->
<div id="T006" class="favourite">
<button id="favourite_btn" type="button" name="thing_btn" class="btn3" value="T006">
<img class="thing_img" src="{% static 'images/things/favourite.png' %}" srcset="{% static 'images/things/favourite.png' %} 1x, {% static 'images/things/favourite@2x.png' %} 2x">
</button>
<div class="thing_text">約會</div>
</div>
<!-- clean -->
<div id="T007" class="clean">
<button id="clean_btn" type="button" name="thing_btn" class="btn3" value="T007">
<img class="thing_img" src="{% static 'images/things/broom.png' %}" srcset="{% static 'images/things/broom.png' %} 1x, {% static 'images/things/broom@2x.png' %} 2x">
</button>
<div class="thing_text">清潔</div>
</div>
<!-- travel -->
<div id="T008" class="travel">
<button id="travel_btn" type="button" name="thing_btn" class="btn3" value="T008">
<img class="thing_img" src="{% static 'images/things/luggage.png' %}" srcset="{% static 'images/things/luggage.png' %} 1x, {% static 'images/things/luggage@2x.png' %} 2x">
</button>
<div class="thing_text">旅行</div>
</div>
<!-- work -->
<div id="T009" class="work">
<button id="work_btn" type="button" name="thing_btn" class="btn3" value="T009">
<img class="thing_img" src="{% static 'images/things/briefcase.png' %}" srcset="{% static 'images/things/briefcase.png' %} 1x, {% static 'images/things/briefcase@2x.png' %} 2x">
</button>
<div class="thing_text">工作</div>
</div>
<!-- relax -->
<div id="T010" class="relax">
<button id="relax_btn" type="button" name="thing_btn" class="btn3" value="T010">
<img class="thing_img" src="{% static 'images/things/relaxing.png' %}" srcset="{% static 'images/things/relaxing.png' %} 1x, {% static 'images/things/relaxing@2x.png' %} 2x">
</button>
<div class="thing_text">放鬆</div>
</div>
<!-- party -->
<div id="T011" class="party">
<button id="party_btn" type="button" name="thing_btn" class="btn3" value="T011">
<img class="thing_img" src="{% static 'images/things/confetti.png' %}" srcset="{% static 'images/things/confetti.png' %} 1x, {% static 'images/things/confetti@2x.png' %} 2x">
</button>
<div class="thing_text">派對</div>
</div>
<!-- reading -->
<div id="T012" class="reading">
<button id="reading_btn" type="button" name="thing_btn" class="btn3" value="T012">
<img class="thing_img" src="{% static 'images/things/open-book.png' %}" srcset="{% static 'images/things/open-book.png' %} 1x, {% static 'images/things/open-book@2x.png' %} 2x">
</button>
<div class="thing_text">閱讀</div>
</div>
<!-- movie -->
<div id="T013" class="movie">
<button id="movie_btn" type="button" name="thing_btn" class="btn3" value="T013">
<img class="thing_img" src="{% static 'images/things/video-player.png' %}" srcset="{% static 'images/things/video-player.png' %} 1x, {% static 'images/things/video-player@2x.png' %} 2x">
</button>
<div class="thing_text">看電影</div>
</div>
<!-- other -->
<div id="T014" class="other">
<button id="other_btn" type="button" name="thing_btn" class="btn3" value="T014">
<img class="thing_img" src="{% static 'images/things/add.png' %}" srcset="{% static 'images/things/add.png' %} 1x, {% static 'images/things/add@2x.png' %} 2x">
</button>
<div class="thing_text">其他</div>
</div>
</div>
<button id="thing_cancel" class="cancel" type="button">取消</button>
<button id="thing_ok" class="ok" type="button" onclick="check(this);">完成</button>
</div>
</div>
</div>
</form>
{% endblock %}
{% block js %}
<script src="{% static 'js/editDiary.js' %}"></script>
{% endblock %}
```
### History
* EzAnalysis/EmotionDiary/templates/History/
#### showHistory.html
```html=
{% extends 'layout.html' %}
{% load bootstrap4 %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/showHistory.css' %}">
<link rel="stylesheet" href="{% static 'css/calendar.css' %}">
{% endblock %}
{% block body %}
<form id="HistoryForm" action="" method="post" class="form" enctype="multipart/form-data">
{% csrf_token %}
<div id="ID3">
<div id="_bk">
<div id="banner"></div>
</div>
<div id="calendar" class="fc fc-media-screen fc-direction-ltr fc-theme-standard"></div>
<div id="user_diary" value="{{ pk }}" style="display: none;">
{% for ud in get_diary %}
<div id="{{ ud.id }}">
<div id="diary_date">{{ ud.date }}</div>
<div id="diary_mood">{{ ud.mood }}</div>
<div id="diary_note">{{ ud.note }}</div>
<div id="diary_pic">{{ ud.pic }}</div>
<!-- <img id="diary_pic" src="{{ MEDIA_URL }}">-->
<div id="diary_things">
{% for ut in get_thing %}
{% if ut.diary_id.id == ud.id %}
<!-- <img src="{{ MEDIA_URL }}{{ ut.things_id.things_img }}" value="{{ ut.things_id.things_id }}">-->
<img src="{% static 'images/' %}{{ ut.things_id.things_img }}" value="{{ ut.things_id.things_id }}">
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
<div id="content">
<div class="show_thing">
<div class="day_time">
<div id="week" class="days_text"></div>
<div id="day" class="days_text" style="font-size: 30px;"></div>
<div id="time" class="days_text"></div>
</div>
<div id="get_id" style="display: none;"></div>
<div id="things" class="things">
</div>
</div>
<div class="line"></div>
<div class="show_note">
<div class="note_text">
<div id="note"></div>
</div>
<img id="mood">
<button id="delete_btn" class="button" type="button" style="float: left; margin-left: 10px; display: none;">刪除日記</button>
<button id="revise_btn" class="button" type="button" style="float: right; margin-right: 10px; display: none;">修改日記</button>
{{ thing_form.diary_id }}
</div>
</div>
</div>
</div>
</form>
{% endblock %}
{% block js %}
<script src="{% static 'js/calendar.js' %}"></script>
<script src="{% static 'js/showHistory.js' %}"></script>
{% endblock %}
```
### Statistics
* EzAnalysis/EmotionDiary/templates/Statistics/
#### showStatistics.html
```html=
{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/showStatistics.css' %}">
{% endblock %}
{% block body %}
<form id="" action="" method="post" class="form" enctype="multipart/form-data">
{% csrf_token %}
<div id="ID4">
<div id="_bk">
<div id="banner">圖表分析</div>
</div>
<div id="content">
<!-- 圓餅圖 -->
<div id="pie">
<div class="text">
<div style="float: left; margin-left: 20px;">心情統計</div>
<div style="float: right; margin-right: 20px;">一個月</div>
</div>
<!-- <img class="graph" src="{% static 'images/user_pie.png' %}">-->
<div id="mood_count" style="display: none;">{{ mood_count }}</div>
<div class="graph" style="width: 280px;">
<canvas id="pieChart"></canvas>
</div>
<div class="mood">
<div class="emoji">
<img class="emoji_img" src="{% static 'images/moods/ID050-cry.png' %}" srcset="{% static 'images/moods/ID051-cry.png' %} 1x, {% static 'images/moods/ID051-cry@2x.png' %} 2x">
<div class="emoji_color" style="background-color: rgb(255,99,132, 50%);"></div>
<p class="emoji_text" style="margin: 0;">超難過</p>
</div>
<div class="emoji">
<img class="emoji_img" src="{% static 'images/moods/ID050-sad.png' %}" srcset="{% static 'images/moods/ID051-sad.png' %} 1x, {% static 'images/moods/ID051-sad@2x.png' %} 2x">
<div class="emoji_color" style="margin-left: 8px; background-color: rgb(255,159,64, 50%);"></div>
<p class="emoji_text">難過</p>
</div>
<div class="emoji">
<img class="emoji_img" src="{% static 'images/moods/ID050-neutral.png' %}" srcset="{% static 'images/moods/ID051-neutral.png' %} 1x, {% static 'images/moods/ID051-neutral@2x.png' %} 2x">
<div class="emoji_color" style="margin-left: 8px; background-color: rgb(255, 205, 86, 50%);"></div>
<p class="emoji_text">普通</p>
</div>
<div class="emoji">
<img class="emoji_img" src="{% static 'images/moods/ID050-happy.png' %}" srcset="{% static 'images/moods/ID051-happy.png' %} 1x, {% static 'images/moods/ID051-happy@2x.png' %} 2x">
<div class="emoji_color" style="margin-left: 8px; background-color: rgb(75, 192, 192, 50%);"></div>
<p class="emoji_text">開心</p>
</div>
<div class="emoji">
<img class="emoji_img" src="{% static 'images/moods/ID050-joy.png' %}" srcset="{% static 'images/moods/ID051-joy.png' %} 1x, {% static 'images/moods/ID051-joy@2x.png' %} 2x">
<div class="emoji_color" style="background-color: rgb(54, 162, 235, 50%);"></div>
<p class="emoji_text" style="margin: 0;">超開心</p>
</div>
</div>
</div>
<!-- 折線圖 -->
<div id="chart">
<div class="text" style="text-align: center;">情緒變化</div>
<div id="day_list" style="display: none;">{{ day_list }}</div>
<div id="day_mood" style="display: none;">{{ day_mood }}</div>
<div class="graph" style="width: 340px;">
<canvas id="lineChart" style="width: 340px; height: 205px;"></canvas>
</div>
</div>
</div>
</div>
</form>
{% endblock %}
{% block js %}
<script src="{% static 'js/showStatistics.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}
```
### UserInform
* EzAnalysis/EmotionDiary/templates/UserInform/
#### editUser.html
```html=
{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/editUser.css' %}">
{% endblock %}
{% block body %}
<form id="userForm" action="" method="post" class="form" enctype="multipart/form-data">
{% csrf_token %}
<div id="ID1">
<div id="_bk">
<div id="banner">
<span>基本資料</span>
</div>
</div>
<div id="content">
<!-- userid, username -->
{{ form.line_id }}
<div id="name">
<div class="text">名字:</div>
{{ form.username }}
</div>
<!-- birthday -->
<div id="birthday">
<div class="text">生日:</div>
{{ form.birth }}
</div>
<!-- gender -->
<div id="gen">
{{ form.gender }}
<div id="gen_btn">
<div id="man">
<button id="G1" name="gender_btn" value="M" type = "button" class = "btn1">
<img class="gen_img" src="{% static 'images/decoration/man.png' %}">
</button>
</div>
<div id="woman">
<button id="G2" name="gender_btn" value="F" type="button" class ="btn1">
<img class="gen_img" src="{% static 'images/decoration/woman.png' %}">
</button>
</div>
</div>
</div>
<!-- job -->
<div id="work">
{{ form.career_id }}
<div id="work_background"></div>
<!-- 職業btn -->
<div id="work_row1">
<!-- 學生 -->
<div id="student">
<button id="C001" name="job_btn" value="C001" type="button" class="btn3" style="background-color: rgba(250,215,179,1);">
<img class="work_img" src="{% static 'images/jobs/ID009-student.png' %}" srcset="{% static 'images/jobs/ID009-student.png' %} 1x, {% static 'images/jobs/ID009-student@2x.png' %} 2x">
</button>
<div class="work_text">學生</div>
</div>
<!-- 服務業 -->
<div id="service">
<button id="C003" name="job_btn" value="C003" type="button" class="btn3" style="background-color: rgba(184,245,255,1);">
<img class="work_img" src="{% static 'images/jobs/ID046-telemarketer.png' %}" srcset="{% static 'images/jobs/ID046-telemarketer.png' %} 1x, {% static 'images/jobs/ID046-telemarketer@2x.png' %} 2x">
</button>
<div class="work_text">服務業</div>
</div>
<!-- 軍公教 -->
<div id="soldier">
<button id="C002" name="job_btn" value="C002" type="button" class="btn3" style="background-color: rgba(198,218,208,1);">
<img class="work_img" src="{% static 'images/jobs/ID030-soldier.png' %}" srcset="{% static 'images/jobs/ID030-soldier.png' %} 1x, {% static 'images/jobs/ID030-soldier@2x.png' %} 2x">
</button>
<div class="work_text">軍公教</div>
</div>
</div>
<div id="work_row2">
<!-- 自由業 -->
<div id="freelance">
<button id="C004" name="job_btn" value="C004" type="button" class="btn3" style="background-color: rgba(147,146,155,1);">
<img class="work_img" src="{% static 'images/jobs/ID019-hacker.png' %}" srcset="{% static 'images/jobs/ID019-hacker.png' %} 1x, {% static 'images/jobs/ID019-hacker@2x.png' %} 2x">
</button>
<div class="work_text">自由業</div>
</div>
<!-- 家管 -->
<div id="home">
<button id="C006" name="job_btn" value="C006" type="button" class="btn3" style="background-color: rgba(251, 219, 231,1);">
<img class="work_img" src="{% static 'images/jobs/ID008-maid.png' %}" srcset="{% static 'images/jobs/ID008-maid.png' %} 1x, {% static 'images/jobs/ID008-maid@2x.png' %} 2x">
</button>
<div class="work_text">家管</div>
</div>
<!-- 工商業 -->
<div id="business">
<button id="C005" name="job_btn" value="C005" type="button" class="btn3" style="background-color: rgba(136,158,170,1);">
<img class="work_img" src="{% static 'images/jobs/ID048-office-worker.png' %}" srcset="{% static 'images/jobs/ID048-office-worker.png' %} 1x, {% static 'images/jobs/ID048-office-worker@2x.png' %} 2x">
</button>
<div class="work_text">工商業</div>
</div>
</div>
<div id="work_row3">
<!-- 退休人員 -->
<div id="retirement">
<button id="C007" name="job_btn" value="C007" type="button" class="btn3" style="background-color: rgba(167,233,212,1);">
<img class="work_img" src="{% static 'images/jobs/ID043-teacher.png' %}" srcset="{% static 'images/jobs/ID043-teacher.png' %} 1x, {% static 'images/jobs/ID043-teacher@2x.png' %} 2x">
</button>
<div class="work_text">退休人員</div>
</div>
<!-- 其他 -->
<div id="other">
<button id="C009" name="job_btn" value="C009" type="button" class="btn3" style="background-color:rgba(255,255,255,1);">
<img class="work_img" src="{% static 'images/jobs/ID035-astronaut.png' %}" srcset="{% static 'images/jobs/ID035-astronaut.png' %} 1x, {% static 'images/jobs/ID035-astronaut@2x.png' %} 2x">
</button>
<div class="work_text">其他</div>
</div>
<!-- 農民漁牧業 -->
<div id="farmer">
<button id="C008" name="job_btn" value="C008" type="button" class="btn3" style="background-color:rgb(255, 252, 203);">
<img class="work_img" src="{% static 'images/jobs/ID001-farmer.png' %}" srcset="{% static 'images/jobs/ID001-farmer.png' %} 1x, {% static 'images/jobs/ID001-farmer@2x.png' %} 2x">
</button>
<div class="work_text">農林漁牧</div>
</div>
</div>
</div>
<!-- button -->
<div id="next">
<div id="next_btn">
<input class="next_btn" type="button" value="完 成" onclick="check(this);">
</div>
</div>
</div>
</div>
</form>
{% endblock %}
{% block js %}
<script src="{% static 'js/editUser.js' %}"></script>
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
{% endblock %}
```
## JS
* EzAnalysis/EmotionDiary/static/js/
### menuDiary.js
```javascript=
// 是否填寫過日記 -> 新增日記
function addDiary(){
var userid = document.getElementById('userid').innerText;
var message = document.getElementById('message').innerText;
if(message){
swal({
title: "您今天已填寫日記過了！",
text: "",
type: "info",
width: 348,
showConfirmButton: true,
});
}else{
window.location.href='../addDiary1/'+ userid;
}
}
// 修改日記
function editDiary(){
var userid = document.getElementById('userid').innerText;
var message = document.getElementById('message').innerText;
if(message == ''){
swal({
title: "您今天還沒填寫日記呦！",
text: "",
type: "info",
width: 348,
showConfirmButton: true,
});
}else{
window.location.href='../editDiary/'+ userid;
}
}
```
### addDiary1.js
```javascript=
window.onload = function(){
getUserDiary();
ShowTime();
emojiSelect(e_id);
}
function getUserDiary(){
if(mood.value != ''){
for(var e=0; e<emoji_block.children.length; e++){
if(e == mood.value-1){
emoji_block.children[e].children[0].className = 'btn2';
}
}
}
if(user_photo.innerText == 'None'){
image.src = '/static/images/decoration/photo-camera.png';
}else{
image.src = '/media/' + user_photo.innerText;
}
}
// 設定時間
function ShowTime(){
today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var monthString = ( month < 10)? ('0'+ month) : ('' + month);
var dayString = ( day < 10)? ('0'+ day) : ('' + day);
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
var hourString = ( hour < 10)? ('0'+ hour) : ('' + hour);
var minString = ( minute < 10)? ('0'+ minute) : ('' + minute);
var secString = ( second < 10)? ('0'+ second) : ('' + second);
var date = year + '/' + monthString + '/' + dayString;
var time = hourString + ':' + minString;
document.getElementById('date').innerText = date;
document.getElementById('time').innerText = time;
document.getElementById('diary_date').value = date + ' ' + time;
}
window.setInterval('ShowTime()',1000);
// 選取心情
var e_id;
function emojiSelect(e_id) {
var arr = document.getElementsByName('emoji_btn');
for(var i=0; i<arr.length; i++){
arr[i].onclick = function(){
//this是当前激活的按钮，在这里可以写对应的操作
if(this.className == 'btn1'){
this.className = 'btn2';
e_id = this.id;
document.getElementById('mood').value = this.value;
var btn = document.getElementsByClassName('btn2');
for(var j=0;j<btn.length;j++){
if(btn[j].id!=e_id){
btn[j].className = 'btn1';
}
}
}
}
}
}
// 上傳照片 & 預覽照片
function readURL(input) {
var preview = document.getElementById('image');
var file = document.getElementById('pic').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, true);
if (file) {
reader.readAsDataURL(file);
}
}
// 是否都填寫完成
function check(){
if(mood.value == ''){
swal({
title: "請選擇表情",
text: "",
type: "error",
width: 348,
});
}else if(image.src == 'http://127.0.0.1:8000/static/images/decoration/photo-camera.png'){
swal({
title: "請上傳臉部表情的照片",
text: "",
type: "error",
width: 348,
});
}
else{
diaryForm1.submit();
}
}
```
### addDiary2.js
```javascript=
window.onload = function(){
getUserThings();
thingSelect(t_id);
}
function getUserThings() {
// Mood
if(mood.innerText == '5'){
var text = '你今天的心情' + '超開心';
var image = '<img id="mood_image" src="' + '/static/images/moods/ID051-joy.png' + '">';
mood_text.innerHTML = text + image;
}else if(mood.innerText == '4'){
var text = '你今天的心情' + '開心';
var image = '<img id="mood_image" src="' + '/static/images/moods/ID051-happy.png' + '">';
mood_text.innerHTML = text + image;
}else if(mood.innerText == '3'){
var text = '你今天的心情' + '普通';
var image = '<img id="mood_image" src="' + '/static/images/moods/ID051-neutral.png' + '">';
mood_text.innerHTML = text + image;
}else if(mood.innerText == '2'){
var text = '你今天的心情' + '難過';
var image = '<img id="mood_image" src="' + '/static/images/moods/ID051-sad.png' + '">';
mood_text.innerHTML = text + image;
}else if(mood.innerText == '1'){
var text = '你今天的心情' + '超難過';
var image = '<img id="mood_image" src="' + '/static/images/moods/ID051-cry.png' + '">';
mood_text.innerHTML = text + image;
}
// Things
var choose=[];
for(var ut=0; ut<user_things.children.length; ut++){
choose.push(user_things.children[ut].id);
document.getElementById('chooseThing').value = choose;
for(var dt=0; dt<default_things.children.length; dt++){
if(default_things.children[dt].id == user_things.children[ut].id){
default_things.children[dt].children[0].className = 'btn2';
}
}
}
}
var t_id=[];
function thingSelect(t_id) {
var arr = document.getElementsByName('thing_btn');
for(var i=0; i<arr.length; i++){
arr[i].onclick = function(){
//this是当前激活的按钮，在这里可以写对应的操作
if(this.className == 'btn1'){
this.className = 'btn2';
}else {
this.className = 'btn1';
}
// 列出所選取事情的id
var choose=[];
var btn = document.getElementsByClassName('btn2');
for (var i=0; i<btn.length; i++) {
choose.push(btn[i].value);
document.getElementById('chooseThing').value = choose;
}
if(choose == ''){
document.getElementById('chooseThing').value = '';
}
}
}
}
function check(){
if(chooseThing.value == ''){
swal({
title: "今天做了什麼事呢?",
text: "",
type: "error",
width: 348,
});
}else{
diaryForm2.submit();
}
}
```
### addDiary3.js
```javascript=
var t_id;
function thingSelect(t_id){
var parent = t_id.parentNode;
// 判斷t_id是for中的哪區塊
for(var i=0; i<parent.children.length; i++){
for(var j=0; j<parent.children.length; j++){
if(parent.children[j].id!=t_id){
parent.children[j].className = 'btn1';
}
}
}
// t_id.class
if(t_id.className == 'btn1'){
t_id.className = 'btn2';
}
// 印出所選取的t_id文字
var text = [];
if(msg_btn.length == undefined){
for(var b=0; b<msg_btn.children.length; b++){
if(msg_btn.children[b].className == 'btn2'){
text.push(msg_btn.children[b].value);
}
}
}else{
for(var l=0; l<msg_btn.length; l++){
for(var b=0; b<msg_btn[l].children.length; b++){
if(msg_btn[l].children[b].className == 'btn2'){
text.push(msg_btn[l].children[b].value);
}
}
}
}
note.value = text;
}
function check(){
swal({
title: "儲存成功",
text: "",
type: "success",
width: 348,
timer: 2000,
showConfirmButton: false,
}).then(function () {
DiaryForm3.submit();
})
}
```
### editDiary.js
```javascript=
window.onload = function(){
setDateTime();
showMood();
emojiSelect(e_id);
showThing();
thingSelect(t_id);
}
// set Date & Time
function setDateTime() {
var diary_date = document.getElementById('diary_date').value;
var split = diary_date.split(' ');
var date = document.getElementById('date_input');
date.value = split[0];
var time = document.getElementById('time_input');
time.value = split[1];
}
// Mood
function showMood() {
var img = document.getElementById('mood_img');
if(mood.value == '5'){
img.src = '/static/images/moods/ID051-joy.png';
img.srcset = '/static/images/moods/ID051-joy.png 1x, /static/images/moods/ID051-joy@2x.png 2x';
}else if(mood.value == '4'){
img.src = '/static/images/moods/ID051-happy.png';
img.srcset = '/static/images/moods/ID051-happy.png 1x, /static/images/moods/ID051-happy@2x.png 2x';
}else if(mood.value == '3'){
img.src = '/static/images/moods/ID051-neutral.png';
img.srcset = '/static/images/moods/ID051-neutral.png 1x, /static/images/moods/ID051-neutral@2x.png 2x';
}else if(mood.value == '2'){
img.src = '/static/images/moods/ID051-sad.png';
img.srcset = '/static/images/moods/ID051-sad.png 1x, /static/images/moods/ID051-sad@2x.png 2x';
}else {
img.src = '/static/images/moods/ID051-cry.png';
img.srcset = '/static/images/moods/ID051-cry.png 1x, /static/images/moods/ID051-cry@2x.png 2x';
}
for(var m=0; m<mood_arr.length; m++){
if(m == mood.value-1){
mood_arr[m].className = 'btn2';
}else{
mood_arr[m].className = 'btn1';
}
}
}
// 選取心情
var e_id;
function emojiSelect(e_id) {
var arr = document.getElementsByName('emoji_btn');
for(var i=0; i<arr.length; i++){
arr[i].onclick = function(){
//this是当前激活的按钮，在这里可以写对应的操作
if(this.className == 'btn1'){
this.className = 'btn2';
e_id = this.id;
var btn = document.getElementsByClassName('btn2');
for(var j=0;j<btn.length;j++){
if(btn[j].id!=e_id){
btn[j].className = 'btn1';
}
}
}
}
}
}
// 彈出小視窗
var mood_arr = document.getElementsByName('emoji_btn');
mood_btn.onclick = function() {
mood_win.style.opacity = 1;
mood_win.style.display = 'block';
showMood();
}
emoji_cancel.onclick = function() {
mood_win.style.opacity = 0;
mood_win.style.display = 'none';
}
emoji_ok.onclick = function() {
mood_win.style.opacity = 0;
mood_win.style.display = 'none';
for(var i=0; i<mood_arr.length; i++){
if(mood_arr[i].className == 'btn2'){
mood.value = mood_arr[i].value;
}
}
showMood();
}
// Thing
// 做了什麼 Thing
function showThing() {
var thing_form = document.getElementById('chooseThing').value;
var things = document.getElementById('thing_btn');
var user_things = document.getElementById('get_user_thing').children;
var default_things = document.getElementById('default_things_btn').children;
// 小視窗預設值 & 顯示使用者選擇Thing
var str='';
if(thing_form == ''){
for(var t=0; t<user_things.length; t++){
for(var dt=0; dt<default_things.length; dt++){
if(default_things[dt].id == user_things[t].id){
default_things[dt].children[0].className = 'btn4';
var img = '<img id="thing_img" src="' + default_things[dt].children[0].children[0].src + '">';
var text = '<div id="thing_value">' + default_things[dt].children[1].innerText + '</div>';
var content = '<div class="_bl">' + img + text + '</div>';
str+=content;
things.innerHTML = str;
}
}
}
}else{
str='';
var split_thing = thing_form.split(',')
for(var st=0; st<split_thing.length; st++){
for(var dt=0; dt<default_things.length; dt++){
if(split_thing[st] == default_things[dt].id){
default_things[dt].children[0].className = 'btn4';
var img = '<img id="thing_img" src="' + default_things[dt].children[0].children[0].src + '">';
var text = '<div id="thing_value">' + default_things[dt].children[1].innerText + '</div>';
var content = '<div class="_bl">' + img + text + '</div>';
str+=content;
things.innerHTML = str;
}
}
}
}
}
var t_id;
function thingSelect(t_id) {
var arr = document.getElementsByName('thing_btn');
for(var i=0; i<arr.length; i++){
arr[i].onclick = function(){
//this是当前激活的按钮，在这里可以写对应的操作
if(this.className == 'btn3'){
this.className = 'btn4';
}else {
this.className = 'btn3';
}
}
}
}
// 彈出小視窗
var thing_arr = document.getElementsByName('thing_btn');
thing_btn.onclick = function() {
thing_win.style.opacity = 1;
thing_win.style.display = 'block';
showThing();
}
thing_cancel.onclick = function() {
thing_win.style.opacity = 0;
thing_win.style.display = 'none';
for(var i=0; i<thing_arr.length; i++){
thing_arr[i].className = 'btn3';
}
}
thing_ok.onclick = function() {
thing_win.style.opacity = 0;
thing_win.style.display = 'none';
var thing=[];
for(var i=0; i<thing_arr.length; i++){
if(thing_arr[i].className == 'btn4'){
thing.push(thing_arr[i].value);
document.getElementById('chooseThing').value = thing;
}
}
showThing();
}
// 上傳照片 & 預覽照片
function readURL(input) {
var preview = document.getElementById('image');
var file = document.getElementById('pic').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, true);
if (file) {
reader.readAsDataURL(file);
}
}
function check(){
var form = document.getElementById('editDiaryForm');
swal("儲存成功", "", "success", {button:"OK"})
.then(function () {
form.submit();
})
}
```
### editUser.js
```javascript=
window.onload = function(){
genderSelect(g_id);
jobSelect(j_id);
}
function check(){
var form = document.getElementById('userForm');
var username = document.getElementById('disname').value;
if(username == 0){
swal("請填寫名字", "", "error");
}
else{
swal("儲存成功", "", "success", {button:"OK"})
.then(() => {
form.submit();
});
}
}
// 選取性別
var g_id;
function genderSelect(g_id) {
var arr = document.getElementsByName('gender_btn');
var user_gen = document.getElementById('gender').value;
if(user_gen == 'M'){
document.getElementsByTagName('button').G1.className='btn2';
}else if(user_gen == 'F'){
document.getElementsByTagName('button').G2.className='btn2';
}
for(var i = 0;i<arr.length;i++){
arr[i].onclick = function(){
//this是当前激活的按钮，在这里可以写对应的操作
if(this.className == 'btn1'){
this.className = 'btn2';
g_id = this.id;
document.getElementById('gender').value = this.value;
var btn = document.getElementsByClassName('btn2');
for(var j=0;j<btn.length;j++){
if(btn[j].id!=g_id){
btn[j].className = 'btn1';
}
}
}
}
}
}
// 選取職業
var j_id;
function jobSelect(j_id){
var arr = document.getElementsByName('job_btn');
var user_job = document.getElementById('job').value;
if(user_job == 'C001'){
document.getElementsByTagName('button').C001.className='btn4';
}else if(user_job == 'C002'){
document.getElementsByTagName('button').C002.className='btn4';
}else if(user_job == 'C003'){
document.getElementsByTagName('button').C003.className='btn4';
}else if(user_job == 'C004'){
document.getElementsByTagName('button').C004.className='btn4';
}else if(user_job == 'C005'){
document.getElementsByTagName('button').C005.className='btn4';
}else if(user_job == 'C006'){
document.getElementsByTagName('button').C006.className='btn4';
}else if(user_job == 'C007'){
document.getElementsByTagName('button').C007.className='btn4';
}else if(user_job == 'C008'){
document.getElementsByTagName('button').C008.className='btn4';
}else if(user_job == 'C009'){
document.getElementsByTagName('button').C009.className='btn4';
}
for(var i = 0;i<arr.length;i++){
arr[i].onclick = function(){
//this是当前激活的按钮，在这里可以写对应的操作
if(this.className == 'btn3'){
this.className = 'btn4';
j_id = this.id;
document.getElementById('job').value = this.value;
var btn = document.getElementsByClassName('btn4');
for(var j=0;j<btn.length;j++){
if(btn[j].id!=j_id){
btn[j].className = 'btn3';
}
}
}
}
}
}
```
### showHistory.js
```javascript=
window.onload = function(){
banner.innerText = title[0].innerText;
getDate();
}
// 今天日期 yyyy-mm-dd
var today = new Date();
var set_year = today.getFullYear();
var m = today.getMonth()+1;
var d = today.getDate();
var set_month = ( m < 10)? ('0'+ m) : ('' + m);
var set_day = ( d < 10)? ('0'+ d) : ('' + d);
today = set_year + '-' + set_month + '-' + set_day;
// 設定選擇日期最多只能選到當天
input_date = today;
// 標題Banner
var title = document.getElementsByClassName('fc-toolbar-title');
document.addEventListener('click', function() {
banner.innerText = title[0].innerText;
});
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var show_month = document.getElementsByClassName('fc-daygrid-day-number');
var pass_month = document.getElementsByClassName('fc-day-other');
var calendar = new FullCalendar.Calendar(calendarEl, {
selectable: true,
// Toolbar
headerToolbar: {
left: 'prev',
center: 'title,today',
right: 'next',
},
// 點選日期時觸發
dateClick: function(info) {
input_date = info.dateStr;
getDate(info);
calendar_backgroundColor(info);
},
// 點選上下個月時觸發
datesSet: function(){
getDate();
},
// 可以選擇多日
// select: function(info) {
// alert('selected ' + info.startStr + ' to ' + info.endStr);
// }
});
calendar.render();
});
var calendar_day = document.getElementsByClassName('fc-day');
// 行事曆背景顏色
function calendar_backgroundColor(info){
for(var cd=0; cd<calendar_day.length; cd++){
if(calendar_day[cd].dataset.date == info.dateStr){
calendar_day[cd].style['backgroundColor'] = 'rgb(89, 140, 179, 0.3)';
}else{
calendar_day[cd].style['backgroundColor'] = 'white';
if(calendar_day[cd].dataset.date == today){
calendar_day[cd].style['backgroundColor'] = 'rgba(255, 220, 40, .15)';
}
}
}
}
function getDate(info){
// 取得星期
var get_date = input_date.split('-');
var weeks = new Date(input_date);
var the_day = weeks.getDay();
var weekday = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
week.innerText = weekday[the_day];
day.innerText = get_date[2];
for(var ud=0; ud<user_diary.children.length; ud++){
var split1 = user_diary.children[ud].children[0].innerText.split(' ');
var replace1 = split1[0].replace('年', ' ').replace('月', ' ').replace('日', '');
var split2 = replace1.split(' ');
// 月如果是1~9月則前面加上0
if(split2[1].length == '1'){
split2[1] = '0' + split2[1];
}
// 日如果是1~9月則前面加上0
if(split2[2].length == '1'){
split2[2] = '0' + split2[2];
}
var ud_date = split2[0] + '-' + split2[1] + '-' + split2[2];
calendar_event(ud, ud_date);
// 如果點選日期與日記日期相同，則顯示日記內容
var str='';
if(input_date == ud_date){
get_id.innerText = user_diary.children[ud].id// diary_id
time.innerText = split1[1]; // 填寫時間[0]
mood.value = user_diary.children[ud].children[1].innerText; // 心情指數[1]
moodImage();
note.innerText = user_diary.children[ud].children[2].innerText; // 備忘錄[2]
for(var dt=0; dt<user_diary.children[ud].children[4].children.length; dt++){ // 做的事情[4]
var things_img = '<img class="user_thing"' + 'src="' + user_diary.children[ud].children[4].children[dt].src + '">';
str+=things_img;
things.innerHTML = str;
};
if(input_date == today){ // 顯示修改日記 btn
revise_btn.style['display'] = 'block';
}else{
revise_btn.style['display'] = 'none';
};
delete_btn.style['display'] = 'block'; // 顯示刪除日記 btn
break;
}else{
get_id.innerText = ''; // diary_id
time.innerText = ''; // date[0]
mood.value = ''; // mood[1]
moodImage();
note.innerText = ''; // note[2]
// pic[3]
str='';
things.innerHTML = str; // [4]
delete_btn.style['display'] = 'none';
}
}
}
function calendar_event(ud, ud_date){
for(var cd=0; cd<calendar_day.length; cd++) {
if(ud_date == calendar_day[cd].dataset.date){
var cal_mood = user_diary.children[ud].children[1].innerText;
if(cal_mood == '5'){
var mood_img = '<img class="cal_mood"' + 'src="' + '/static/images/moods/ID051-joy.png' + '">';
}else if(cal_mood == '4'){
var mood_img = '<img class="cal_mood"' + 'src="' + '/static/images/moods/ID051-happy.png' + '">';
}else if(cal_mood == '3'){
var mood_img = '<img class="cal_mood"' + 'src="' + '/static/images/moods/ID051-neutral.png' + '">';
}else if(cal_mood == '2'){
var mood_img = '<img class="cal_mood"' + 'src="' + '/static/images/moods/ID051-sad.png' + '">';
}else {
var mood_img = '<img class="cal_mood"' + 'src="' + '/static/images/moods/ID051-cry.png' + '">';
}
calendar_day[cd].children[0].children[1].innerHTML = mood_img;
}
}
}
function moodImage(moods){
// 顯示mood圖片
if(mood.value == '5'){
mood.style['display'] = 'block';
mood.src = '/static/images/moods/ID051-joy.png';
mood.srcset = '/static/images/moods/ID051-joy.png 1x, /static/images/moods/ID051-joy@2x.png 2x';
}else if(mood.value == '4'){
mood.style['display'] = 'block';
mood.src = '/static/images/moods/ID051-happy.png';
mood.srcset = '/static/images/moods/ID051-happy.png 1x, /static/images/moods/ID051-happy@2x.png 2x';
}else if(mood.value == '3'){
mood.style['display'] = 'block';
mood.src = '/static/images/moods/ID051-neutral.png';
mood.srcset = '/static/images/moods/ID051-neutral.png 1x, /static/images/moods/ID051-neutral@2x.png 2x';
}else if(mood.value == '2'){
mood.style['display'] = 'block';
mood.src = '/static/images/moods/ID051-sad.png';
mood.srcset = '/static/images/moods/ID051-sad.png 1x, /static/images/moods/ID051-sad@2x.png 2x';
}else if(mood.value =='1') {
mood.style['display'] = 'block';
mood.src = '/static/images/moods/ID051-cry.png';
mood.srcset = '/static/images/moods/ID051-cry.png 1x, /static/images/moods/ID051-cry@2x.png 2x';
}else{
mood.style['display'] = 'none';
}
}
delete_btn.onclick = function() {
swal({
title: "確定要刪除嗎",
type: "warning",
width: 348,
showCancelButton: true,
confirmButtonText: "刪除",
cancelButtonText: "取消",
confirmButtonColor: "#DD6B55",
}).then(function(){
diary_id.value = get_id.innerText;
swal({
title: "删除！",
type: "success",
width: 348,
}).then(function(){
console.log('刪除');
HistoryForm.submit();
});
});
}
revise_btn.onclick = function() {
window.location.href='../editDiary/'+ user_diary.getAttribute('value');
}
```
### showStatistics.js
```javascript=
$(document).ready(function(){
// 圓餅圖
var mood_count = document.getElementById('mood_count').innerText;
var count_ext1 = mood_count.split('[');
var count_ext2 = count_ext1[1].split(']');
var count = count_ext2[0].split(', ');
var pie = document.getElementById('pieChart');
var myChart = new Chart(pie, {
type: 'pie',
data: {
labels: ['超難過', '難過', '普通', '開心', '超開心'],
display: 'true',
datasets: [{
label: 'mood',
data: count,
fill: false,
backgroundColor: ['rgb(255,99,132, 50%)', 'rgb(255,159,64, 50%)', 'rgb(255, 205, 86, 50%)', 'rgb(75, 192, 192, 50%)', 'rgb(54, 162, 235, 50%)'],
hoverOffset: 4,
}],
},
options: {
responsive: true,
plugins: {
legend: false,
tooltip: false,
}
}
});
// 折線圖
// x軸
var day_list = document.getElementById('day_list').innerText;
var list_ext1 = day_list.split('[');
var list_ext2 = list_ext1[1].split(']');
var day = list_ext2[0].split(', ');
// y軸
var day_mood = document.getElementById('day_mood').innerText;
var mood_ext1 = day_mood.split('[');
var mood_ext2 = mood_ext1[1].split(']');
var mood = mood_ext2[0].split(', ');
var line = document.getElementById('lineChart');
var myChart = new Chart(line, {
type: 'line',
data: {
labels: day, // x軸
datasets: [{
yAxisID: 'y',
label: 'mood',
data: mood, // y軸
fill: false,
borderColor: '#4F618F',
backgroundColor: '#4F618F',
}]
},
options: {
responsive: true,
plugins: {
legend: false,
tooltip: false,
},
scales: {
x: {
grid: {
drawBorder: false,
color: function(context) {
return '#FFFFFF';
},
},
},
y: {
suggestedMin: 1,
suggestedMax: 5,
stepSize: 1,
ticks: {
callback: function(val, index, value) {
switch (val) {
case 1:
return '超難過';
case 2:
return '難過';
case 3:
return '普通';
case 4:
return '開心';
case 5:
return '超開心';
}
}
},
grid: {
drawBorder: false,
color: function(context) {
if (context.tick.value == 1) {
return '#FAAD80';
}
else {
return '#262A53';
}
},
},
},
}
}
});
});
```
Sign in with Wallet
Connect another wallet