118 lines
3.9 KiB
HTML
118 lines
3.9 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> {{ $v.AppName }}</td>
|
|
<td> {{ $v.Comment }}</td>
|
|
<td> {{ $v.Image }}</td>
|
|
<td> {{ $v.Command }}</td>
|
|
<td> {{ $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 showModal(id) {
|
|
const modal = new bootstrap.Modal("#edit-modal")
|
|
console.log(modal)
|
|
modal.show()
|
|
}
|
|
</script>
|
|
</html> |