You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
5.8 KiB
116 lines
5.8 KiB
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>导演作品数量排行榜</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.poster-thumb { width: 50px; height: 75px; object-fit: cover; }
|
|
.loading { display: none; }
|
|
.responsive-table { overflow-x: auto; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-light">
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">豆瓣电影分析</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<form id="searchForm" class="row g-3" th:action="@{/directors}" method="get">
|
|
<div class="col-md-4">
|
|
<label for="name" class="form-label">搜索导演</label>
|
|
<input type="text" class="form-control" id="name" name="name" th:value="${name}" placeholder="输入导演姓名">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="type" class="form-label">作品类型</label>
|
|
<select class="form-select" id="type" name="type">
|
|
<option value="">全部类型</option>
|
|
<option th:each="t : ${types}" th:value="${t}" th:text="${t}" th:selected="${t == type}"></option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<button type="submit" class="btn btn-primary w-100">查询</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loading" class="text-center mb-4 loading">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">导演排行榜</h5>
|
|
<span class="badge bg-info text-dark" th:text="'响应时间: ' + ${duration} + 'ms'"></span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="ps-3">排名</th>
|
|
<th>导演</th>
|
|
<th>作品总数</th>
|
|
<th>平均评分</th>
|
|
<th>代表作海报</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="stat, iter : ${rankings.content}">
|
|
<td class="ps-3" th:text="${rankings.number * rankings.size + iter.index + 1}"></td>
|
|
<td>
|
|
<a th:href="@{'/director/' + ${stat.director}}" class="text-decoration-none fw-bold" th:text="${stat.director}"></a>
|
|
</td>
|
|
<td th:text="${stat.totalWorks}"></td>
|
|
<td>
|
|
<span class="badge bg-warning text-dark" th:text="${#numbers.formatDecimal(stat.averageRating, 1, 1)}"></span>
|
|
</td>
|
|
<td>
|
|
<img th:src="${stat.representativePoster}" class="poster-thumb img-thumbnail" th:alt="${stat.director}">
|
|
</td>
|
|
<td>
|
|
<a th:href="@{'/director/' + ${stat.director}}" class="btn btn-sm btn-outline-primary">查看作品</a>
|
|
</td>
|
|
</tr>
|
|
<tr th:if="${rankings.isEmpty()}">
|
|
<td colspan="6" class="text-center py-5">暂无匹配的导演数据</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-white">
|
|
<nav aria-label="Page navigation" th:if="${rankings.totalPages > 1}">
|
|
<ul class="pagination justify-content-center mb-0">
|
|
<li class="page-item" th:classappend="${rankings.first} ? 'disabled'">
|
|
<a class="page-link" th:href="@{/directors(name=${name}, type=${type}, page=${rankings.number - 1})}">上一页</a>
|
|
</li>
|
|
<li class="page-item" th:each="i : ${#numbers.sequence(0, rankings.totalPages - 1)}"
|
|
th:classappend="${i == rankings.number} ? 'active'">
|
|
<a class="page-link" th:href="@{/directors(name=${name}, type=${type}, page=${i})}" th:text="${i + 1}"></a>
|
|
</li>
|
|
<li class="page-item" th:classappend="${rankings.last} ? 'disabled'">
|
|
<a class="page-link" th:href="@{/directors(name=${name}, type=${type}, page=${rankings.number + 1})}">下一页</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('searchForm').onsubmit = function() {
|
|
document.getElementById('loading').style.display = 'block';
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|