Skip to content

Commit 55cd00d

Browse files
tomoyktomoyk
authored
Merge pull request #13 from cdsl-research/future/v2
2 parents bbc03c1 + cd1ad27 commit 55cd00d

File tree

6 files changed

+212
-176
lines changed

6 files changed

+212
-176
lines changed

‎dashboard/static/create.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
const setLoading = (is_display) => {
2+
if (is_display) {
3+
document.getElementById("commit").classList.add("loading");
4+
} else {
5+
document.getElementById("commit").classList.remove("loading");
6+
}
7+
};
8+
9+
const setMsgbox = (message, is_success) => {
10+
if (message) {
11+
document.getElementById("msgbox").style.display = "block";
12+
document.getElementById("status").innerHTML = message;
13+
document.getElementById('msgbox').classList.remove(is_success ? "toast-error" : "toast-success");
14+
document.getElementById('msgbox').classList.add(is_success ? "toast-success" : "toast-error");
15+
} else {
16+
document.getElementById("msgbox").style.display = "none";
17+
document.getElementById("status").innerHTML = "";
18+
}
19+
};
20+
21+
const setSpec = (cpu, ram, storage) => {
22+
document.getElementById("cpu_cores").value = cpu;
23+
document.getElementById("ram_mb").value = ram;
24+
document.getElementById("storage_gb").value = storage;
25+
};
26+
27+
const createMachine = () => {
28+
setLoading(true);
29+
30+
const url = '/v1/machine';
31+
const params = ["name", "cpu_cores", "ram_mb", "storage_gb", "esxi_nodename", "comment"];
32+
const payloads = {};
33+
params.forEach(param => {
34+
payloads[param] = document.getElementById(param).value;
35+
});
36+
// console.log(payloads);
37+
38+
fetch(url, {
39+
method: 'POST',
40+
body: JSON.stringify(payloads), // data can be `string` or {object}!
41+
headers: {
42+
'Content-Type': 'application/json'
43+
}
44+
})
45+
.then(response => {
46+
if (!response.ok) {
47+
console.error("status code:", response.status);
48+
throw new Error(response.statusText);
49+
}
50+
return response.json();
51+
})
52+
.then(data => {
53+
if (data === undefined) {
54+
return;
55+
}
56+
console.log('Success:', data);
57+
setMsgbox('Success: ' + data['message'], true);
58+
setLoading(false);
59+
})
60+
.catch(error => {
61+
console.error(error);
62+
setMsgbox("Failed: " + error, false);
63+
setLoading(false);
64+
});
65+
};
66+
67+
const commitButton = document.getElementById('commit');
68+
commitButton.addEventListener("click", createMachine, false);
69+
70+
const closeButton = document.getElementById('close');
71+
closeButton.addEventListener("click", () => {
72+
setMsgbox(false);
73+
}, false);
74+
75+
document.getElementById('microButton').addEventListener("click", () => {
76+
setSpec(1, 512, 30);
77+
}, false);
78+
79+
document.getElementById('smallButton').addEventListener("click", () => {
80+
setSpec(1, 1024, 30);
81+
}, false);
82+
83+
document.getElementById('mediumButton').addEventListener("click", () => {
84+
setSpec(2, 2048, 50);
85+
}, false);
86+
87+
document.getElementById('largeButton').addEventListener("click", () => {
88+
setSpec(4, 4096, 70);
89+
}, false);

‎dashboard/static/detail.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Press power action button
2+
const powerActions = document.querySelectorAll('.power-action');
3+
powerActions.forEach((target) => {
4+
target.addEventListener("click", (e) => {
5+
const powerStatus = e.target.name;
6+
setPower(powerStatus);
7+
})
8+
});
9+
10+
// Close button on top message box
11+
const closeTopMessage = document.getElementById("close-top-message-box");
12+
closeTopMessage.addEventListener("click", () => {
13+
const topMessageBox = document.getElementById("top-message-box");
14+
topMessageBox.style.display = "none";
15+
});
16+
17+
// Change navigation
18+
const menuItems = document.querySelectorAll(".menu-item");
19+
menuItems.forEach((target) => {
20+
target.addEventListener("click", (e) => {
21+
resetActiveItem();
22+
e.target.classList.add("active");
23+
changeSubPage(e.target);
24+
})
25+
});
26+
27+
// Change sub pages
28+
const changeSubPage = (targetPage) => {
29+
const subPages = document.querySelectorAll(".sub-page");
30+
subPages.forEach((target) => {
31+
if (targetPage.name === target.attributes.name.nodeValue) {
32+
target.classList.remove("invisible");
33+
} else {
34+
target.classList.add("invisible");
35+
}
36+
})
37+
};
38+
39+
// Reset navigation select
40+
const resetActiveItem = () => {
41+
menuItems.forEach((target) => {
42+
target.classList.remove("active")
43+
});
44+
};

