From a59f4d83fb98d03d40f81f83dd7fc3d1b2ee5c44 Mon Sep 17 00:00:00 2001
From: zizifn <1803942+zizifn@users.noreply.github.com>
Date: Sun, 12 Jun 2022 03:31:38 +0800
Subject: [PATCH] add manage html
---
html/manage-utils.js | 23 +++++++++++++
html/manage.html | 32 ++++++++++++++++++
html/manage.js | 77 +++++++++++++++++++++++++++++++++++++++++++
html/style/manage.css | 24 ++++++++++++++
4 files changed, 156 insertions(+)
create mode 100644 html/manage-utils.js
create mode 100644 html/manage.html
create mode 100644 html/manage.js
create mode 100644 html/style/manage.css
diff --git a/html/manage-utils.js b/html/manage-utils.js
new file mode 100644
index 0000000..c80fe35
--- /dev/null
+++ b/html/manage-utils.js
@@ -0,0 +1,23 @@
+
+const testStr= "1111";
+
+async function restartAPP(appname, key){
+
+ const resp = await fetch(`https://api.heroku.com/apps/${appname}/dynos`,{
+ method: "Delete",
+ headers: {
+ Accept: "application/vnd.heroku+json; version=3",
+ Authorization: `Bearer ${key}`
+ }
+ });
+
+ if(resp.status === 202){
+ alert("restart success!")
+ }
+
+}
+
+export {
+ testStr,
+ restartAPP
+}
\ No newline at end of file
diff --git a/html/manage.html b/html/manage.html
new file mode 100644
index 0000000..bfc6a79
--- /dev/null
+++ b/html/manage.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/manage.js b/html/manage.js
new file mode 100644
index 0000000..8f85e6f
--- /dev/null
+++ b/html/manage.js
@@ -0,0 +1,77 @@
+
+import { testStr, restartAPP } from './manage-utils.js'
+
+const main = document.querySelector("#main");
+const template = document.querySelector('#app-list');
+const save2Local = document.querySelector("#save2Local")
+// const accounts = [];
+const accountsStr = localStorage.getItem("accounts");
+const accounts = new Set(JSON.parse(accountsStr) || []);
+for (const account of accounts) {
+ addAccount(account);
+}
+document.querySelector("#addKey")?.addEventListener(
+ 'click',
+ async () => {
+ /** @type string*/
+ const key = document.getElementById("key")?.value;
+ if (key && accounts.has(key) === false) {
+ await addAccount(key);
+ }
+ }
+)
+
+
+async function addAccount(key) {
+ const clone = template.content.cloneNode(true);
+ const keySpan = clone.querySelector("div>.key");
+ keySpan.textContent = "****" + key.slice(4);
+
+ const resp = await fetch("https://api.heroku.com/apps", {
+ method: "Get",
+ headers: {
+ Accept: "application/vnd.heroku+json; version=3",
+ Authorization: `Bearer ${key}`
+ }
+ });
+
+ /** @type any[] */
+ const jsonContent = await resp.json();
+ console.log(jsonContent);
+
+ if (save2Local.checked) {
+ const appStr = localStorage.getItem("accounts") || '[]';
+ const appSet = new Set(JSON.parse(appStr)).add(key);
+ const apps = [...appSet];
+ localStorage.setItem("accounts", JSON.stringify(apps));
+
+ console.log(localStorage.getItem("accounts"));
+ }
+
+ const appsUl = clone.querySelector("UL.app-list");
+ for (const app of jsonContent) {
+ const appli = document.createElement('li');
+ appli.classList.add("appli");
+ const restartBtn = document.createElement('button');
+ restartBtn.dataset.appname = app.name;
+
+ restartBtn.addEventListener('click', (event) => {
+ restartAPP(app.name, key);
+ });
+ restartBtn.textContent = "restart";
+ const url = document.createElement('a');
+ url.href = app.web_url;
+ url.textContent = app.web_url;
+
+ appli.textContent = `app: ${app.name}`;
+ appli.appendChild(url);
+ appli.appendChild(restartBtn);
+ appsUl.appendChild(appli);
+
+
+ }
+ main.appendChild(clone);
+ accounts.add(key);
+ console.log(testStr);
+}
+
diff --git a/html/style/manage.css b/html/style/manage.css
new file mode 100644
index 0000000..1915cbb
--- /dev/null
+++ b/html/style/manage.css
@@ -0,0 +1,24 @@
+.keyContainer {
+ display: flex;
+ /* border: 1px solid red; */
+ background-color: white;
+ margin-bottom: 10px;
+ gap: 5px;
+}
+
+.keyContainer > .key {
+ margin-right: 5px;
+}
+
+.accountContainer {
+ display: flex;
+ /* border: 1px solid blue; */
+ flex-direction: column;
+ background-color: aliceblue;
+ margin-bottom: 10px;
+}
+
+.appli{
+ display: flex;
+ gap: 5px;
+}