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; +}