‎dashboard/templates/_footer.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
<footer>
2+
<p>ECoMan is published on <a href="https://github.com/cdsl-research/ecoman">GitHub</a>.</p>
3+
</footer>
4+
15
</div>
26
</body>
3-
4-
<p>ECoMan is published on <a href="https://github.com/cdsl-research/ecoman">GitHub</a>.</p>
5-
6-
</html>
7+
</html>

‎dashboard/templates/_header.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
<a href="/nodes" class="btn btn-link">ESXi Nodes</a>
1717
<a href="/create" class="btn btn-link">Create Machine</a>
1818
</section>
19+
<!--
1920
<section class="navbar-section">
2021
<span>Logined as <i>Guest</i></span>
2122
</section>
22-
</header>
23+
-->
24+
</header>

‎dashboard/templates/create.html

+3-82
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@
9292
</div>
9393
</form>
9494
</main>
95+
9596
<style>
9697
#form-container {
9798
max-width: 600px;
@@ -103,86 +104,6 @@
103104
}
104105
</style>
105106

106-
<script>
107-
const setLoading = (is_display) => {
108-
if (is_display) {
109-
document.getElementById("commit").classList.add("loading");
110-
} else {
111-
document.getElementById("commit").classList.remove("loading");
112-
}
113-
};
114-
115-
const setMsgbox = (message, is_success) => {
116-
if (message) {
117-
document.getElementById("msgbox").style.display = "block";
118-
document.getElementById("status").innerHTML = message;
119-
document.getElementById('msgbox').classList.remove(is_success ? "toast-error" : "toast-success");
120-
document.getElementById('msgbox').classList.add(is_success ? "toast-success" : "toast-error");
121-
} else {
122-
document.getElementById("msgbox").style.display = "none";
123-
document.getElementById("status").innerHTML = "";
124-
}
125-
};
126-
127-
const setSpec = (cpu, ram, storage) => {
128-
document.getElementById("cpu_cores").value = cpu;
129-
document.getElementById("ram_mb").value = ram;
130-
document.getElementById("storage_gb").value = storage;
131-
};
132-
133-
const createMachine = () => {
134-
setLoading(true);
135-
136-
const url = '/v1/machine';
137-
const params = ["name", "cpu_cores", "ram_mb", "storage_gb", "esxi_nodename", "comment"];
138-
const payloads = {};
139-
params.forEach(param => {
140-
payloads[param] = document.getElementById(param).value;
141-
});
142-
// console.log(payloads);
143-
144-
fetch(url, {
145-
method: 'POST',
146-
body: JSON.stringify(payloads), // data can be `string` or {object}!
147-
headers: {
148-
'Content-Type': 'application/json'
149-
}
150-
}).then(res => res.json())
151-
.then(response => {
152-
console.log('Success:', JSON.stringify(response));
153-
setMsgbox('Success: ' + response['message'], true);
154-
setLoading(false);
155-
})
156-
.catch(error => {
157-
console.error('Error:', error)
158-
setMsgbox("Fail: " + error, false);
159-
setLoading(false);
160-
});
161-
};
162-
163-
const commitButton = document.getElementById('commit');
164-
commitButton.addEventListener("click", createMachine, false);
165-
166-
const closeButton = document.getElementById('close');
167-
closeButton.addEventListener("click", () => {
168-
setMsgbox(false);
169-
}, false);
170-
171-
document.getElementById('microButton').addEventListener("click", () => {
172-
setSpec(1, 512, 30);
173-
}, false);
174-
175-
document.getElementById('smallButton').addEventListener("click", () => {
176-
setSpec(1, 1024, 30);
177-
}, false);
178-
179-
document.getElementById('mediumButton').addEventListener("click", () => {
180-
setSpec(2, 2048, 50);
181-
}, false);
182-
183-
document.getElementById('largeButton').addEventListener("click", () => {
184-
setSpec(4, 4096, 70);
185-
}, false);
186-
</script>
107+
<script src="/static/create.js"></script>
187108

188-
{% include "_footer.html" %}
109+
{% include "_footer.html" %}

0 commit comments

Comments
 (0)