go-url-shortener/web/template/home.html.tmpl
2023-12-25 17:31:07 +08:00

83 lines
2.4 KiB
Cheetah

{{template "header" .}}
<div class="container-fluid flex justify-content">
<div class="main">
<h3 style="margin-top: 20px;margin-bottom: 10px;">短地址列表 <a class="btn btn-primary"
href="/create-short-url">添加</a></h3>
<table class="my_table" style="display: block;">
<tr>
<th width="600px">原地址</th>
<th width="320px">短地址</th>
<th width="80px">是否有效</th>
<th width="80px">删除</th>
</tr>
{{range .}}
<tr>
<td width="600px">{{.OriginUrl}}</td>
<td width="320px"><a target="_blank" href="{{genShortUrl .ShortUrl}}">{{genShortUrl .ShortUrl}}</a></td>
<td width="80px">
{{if eq .Status 0}}
<code>YES</code>
{{else}}
<code>NO</code>
{{end}}
</td>
<td width="80px">
{{if eq .Status 0}}
<button data-short-url="{{.ShortUrl}}" class="btn btn-danger deleteShortUrl">删除</button>
{{end}}
</td>
</tr>
{{end}}
</table>
{{ csrfField }}
</div>
</div>
{{define "css"}}
<style>
.my_table {
display: block;
max-width: 1280px;
}
.my_table tr {
display: inline-block;
width: 100%;
border: 1px solid #eee;
border-collapse: collapse;
}
.my_table tr td {
display: inline-block;
word-wrap: break-word;
padding: 2px 5px;
}
</style>
{{end}}
{{define "js"}}
<script>
$('.deleteShortUrl').click(function () {
let csrfToken = $('input[name="csrf_token"]').val()
let u = $(this).attr('data-short-url')
$.ajax({
url: '/delete-short-url/' + u,
type: 'POST',
cache: false,
processData: false,
contentType: false,
headers: {
"X-CSRF-Token": csrfToken
},
success: function (res) {
if (res.success) {
alert('删除成功');
window.location.reload();
} else {
alert('删除失败');
}
}
})
});
</script>
{{end}}
{{template "footer" .}}