-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathadd_food.html
138 lines (126 loc) · 5.48 KB
/
add_food.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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>食品登録</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1>食品登録</h1>
</header>
<main class="main-content">
<button id="startScanner" class="button">バーコードを読み取る</button>
<div id="barcode-scanner" class="scanner" style="display: none;">
<div id="interactive" class="viewport"></div>
<button id="readBarcode" class="button" style="margin-top: 10px;">読み取る</button>
</div>
<form id="foodForm">
<div class="form-group">
<label for="foodName">食品名:</label>
<input type="text" id="foodName" name="foodName" required>
</div>
<div class="form-group">
<label for="expiryDate">賞味期限:</label>
<input type="date" id="expiryDate" name="expiryDate" required>
</div>
<div class="form-group">
<button type="submit" class="button">登録</button>
</div>
</form>
</main>
<footer class="footer">
<a href="dashboard.html" class="button">ホームに戻る</a>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let scannerActive = false;
document.getElementById('startScanner').addEventListener('click', function() {
this.style.display = 'none';
document.getElementById('barcode-scanner').style.display = 'block';
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#interactive'),
constraints: {
width: 640,
height: 480,
facingMode: "environment"
}
},
decoder: {
readers: ["ean_reader"]
},
locate: true
}, function(err) {
if (err) {
console.error(err);
return;
}
Quagga.start();
scannerActive = true;
});
});
document.getElementById('readBarcode').addEventListener('click', function() {
if (!scannerActive) return;
Quagga.onDetected(function(result) {
var code = result.codeResult.code;
console.log('バーコード:', code);
fetch(`https://world.openfoodfacts.org/api/v0/product/${code}.json`)
.then(response => response.json())
.then(data => {
if (data.status === 1) {
var product = data.product;
document.getElementById('foodName').value = product.product_name;
alert('食品情報が取得されました。');
Quagga.stop();
document.getElementById('barcode-scanner').style.display = 'none';
scannerActive = false;
} else {
alert('食品情報が見つかりませんでした。');
}
})
.catch(error => {
console.error('Error fetching product data:', error);
alert('食品情報の取得中にエラーが発生しました。');
});
});
});
document.getElementById('foodForm').addEventListener('submit', function(event) {
event.preventDefault();
var foodName = document.getElementById('foodName').value;
var expiryDate = document.getElementById('expiryDate').value;
fetch('http://localhost:5000/api/add_food', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
foodName: foodName,
expiryDate: expiryDate
})
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
alert('食品が登録されました。');
document.getElementById('foodForm').reset();
})
.catch(error => {
console.error('Error occurred while adding food:', error);
alert('食品登録中にエラーが発生しました。');
});
});
});
</script>
</body>
</html>