150 lines
5.0 KiB
HTML
150 lines
5.0 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>
|
|
<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>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range $i, $v := .Apps }}
|
|
<tr id="app-list-{{ $v.Id }}">
|
|
<td> {{ inc $i }}</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>
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary" onclick="showModal('app-list-{{ $v.Id }}')">修改</button>
|
|
<button class="btn btn-danger">删除</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">
|
|
|
|
<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">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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-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()
|
|
}
|
|
|
|
</script>
|
|
</html> |