---
# System prepended metadata

title: Django 程式

---

# 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';
                            }
                        },
                    },
                },
            }
        }
    });
});
```

