222 lines
7.6 KiB
HTML
222 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link href="static/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="static/js/bootstrap.bundle.min.js"></script>
|
|
<script src="static/js/axios.min.js"></script>
|
|
<meta charset="UTF-8">
|
|
<title>应用管理</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<h1>应用管理页面</h1>
|
|
|
|
<br/>
|
|
|
|
<div class="d-flex">
|
|
<div class="align-self-start">用户名：{{ .Username }}</div>
|
|
<div class="ms-auto align-self-end">
|
|
<button class="btn btn-success" onclick="showModal('')">添加应用</button>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>应用名</th>
|
|
<th>描述</th>
|
|
<th>镜像名</th>
|
|
<th>启动命令</th>
|
|
<th>环境变量</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range $i, $v := .Apps }}
|
|
<tr id="app-list-{{ $v.Id }}">
|
|
<td> {{ inc $i }}</td>
|
|
<td class="app-field-id" style="display: none;"> {{ $v.Id }}</td>
|
|
<td class="app-field-name"> {{ $v.AppName }}</td>
|
|
<td class="app-field-comment"> {{ $v.Comment }}</td>
|
|
<td class="app-field-image"> {{ $v.Image }}</td>
|
|
<td class="app-field-cmd"> {{ $v.Command }}</td>
|
|
<td class="app-field-env"> {{ $v.Env }}</td>
|
|
<td class="app-field-status" id="app-status-{{ $v.Id }}"> {{ $v.Status }} </td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button class="btn btn-success" onclick="startApp('{{$v.Id}}')">启动</button>
|
|
<button class="btn btn-dark" onclick="stopApp('{{$v.Id}}')">停止</button>
|
|
<button class="btn btn-primary" onclick="showModal('app-list-{{ $v.Id }}')">修改</button>
|
|
<button class="btn btn-danger" onclick="deleteApp('{{ $v.Id }}')">删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{{ else }}
|
|
<tr>
|
|
<td colspan="7" style="text-align: center;">点击+按钮添加应用</td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
|
|
<div class="modal" tabindex="-1" id="edit-modal">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">编辑应用</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
<input type="text" id="app-id" class="form-control" style="display: none;" disabled/>
|
|
<input type="text" id="app-username" class="form-control" style="display: none;" disabled
|
|
value="{{ .Username }}"/>
|
|
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<label for="app-name" class="form-label">应用名</label>
|
|
<input type="text" id="app-name" class="form-control"
|
|
placeholder="只能为字母、数字和下划线"/>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<label for="app-image" class="form-label">镜像</label>
|
|
<input type="text" id="app-image" class="form-control" placeholder="Docker镜像名"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="app-cmd" class="form-label">启动命令</label>
|
|
<input type="text" id="app-cmd" class="form-control" placeholder="启动命令，可选"/>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="app-env" class="form-label">环境变量</label>
|
|
<input type="text" id="app-env" class="form-control" placeholder="环境变量，可选"/>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label for="app-comment" class="form-label">描述</label>
|
|
<textarea type="text" id="app-comment" class="form-control" placeholder="应用描述"></textarea>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="updateApp()">保存
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast d-flex align-items-center top-0 end-0" id="success-toast">
|
|
<div class="toast-body">
|
|
<p id="toast-content"></p>
|
|
</div>
|
|
<button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
function updateModalField(classString, value) {
|
|
const classArray = classString.split(' ')
|
|
for (let c of classArray) {
|
|
if (c.startsWith("app-field-")) {
|
|
const k = c.replace("app-field-", "app-")
|
|
const ele = document.getElementById(k)
|
|
if (!ele) {
|
|
console.log("Cannot fine element ", k)
|
|
} else {
|
|
ele.value = value
|
|
}
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
function clearModalField() {
|
|
const id_list = ["app-id", "app-name", "app-image", "app-cmd", "app-env", "app-comment"]
|
|
for (const k of id_list) {
|
|
document.getElementById(k).value = ""
|
|
}
|
|
}
|
|
|
|
function showModal(id) {
|
|
if (id) {
|
|
const list_tr = document.getElementById(id)
|
|
const values = list_tr.children
|
|
for (let a of values) {
|
|
updateModalField(a.className, a.innerHTML.trim())
|
|
}
|
|
} else {
|
|
clearModalField()
|
|
}
|
|
|
|
(new bootstrap.Modal("#edit-modal")).show()
|
|
}
|
|
|
|
function showToast(e) {
|
|
document.getElementById("toast-content").innerHTML = e.msg
|
|
t = new bootstrap.Toast(document.getElementById("success-toast"))
|
|
console.log(t)
|
|
t.show()
|
|
}
|
|
|
|
function updateApp() {
|
|
const id_list = ["app-id", "app-name", "app-username", "app-image", "app-cmd", "app-env", "app-comment"]
|
|
const json_key_list = ["Id", "AppName", "UserName", "Image", "Command", "Env", "Comment"]
|
|
let appData = {}
|
|
for (let k in id_list) {
|
|
appData[json_key_list[k]] = document.getElementById(id_list[k]).value
|
|
}
|
|
if (appData['Id']) {
|
|
appData['Id'] = parseInt(appData['Id'])
|
|
axios.put("app", appData).then(e => {
|
|
showToast(e.data)
|
|
})
|
|
} else {
|
|
appData['Id'] = null
|
|
axios.post("app", appData).then(e => {
|
|
console.log(e)
|
|
showToast(e.data)
|
|
});
|
|
}
|
|
}
|
|
|
|
function deleteApp(id) {
|
|
axios.delete("app", {
|
|
"data": {
|
|
Id: parseInt(id),
|
|
Username: document.getElementById("app-username").value
|
|
}
|
|
}).then(e => {
|
|
console.log(e.data)
|
|
showToast(e.data)
|
|
})
|
|
}
|
|
|
|
function startApp(id) {
|
|
axios.post("dep?id=" + id).then(e=>{
|
|
console.log(e.data)
|
|
})
|
|
}
|
|
|
|
function stopApp(id) {
|
|
axios.delete("dep?id=" + id).then(e=>{
|
|
console.log(e.data)
|
|
})
|
|
}
|
|
|
|
</script>
|
|
</html> |