|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
<meta name="description" content="">
|
|
|
<meta name="author" content="">
|
|
|
<title>用户管理</title>
|
|
|
<!-- Bootstrap core CSS-->
|
|
|
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
|
<!-- Custom fonts for this template-->
|
|
|
<link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
|
|
<!-- Custom styles for this template-->
|
|
|
<link href="/static/css/sb-admin.css" rel="stylesheet">
|
|
|
<!-- Map styles -->
|
|
|
<style>
|
|
|
#map {
|
|
|
width: 100%;
|
|
|
height: 600px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
|
|
|
<!-- Navigation-->
|
|
|
{% include 'navbar.html' %}
|
|
|
<style type="text/css">
|
|
|
.nav-item {
|
|
|
padding: 0 10px; /* 调整这个值来增加或减少间距 */
|
|
|
}
|
|
|
</style>
|
|
|
<div class="content-wrapper">
|
|
|
<div class="container-fluid">
|
|
|
<!-- Breadcrumbs-->
|
|
|
<ol class="breadcrumb">
|
|
|
<li class="breadcrumb-item active">用户管理</li>
|
|
|
</ol>
|
|
|
|
|
|
<!-- User Profile Table -->
|
|
|
<!-- <div class="card">-->
|
|
|
<!-- <div class="card-header">-->
|
|
|
<!-- 用户信息-->
|
|
|
<!-- </div>-->
|
|
|
<div class="card-body">
|
|
|
<!-- 添加了 table-bordered 和 table-striped 类 -->
|
|
|
<table class="table table-hover table-bordered table-striped">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>信息项</th>
|
|
|
<th>详情</th>
|
|
|
<th>操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<th scope="row">用户名</th>
|
|
|
<td id="username-display">Username</td>
|
|
|
<td><button type="button" class="btn btn-link" id="modifyUsername">修改</button></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th scope="row">邮箱</th>
|
|
|
<td id="email-display">Email@example.com</td>
|
|
|
<td><button type="button" class="btn btn-link" id="modifyEmail">修改</button></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th scope="row">密码</th>
|
|
|
<td id="password-display">********</td>
|
|
|
<td><button type="button" class="btn btn-link" id="modifyPassword">修改</button></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<th scope="row">我关注的城市</th>
|
|
|
<td id="cities-display">无</td>
|
|
|
<td>
|
|
|
<button type="button" class="btn btn-link" id="addCity">添加</button>
|
|
|
<button type="button" class="btn btn-link" id="removeCity">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Update Username Modal -->
|
|
|
<div class="modal fade" id="updateUsernameModal" tabindex="-1" role="dialog" aria-labelledby="updateUsernameModalLabel"
|
|
|
aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="updateUsernameModalLabel">修改用户名</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<form id="updateUsernameForm">
|
|
|
<div class="form-group">
|
|
|
<label for="newUsername">新用户名</label>
|
|
|
<input type="text" class="form-control" id="newUsername" placeholder="Enter your new username">
|
|
|
</div>
|
|
|
<button type="submit" class="btn btn-primary">修改用户名</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Update Email Modal -->
|
|
|
<div class="modal fade" id="updateEmailModal" tabindex="-1" role="dialog" aria-labelledby="updateEmailModalLabel"
|
|
|
aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="updateEmailModalLabel">修改邮箱</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<form id="updateEmailForm">
|
|
|
<div class="form-group">
|
|
|
<label for="newEmail">新邮箱</label>
|
|
|
<input type="email" class="form-control" id="newEmail" placeholder="Enter your new email">
|
|
|
</div>
|
|
|
<button type="submit" class="btn btn-primary">修改邮箱</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Update Password Modal -->
|
|
|
<div class="modal fade" id="updatePasswordModal" tabindex="-1" role="dialog" aria-labelledby="updatePasswordModalLabel"
|
|
|
aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="updatePasswordModalLabel">修改密码</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<form id="updatePasswordForm">
|
|
|
<div class="form-group">
|
|
|
<label for="newPassword">新密码</label>
|
|
|
<input type="password" class="form-control" id="newPassword" placeholder="Enter your new password">
|
|
|
</div>
|
|
|
<button type="submit" class="btn btn-primary">修改密码</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Add City Modal -->
|
|
|
<div class="modal fade" id="addCityModal" tabindex="-1" role="dialog" aria-labelledby="addCityModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="addCityModalLabel">添加关注城市</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<form id="addCityForm">
|
|
|
<div class="form-group">
|
|
|
<label for="newCity">城市名称</label>
|
|
|
<input type="text" class="form-control" id="newCity" placeholder="Enter city name">
|
|
|
</div>
|
|
|
<button type="submit" class="btn btn-primary">添加</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 删除城市模态框 -->
|
|
|
<div class="modal fade" id="removeCityModal" tabindex="-1" role="dialog" aria-labelledby="removeCityModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="removeCityModalLabel">删除关注城市</h5>
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<!-- 城市列表将通过 JavaScript 动态生成 -->
|
|
|
<form id="removeCitiesForm">
|
|
|
<!-- 城市复选框列表将在这里动态生成 -->
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
|
|
|
<button type="button" class="btn btn-primary" id="confirmRemoveCities">确认删除</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<footer class="sticky-footer">
|
|
|
<div class="container">
|
|
|
<div class="text-center">
|
|
|
<small style="color: #abdde5;">第五组+全国天气可视化分析平台</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
|
|
|
<!-- Scroll to Top Button-->
|
|
|
<a class="scroll-to-top rounded" href="#page-top">
|
|
|
<i class="fa fa-angle-up"></i>
|
|
|
</a>
|
|
|
<!-- Logout Modal-->
|
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog" role="document">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h5 class="modal-title" id="exampleModalLabel"></h5>
|
|
|
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">确定退出系统吗？</div>
|
|
|
<div class="modal-footer">
|
|
|
<button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
|
|
|
<a class="btn btn-primary" href="/loginOut">确定</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Bootstrap core JavaScript-->
|
|
|
<script src="/static/vendor/jquery/jquery.min.js"></script>
|
|
|
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
|
<!-- Core plugin JavaScript-->
|
|
|
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
|
|
|
<!-- Custom scripts for all pages-->
|
|
|
<script src="/static/js/sb-admin.min.js"></script>
|
|
|
<!-- Additional scripts -->
|
|
|
<script src="../static/js/echarts.min.js"></script>
|
|
|
<script src="../static/js/map/china.js"></script>
|
|
|
<script>
|
|
|
$(document).ready(function () {
|
|
|
// 页面加载完成后获取当前用户信息并填充表单
|
|
|
$.ajax({
|
|
|
type: "GET",
|
|
|
url: "/get_user_info",
|
|
|
dataType: "json",
|
|
|
success: function (data) {
|
|
|
$("#username-display").text(data.username);
|
|
|
$("#email-display").text(data.email);
|
|
|
$("#password-display").text(data.password); // 显示密码（星号）
|
|
|
},
|
|
|
error: function (xhr, status, error) {
|
|
|
console.error("Failed to fetch user info:", error);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 监听修改用户名按钮点击事件
|
|
|
$("#modifyUsername").click(function () {
|
|
|
$("#updateUsernameModal").modal("show");
|
|
|
});
|
|
|
|
|
|
// 监听修改用户名表单提交事件
|
|
|
$("#updateUsernameForm").submit(function (event) {
|
|
|
event.preventDefault();
|
|
|
var newUsername = $("#newUsername").val();
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "/update_username",
|
|
|
data: JSON.stringify({ newUsername: newUsername }),
|
|
|
contentType: "application/json",
|
|
|
success: function (response) {
|
|
|
console.log("Username updated successfully:", response);
|
|
|
$("#updateUsernameModal").modal("hide");
|
|
|
$("#username-display").text(newUsername);
|
|
|
},
|
|
|
error: function (xhr, status, error) {
|
|
|
console.error("Failed to update username:", error);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 监听修改邮箱按钮点击事件
|
|
|
$("#modifyEmail").click(function () {
|
|
|
$("#updateEmailModal").modal("show");
|
|
|
});
|
|
|
|
|
|
// 监听修改邮箱表单提交事件
|
|
|
$("#updateEmailForm").submit(function (event) {
|
|
|
event.preventDefault();
|
|
|
var newEmail = $("#newEmail").val();
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "/update_email",
|
|
|
data: JSON.stringify({ newEmail: newEmail }),
|
|
|
contentType: "application/json",
|
|
|
success: function (response) {
|
|
|
console.log("Email updated successfully:", response);
|
|
|
$("#updateEmailModal").modal("hide");
|
|
|
$("#email-display").text(newEmail);
|
|
|
},
|
|
|
error: function (xhr, status, error) {
|
|
|
console.error("Failed to update email:", error);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 监听修改密码按钮点击事件
|
|
|
$("#modifyPassword").click(function () {
|
|
|
$("#updatePasswordModal").modal("show");
|
|
|
});
|
|
|
|
|
|
// 监听修改密码表单提交事件
|
|
|
$("#updatePasswordForm").submit(function (event) {
|
|
|
event.preventDefault();
|
|
|
var newPassword = $("#newPassword").val();
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "/update_password",
|
|
|
data: JSON.stringify({ newPassword: newPassword }),
|
|
|
contentType: "application/json",
|
|
|
success: function (response) {
|
|
|
console.log("Password updated successfully:", response);
|
|
|
$("#updatePasswordModal").modal("hide");
|
|
|
},
|
|
|
error: function (xhr, status, error) {
|
|
|
console.error("Failed to update password:", error);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
// 初始化我关注的城市列表
|
|
|
updateCitiesDisplay();
|
|
|
|
|
|
// 绑定添加城市的按钮事件
|
|
|
$("#addCity").click(function () {
|
|
|
$("#addCityModal").modal("show");
|
|
|
});
|
|
|
|
|
|
// 绑定添加城市表单的提交事件
|
|
|
$("#addCityForm").submit(function (event) {
|
|
|
event.preventDefault();
|
|
|
var newCity = $("#newCity").val();
|
|
|
if (newCity) {
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "/add_city",
|
|
|
data: JSON.stringify({ newCity: newCity }),
|
|
|
contentType: "application/json",
|
|
|
success: function (response) {
|
|
|
if (response.message === "城市添加成功") {
|
|
|
updateCitiesDisplay(response.cities);
|
|
|
$("#addCityModal").modal("hide");
|
|
|
}
|
|
|
},
|
|
|
error: function (xhr, status, error) {
|
|
|
console.error("Failed to add city:", error);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 更新页面上显示的城市列表
|
|
|
function updateCitiesDisplay(cities) {
|
|
|
var citiesDisplay = $("#cities-display");
|
|
|
if (cities && cities.length > 0) {
|
|
|
citiesDisplay.empty();
|
|
|
cities.forEach(function (city) {
|
|
|
citiesDisplay.append(city + "<br>");
|
|
|
});
|
|
|
} else {
|
|
|
citiesDisplay.text("无");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 首次加载页面时获取用户信息并更新显示
|
|
|
function fetchAndUpdateUserInfo() {
|
|
|
$.getJSON("/get_user_info", function (data) {
|
|
|
$("#username-display").text(data.username);
|
|
|
$("#email-display").text(data.email);
|
|
|
$("#password-display").text("********"); // 密码显示星号
|
|
|
updateCitiesDisplay(data.cities); // 显示关注的城市
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 调用函数
|
|
|
fetchAndUpdateUserInfo();
|
|
|
|
|
|
// 绑定删除城市按钮事件
|
|
|
$("#removeCity").click(function () {
|
|
|
showRemoveCityModal();
|
|
|
});
|
|
|
|
|
|
// 显示删除城市模态框并填充城市列表
|
|
|
function showRemoveCityModal() {
|
|
|
// AJAX 请求获取用户关注的城市列表
|
|
|
$.ajax({
|
|
|
type: "GET",
|
|
|
url: "/get_user_info", // 确保这个接口能返回用户关注的城市列表
|
|
|
dataType: "json",
|
|
|
success: function (data) {
|
|
|
var cities = data.cities;
|
|
|
$("#removeCityModal .modal-body").empty(); // 清空模态框内容
|
|
|
if (cities && cities.length > 0) {
|
|
|
cities.forEach(function (city) {
|
|
|
$("#removeCityModal .modal-body").append(
|
|
|
'<div class="form-check"><label class="form-check-label">' +
|
|
|
'<input class="form-check-input" type="checkbox" value="' + city + '">' + city +
|
|
|
'</label></div>'
|
|
|
);
|
|
|
});
|
|
|
$("#removeCityModal").modal("show");
|
|
|
} else {
|
|
|
alert("没有城市可供删除！");
|
|
|
}
|
|
|
},
|
|
|
error: function (xhr, status, error) {
|
|
|
console.error("Failed to fetch cities:", error);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 绑定删除城市模态框的确认按钮事件
|
|
|
$("#confirmRemoveCities").click(function () {
|
|
|
var citiesToRemove = [];
|
|
|
$("#removeCityModal .form-check-input:checked").each(function () {
|
|
|
citiesToRemove.push($(this).val());
|
|
|
});
|
|
|
if (citiesToRemove.length > 0) {
|
|
|
// 发送 AJAX 请求到后端删除城市
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "/remove_city",
|
|
|
data: JSON.stringify({ citiesToRemove: citiesToRemove }),
|
|
|
contentType: "application/json",
|
|
|
success: function (response) {
|
|
|
if (response.message === "删除成功") {
|
|
|
updateCitiesDisplay(response.cities);
|
|
|
$("#removeCityModal").modal("hide");
|
|
|
}
|
|
|
},
|
|
|
error: function (xhr, status, error) {
|
|
|
console.error("Failed to remove cities:", error);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
