Dispark/edgetunnel
1
0
Fork 0
mirror of https://github.com/lush2020/edgetunnel.git synced 2026-03-24 09:08:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

add manage html

Browse Source
This commit is contained in:
zizifn
2022-06-12 03:31:38 +08:00
committed by zizifn
parent cc280c837e
commit a59f4d83fb
4 changed files with 156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
html/manage-utils.js Normal file
View File

@@ -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
}

32
html/manage.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理</title>
<link rel="stylesheet" href="./style/manage.css">
</head>
<body>
<div id="main">
<div class="keyContainer">
<label for="key" class="key">heroku key</label>
<input type="text" size="36" id="key">
<input type="checkbox" name="savetolocalstorage" id="save2Local">
<label for="save2Local">save to localstorage</label>
<button id="addKey">Add</button>
</div>
<template id="app-list">
<div class="accountContainer">
<span class="key"></span>
<ul class="app-list">
</ul>
</div>
</template>
</div>
<script src="./manage.js" type="module"></script>
</body>
</html>

77
html/manage.js Normal file
View File

@@ -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);
}

24
html/style/manage.css Normal file
View File

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