-
Notifications
You must be signed in to change notification settings - Fork 0
/
all.js
200 lines (187 loc) · 5.4 KB
/
all.js
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
const tourCard = document.querySelector(".tour-card");
const searchResult = document.querySelector(".searchResult");
const addTicketBtn = document.querySelector("#addTicketBtn");
const addTicketForm = document.querySelector(".add-Ticket-form");
const formInput = document.querySelectorAll(".add-Ticket-form .form-input");
//取得資料
let data = [];
axios
.get(
"https://raw.githubusercontent.com/hexschool/js-training/main/travelApi.json"
)
.then(function (res) {
console.log(res);
data = res.data.data;
renderData(data);
renderchart(data);
})
.catch(function (error) {
console.log(error);
});
//網頁初始化
function init() {
renderData(data);
}
init();
//渲染畫面函式
function renderData(data) {
let str = "";
data.forEach(function (item, index) {
let tourCardList = ` <li class="d-flex flex-column col-6 col-sm-12 g-1 mb-8">
<div class="card-img position-relative">
<span
class="bg-secondary fz-20 text-white position-absolute top-n2 px-5 py-2 border-radius-4"
>${item.area} </span
>
<img
src=${item.imgUrl}
alt=""
class="card-img-hover"
/>
</div>
<div
class="card d-flex flex-column bg-white box-shadow-4 px-5 py-5 flex-grow-1 position-relative"
>
<span
class="bg-primary fz-16 text-white position-absolute top-n3 start-0 px-2 py-1 border-radius-4"
>${item.rate}</span
>
<div class="card-title mb-4">
<h2 class="fz-24 text-primary border-bottom-3 fw-medium">
${item.name}
</h2>
</div>
<div class="card-body flex-grow-1">
<p class="text-grey mb-8">
${item.description}
</p>
</div>
<div
class="card-foot d-flex align-item-center justify-content-between"
>
<span class="d-flex align-item-center text-primary fz-16">
<span class="material-icons-outlined me-1"> error </span
>剩下最後 ${item.group} 組</span
>
<p class="text-primary fz-32 d-flex align-item-center">
<span class="text-primary fz-16 me-1"> TWD</span>${item.price}
</p>
</div>
</div>
</li>`;
str += tourCardList;
});
tourCard.innerHTML = str;
searchResult.innerHTML = `<p>本次搜尋共 ${data.length} 筆資料</p>`;
}
//監聽地區選擇;
const areaSearchFilter = document.querySelector("#areaSearch");
areaSearchFilter.addEventListener("change", function (e) {
//無結果函式
function renderNoResult() {
tourCard.innerHTML = `<li class="text-grey fz-16 m0-auto ">目前沒有${e.target.value}地區的行程</li>`;
}
//將篩選的新陣列賦予到新變數上
const filterData = data.filter((item) => e.target.value === item.area);
//判斷選取值及輸出內容
if (e.target.value === "") {
renderData(data);
} else if (e.target.value !== "" && filterData.length == 0) {
renderNoResult();
} else {
renderData(filterData);
}
});
//將數字及負號字元外的字符刪除
function filterNum(input) {
return Number(input.value.trim().replace(/[^\d-.]/g, ""));
}
//輸入完清除數輸入格
function clearValue() {
formInput.forEach(function (item) {
item.value = "";
});
}
// 監聽新增套票按鈕點擊事件
addTicketBtn.addEventListener("click", function (e) {
e.preventDefault();
let newData = {};
newData.name = ticketName.value.trim();
newData.imgUrl = ticketUrl.value.trim();
newData.area = ticketArea.value.trim();
newData.description = ticketDescription.value.trim();
newData.group = filterNum(ticketNum);
newData.price = filterNum(ticketPrice);
newData.rate = filterNum(ticketRate);
//無法中斷回圈該用for回圈
// formInput.forEach(function (item) {
// console.log(item.value);
// if (item.value === "") {
// alert(`請填寫完整`);
// }
// return;
// });
//新增未填寫及星級分數判斷
for (let i = 0; i < formInput.length; i++) {
if (formInput[i].value.trim() === "") {
alert(`欄位請填寫完整`);
return;
} else if (filterNum(ticketRate) < 0 || filterNum(ticketRate) > 10) {
alert("套票星級請填寫1-10之間的分數");
return;
}
}
data.push(newData);
renderData(data);
renderchart(data);
//將選單變為全部地區
areaSearchFilter.value = "";
clearValue();
});
//生成圖表
function renderchart(data) {
//篩選統計地區,自動生成地區及數量物件
//組完資料再渲染
let totalObj = {};
let newData = [];
data.forEach(function (item) {
if (totalObj[item.area] === undefined) {
totalObj[item.area] = 1;
} else {
totalObj[item.area] += 1;
}
});
let area = Object.keys(totalObj);
//console.log(area); //['高雄', '台北', '台中']
area.forEach(function (item) {
let ary = [];
ary.push(item);
ary.push(totalObj[item]);
newData.push(ary);
});
//console.log(newData);//[ ["高雄",1],["台北",1],["台中",1] ]
//統計圖表設定
const chart = c3.generate({
bindto: "#chart", // HTML 元素綁定
data: {
columns: newData, // 資料存放
type: "donut", // 圖表種類
colors: {
高雄: "#E68618",
台中: "#5151D3",
台北: "#26BFC7",
},
},
donut: {
width: 10,
title: "套票地區比重",
label: {
show: false, // 是否顯示標籤
},
},
size: {
width: 200,
height: 200,
},
});
}