-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathOrderCancel.html
156 lines (138 loc) · 7.53 KB
/
OrderCancel.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
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
<!DOCTYPE html>
<html lang="th">
<head>
<script src="./library/utils.js"></script>
<link rel="stylesheet" href="https://phurich.github.io/phuthon/library/style.css">
<html-header></html-header>
</head>
<body>
<img src="./library/logo600px.png" style="max-width:100%;margin: auto;display: block;" alt="ภูธรเดลิเวอรี่">
<form id="orderCancel" style="margin: 20px;" method="post">
<div class="row">
<div class="justify-content-center">
โดยทั่วไปลูกค้ายินดีรับเท่าที่ได้ 😊 หรือ เปลี่ยนเป็นอย่างอื่น
📞ขอเพียงแจ้งให้ลูกค้าทราบ<br><br>
</div>
<div>
<input name="cancel" id="cancel0" type="radio" value="ยกเลิกบางส่วน" onclick="showContent();">
<label for="cancel0">ยกเลิก "บางรายการ" (กดชื่อรายการที่จะยกเลิก)</label>
<div id="content" style="margin-left: 50px; display: none;">
</div>
</div>
<div>
<input name="cancel" id="cancel1" type="radio" value="ยกเลิกทั้งหมด" onclick="hideContent();">
<label for="cancel1">ยกเลิกทั้งหมด</label>
</div>
<div>
<!-- Hidden textarea to store the content data -->
<textarea name="canceledList" id="canceledList" style="display: none;"></textarea>
</div>
<div><input name="restaurant" id="restaurant" type="hidden" value=""></div>
<div><input name="orderNumber" id="orderNumber" type="hidden" value=""></div>
</div>
<div class="row justify-content-center">
<label for="reason">ชี้แจงเพิ่มเติม (ถ้ามี)</label>
<input name="reason" id="reason" type="text" style="width:35%">
</div>
<div class="row justify-content-center">
<label for="quickReason">คำชี้แจงด่วน</label>
<span name="quickReason" class="button button-warning button-space" onclick="assignText(event)">? เหลือแค่ 1</span>
<span name="quickReason" class="button button-warning button-space" onclick="assignText(event)">? หมด</span>
<span name="quickReason" class="button button-warning button-space" onclick="assignText(event)">ร้านปิด</span>
<span name="quickReason" class="button button-warning button-space" onclick="assignText(event)">ร้านจะเปิด ?:00 น.</span>
</div>
<div class="row justify-content-center">
<button name="submit" type="submit" class="button button-lg button-danger">🚫ยกเลิกออเดอร์😥</button>
</div>
</form>
</body>
<script>
function assignText(event) {
document.getElementById('reason').value += event.target.innerText;
}
function showContent() {
document.getElementById('content').style.display = 'block';
document.getElementById('canceledList').value = document.getElementById('content').innerText;
}
function hideContent() {
document.getElementById('content').style.display = 'none';
document.getElementById('canceledList').value = '';
}
function ensureSpacesAroundNumbers(input) {
// Regular expression to match numbers that are not already surrounded by spaces
let regex = /(\s+)?\d+(\.\d+)?(\s+)?/gm;
// Function to add spaces around a match
let addSpaces = match => ' ' + match.trim() + ' ';
// Replace numbers not surrounded by spaces with the same number surrounded by spaces
let output = input.replace(regex, addSpaces);
return output;
}
function processContent() {
let content = document.getElementById('content');
let manipulatedContent = ensureSpacesAroundNumbers(content.textContent);
content.innerHTML = manipulatedContent.split(/\|+/gm).map(word => {
return `<span>${word}</span><br>`;
}).join(' ');
Array.from(content.children).forEach(child => {
child.addEventListener('click', function () {
this.classList.toggle('strikethrough');
if (this.classList.contains('strikethrough')) {
// If the class 'strikethrough' is present, add brackets
this.textContent = '[' + this.textContent + ']';
} else {
// If the class 'strikethrough' is not present, remove brackets
this.textContent = this.textContent.replace(/^\[/, '').replace(/\]$/, '');
}
document.getElementById('canceledList').value = document.getElementById('content').textContent;
});
});
}
document.getElementById('orderCancel').addEventListener('submit', function (e) {
let radioButtons = document.getElementsByName('cancel');
let firstRadioButton = radioButtons[0];
let preventSubmit = false; // Track if submission should be prevented
if (!Array.from(radioButtons).some(radio => radio.checked)) {
preventSubmit = true;
swal("❌ผิดพลาด", "กรุณากดเลือกรูปแบบการยกเลิก");
}
if (firstRadioButton.checked) {
let content = document.getElementById('content');
let isStrikethrough = Array.from(content.children).some(child => child.classList.contains('strikethrough'));
if (!isStrikethrough) {
preventSubmit = true;
swal("❌ผิดพลาด", "กรุณากดเลือกรายการยกเลิก");
}
}
if (preventSubmit) {
e.preventDefault();
}
});
document.onreadystatechange = () => {
if (document.readyState === "complete") {
// Get the full URL from the browser's address bar
const url = window.location.href;
// Extract the query string
const queryString = url.split('?')[1];
// Decode the query string
const decodedString = decodeURIComponent(queryString);
// Extract key-value pairs
const params = new URLSearchParams(decodedString);
// Retrieve parameters
//const page = params.get('page');
//const rider = params.get('rider');
const list = params.get('list').replace(/[\r\n]+/gm, "|");
const regex = /^(.*)\|.+(\d{5})\|/gm;
const matched = regex.exec(list);
if (matched) {
document.getElementById("restaurant").value = matched[1];
document.getElementById("orderNumber").value = matched[2];
document.getElementById("content").innerHTML = list.replace(matched[0], "");
} else {
document.getElementById("content").innerHTML = "😥 ผิดพลาด ไม่พบรายการ";
}
document.getElementById('orderCancel').action = currentActionUrl;
processContent();
}
};
</script>
</html>