-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (92 loc) · 3.83 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyTech-Tracker</title>
<link href="https://fonts.googleapis.com/css2?family=Futura:wght@400&display=swap" rel="stylesheet">
<style>
/* Your original styles here */
</style>
</head>
<body>
<div class="container">
<h1>SkyTech-Tracker</h1>
<button class="tab-button" onclick="showTab('farmList')">Farm List</button>
<button class="tab-button" onclick="showTab('storageBotList')">Storage Bot List</button>
<button class="tab-button" onclick="showTab('trackingBotList')">Tracking Bot List</button>
<div id="farmList" class="tab-content">
<h2>Farm List</h2>
<!-- Form to add farm data -->
<form id="farmForm">
<input type="text" id="farmName" placeholder="Farm Name" required>
<select id="farmStatus" class="dropdown">
<option value="Running">Running</option>
<option value="Stopped">Stopped</option>
<option value="Broken">Broken</option>
</select>
<input type="text" id="farmInstructions" placeholder="Instructions">
<input type="text" id="farmBotName" placeholder="Bot Name">
<input type="text" id="farmStorageBotName" placeholder="Storage Bot Name">
<input type="text" id="farmLocationOW" placeholder="Location (OW)">
<input type="text" id="farmLocationNE" placeholder="Location (NE)">
<button type="button" onclick="addFarm()">Add Farm</button>
</form>
<ul id="farmListData"></ul>
</div>
<!-- Placeholder for Storage Bot List and Tracking Bot List -->
</div>
<script>
const SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbyoP1FxHDi5k7Oeiw7vg2CCFfuTW4x03ivw0BqvB3JB7EPQtQZPXKq2c4C52XldaOXWDA/exec';
async function addFarm() {
const farmRow = [
document.getElementById('farmName').value,
document.getElementById('farmStatus').value,
document.getElementById('farmInstructions').value,
document.getElementById('farmBotName').value,
document.getElementById('farmStorageBotName').value,
document.getElementById('farmLocationOW').value,
document.getElementById('farmLocationNE').value
];
await fetch(SCRIPT_URL, {
method: 'POST',
body: JSON.stringify({ action: 'add', values: [farmRow] }),
headers: { 'Content-Type': 'application/json' }
});
loadFarmData();
}
async function loadFarmData() {
const response = await fetch(SCRIPT_URL, {
method: 'POST',
body: JSON.stringify({ action: 'fetch' }),
headers: { 'Content-Type': 'application/json' }
});
const data = await response.json();
const farmListData = document.getElementById('farmListData');
farmListData.innerHTML = '';
data.slice(1).forEach((row, index) => {
const li = document.createElement('li');
li.textContent = `Farm Name: ${row[0]}, Status: ${row[1]}, Instructions: ${row[2]}, Bot Name: ${row[3]}, Storage Bot Name: ${row[4]}, Location OW: ${row[5]}, Location NE: ${row[6]}`;
const removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.onclick = () => removeFarm(index + 2);
li.appendChild(removeButton);
farmListData.appendChild(li);
});
}
async function removeFarm(rowIndex) {
await fetch(SCRIPT_URL, {
method: 'POST',
body: JSON.stringify({ action: 'remove', rowIndex }),
headers: { 'Content-Type': 'application/json' }
});
loadFarmData();
}
function showTab(tabId) {
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('visible'));
document.getElementById(tabId).classList.add('visible');
}
document.addEventListener('DOMContentLoaded', loadFarmData);
</script>
</body>
</html>