-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsearch.html
117 lines (109 loc) · 3.57 KB
/
search.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<html>
<head>
<title>支出查詢</title>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/fdb-all.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<style>
.input-field {
border: 1px solid #ddd;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-12">
<h2 style="margin-bottom:20px;text-align:center;">支出查詢</h2>
<input type="radio" name="mode" value="thisMonth" /> 本月份
<br>
<input type="radio" name="mode" value="period" /> 指定期間
<br>
<input id="from" class="input-field" type="date"> ~ <input id="to" class="input-field" type="date">
<br><br>
<button id="submit" class="btn btn-primary btn-block">查詢</button>
<hr>
<table id="categories" class="table">
<thead>
<tr>
<th>類別</th>
<th>金額</th>
<th>比例</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="expenses" class="table">
<thead>
<tr>
<th>日期</th>
<th>項目</th>
<th>金額</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script>
var fdb = new ForerunnerDB();
var db = fdb.db("DB");
var expensesCollection = db.collection("expenses");
expensesCollection.load();
$("#submit").on("click",function(){
var searchMode = $("input[name='mode']:checked").val();
var from="", to="";
if (searchMode=='thisMonth') {
var date = new Date();
var year = date.getUTCFullYear();
var month = date.getUTCMonth()+1; // gteMonth 的結果會是實際月份-1
if(month<=9){
month = "0"+month; // 必須讓月份以雙位數顯示，否則無法比較 ( Ex. 2016-10-1 會小於 2016-6-1 )
}
from = year+"-"+month+"-"+"01";
to = year+"-"+month+"-"+"31";
} else if(searchMode=='period'){
from = $("#from").val();
to = $("#to").val();
}
var categories={
"餐飲": 0,
"交通": 0,
"娛樂": 0,
"生活開銷": 0
};
var total = 0;
var expenses = expensesCollection.find(
{
date:{
$gte:from,
$lte:to
}
},{
$orderBy:{date:1}
}
);
$("tbody").html("");
if(expenses.length===0){
$("tbody").append("<tr><td colspan='3' style='text-align:center'>查無資料</td></tr>");
} else {
for(var i=0;i<expenses.length; i++){
$("#expenses tbody").append("<tr><td>"+expenses[i].date+"</td><td>"+expenses[i].name+"</td><td>"+expenses[i].amount+"</td></tr>");
categories[expenses[i].category] += expenses[i].amount/1;
total += expenses[i].amount/1;
}
for(key in categories){
var amount = categories[key];
$("#categories tbody").append("<tr><td>"+key+"</td><td>"+amount+"</td><td>"+Math.round(amount/total*100)+"%"+"</td></tr>");
}
$("#categories tbody").append("<tr><td colspan='3'>總計: "+total+"</td></tr>");
}
});
</script>
</body>
</html>