added page of texture preview at user manage page

This commit is contained in:
printempw 2016-03-27 10:13:11 +08:00
parent b941d0f381
commit 7f091823ad
10 changed files with 274 additions and 192 deletions

View File

@ -3,115 +3,21 @@
* @Author: printempw
* @Date: 2016-03-06 14:19:20
* @Last Modified by: printempw
* @Last Modified time: 2016-03-27 09:12:25
* @Last Modified time: 2016-03-27 09:45:54
*/
require "../libraries/session.inc.php";
if (!$user->is_admin) header('Location: ../index.php?msg=看起来你并不是管理员');
View::show('admin/header', array('page_title' => "用户管理"));
$db = new Database\Database();
?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
用户管理
<small>User Manage</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="box">
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>预览材质</th>
<th>更改材质</th>
<th>操作</th>
</tr>
</thead>
if (isset($_GET['show'])) {
View::show('admin/show', ['uid' => (int)$_GET['show']]);
} else {
View::show('admin/list');
}
<tbody>
<?php
$page_now = isset($_GET['page']) ? $_GET['page'] : 1;
$db = new Database\Database();
$result = $db->query("SELECT * FROM users ORDER BY `uid` LIMIT ".(string)(($page_now-1)*30).", 30");
$page_total = round($db->getRecordNum()/30);
while ($row = $result->fetch_array()) { ?>
<tr>
<td><?php echo $row['uid']; ?></td>
<td><?php echo $row['username']; ?></td>
<td>
<img width="64" <?php if ($row['hash_steve']): ?>src="../skin/<?php echo $row['username']; ?>-steve.png"<?php endif; ?> />
<img width="64" <?php if ($row['hash_alex']): ?>src="../skin/<?php echo $row['username']; ?>-alex.png"<?php endif; ?> />
<img width="64" <?php if ($row['hash_cape']): ?>src="../cape/<?php echo $row['username']; ?>.png"<?php endif; ?> />
</td>
<td>
<a href="javascript:uploadSkin('<?php echo $row['username']; ?>');" class="btn btn-primary btn-sm">皮肤</a>
<a href="javascript:uploadTexture('<?php echo $row['username']; ?>', 'cape');" class="btn btn-primary btn-sm">披风</a>
<a href="javascript:changeModel('<?php echo $row['username']; ?>');" class="btn btn-default btn-sm">优先模型</a>
<span>(<?php echo $row['preference']; ?>)</span>
</td>
<td>
<a href="javascript:deleteTexture('<?php echo $row['username'] ?>');" class="btn btn-warning btn-sm">删除材质</a>
<a href="javascript:changePasswd('<?php echo $row['username'] ?>');" class="btn btn-default btn-sm">更改密码</a>
<a class="btn btn-danger btn-sm"
<?php if ($row['uid'] == 1)
echo 'disabled="disabled" data-toggle="tooltip" data-placement="bottom" title="少年,不要作死哦"';
else
echo 'href="javascript:deleteAccount(\''.$row['username'].'\');"';
?>>
删除用户
</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<ul class="pager">
<?php if ($page_now != 1 && $page_now >= 5): ?>
<li>
<a href="manage.php?page=1">1...</a>
</li>
<?php endif;
if ($page_now > $page_total - 2) {
$from = $page_total - 4;
$to = $page_total;
} elseif ($page_now > 2) {
$from = $page_now - 2;
$to = $page_now + 2;
} else {
$from = 1;
$to = 6;
}
for ($i = $from; $i <= $to; $i++) {
if ($i == $page_now) {
echo '<li class="active"><a href="#">'.(string)$i.'</a></li>';
} else {
echo '<li><a href="manage.php?page='.$i.'">'.(string)$i.'</a></li>';
}
} ?>
<select id="page-select">
<?php for ($i = 1; $i <= $page_total; $i++) {
echo "<option value='$i'>$i</option>";
} ?>
</select>
</ul>
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<?php
$data['script'] = <<< 'EOT'
<script type="text/javascript" src="../assets/js/preview.utils.js"></script>
<script type="text/javascript" src="../assets/js/admin.utils.js"></script>
<script>
$('#page-select').on('change', function() {

View File

@ -2,7 +2,7 @@
* @Author: printempw
* @Date: 2016-02-04 16:47:54
* @Last Modified by: printempw
* @Last Modified time: 2016-03-27 09:04:59
* @Last Modified time: 2016-03-27 09:40:35
*/
@import url(https://fonts.googleapis.com/css?family=Ubuntu);

View File

@ -2,7 +2,7 @@
* @Author: printempw
* @Date: 2016-01-21 19:12:06
* @Last Modified by: printempw
* @Last Modified time: 2016-03-26 18:41:52
* @Last Modified time: 2016-03-27 09:40:30
*/
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
@ -15,34 +15,6 @@ body, .ply-layer {
.box-body {
line-height: 1.8;
}
#canvas3d {
margin: 0 auto;
display: block;
}
.operations {
display: inline;
float: right;
}
.operations > i {
padding: .5em .5em;
display: inline !important;
}
.operations > i:hover {
color: #555;
cursor: pointer;
}
#preview-2d > p {
height: 64px;
line-height: 64px;
}
.skin2d {
float: right;
max-height: 64px;
width: 64px;
}
.box-title {
width: 100%;
}
.callout {
border-radius: 3px;
margin: 10px 0 0 0;

View File

@ -0,0 +1,64 @@
/*
* @Author: printempw
* @Date: 2016-03-27 09:43:57
* @Last Modified by: printempw
* @Last Modified time: 2016-03-27 09:46:57
*/
'use strict';
var preview_type = "3d";
function init3dCanvas() {
if ($(window).width() < 800) {
var canvas = MSP.get3dSkinCanvas($('#skinpreview').width(), $('#skinpreview').width());
$("#skinpreview").append($(canvas).prop("id", "canvas3d"));
} else {
var canvas = MSP.get3dSkinCanvas(400, 400);
$("#skinpreview").append($(canvas).prop("id", "canvas3d"));
}
}
$(document).ready(function(){
$('#preview-2d').hide();
$('#model-steve').prop('checked', true);
if (isMobile()) {
show2dPreview();
} else {
init3dCanvas();
}
});
// Auto resize canvas to fit responsive design
$(window).resize(init3dCanvas);
// Change 3D preview status
$("[title='Movements']").click(function(){
MSP.setStatus("movements", !MSP.getStatus("movements"));
});
$("[title='Running']").click(function(){
MSP.setStatus("running", !MSP.getStatus("running"));
});
$("[title='Rotation']").click(function(){
MSP.setStatus("rotation", !MSP.getStatus("rotation"));
});
function show2dPreview() {
preview_type = "2d";
$('#canvas3d').remove();
$('#preview-msg').remove();
$('.operations').hide();
$('#preview-2d').show();
$('#preview').html('切换 3D 预览').attr('href', 'javascript:show3dPreview();');
}
function show3dPreview() {
if (isMobile() && preview_type == "2d") {
$("#skinpreview").append($('<div id="preview-msg" class="alert alert-info alert-dismissible fade in"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>手机上的 3D 预览可能会出现奇怪的问题(譬如空白一片),亟待解决。</div>'));
}
init3dCanvas();
$('#preview-2d').hide();
$('.operations').show();
$('#preview').html('切换 2D 预览').attr('href', 'javascript:show2dPreview();');
}

View File

@ -2,7 +2,7 @@
* @Author: printempw
* @Date: 2016-01-21 13:56:40
* @Last Modified by: printempw
* @Last Modified time: 2016-03-26 22:19:57
* @Last Modified time: 2016-03-27 09:47:10
*/
'use strict';
@ -47,52 +47,6 @@ function handleFiles(files, type) {
}
};
function init3dCanvas() {
if ($(window).width() < 800) {
var canvas = MSP.get3dSkinCanvas($('#skinpreview').width(), $('#skinpreview').width());
$("#skinpreview").append($(canvas).prop("id", "canvas3d"));
} else {
var canvas = MSP.get3dSkinCanvas(400, 400);
$("#skinpreview").append($(canvas).prop("id", "canvas3d"));
}
}
$(document).ready(function(){
init3dCanvas();
});
// Auto resize canvas to fit responsive design
$(window).resize(init3dCanvas);
// Change 3D preview status
$("[title='Movements']").click(function(){
MSP.setStatus("movements", !MSP.getStatus("movements"));
});
$("[title='Running']").click(function(){
MSP.setStatus("running", !MSP.getStatus("running"));
});
$("[title='Rotation']").click(function(){
MSP.setStatus("rotation", !MSP.getStatus("rotation"));
});
function show2dPreview() {
preview_type = "2d";
$('#canvas3d').remove();
$('#preview-msg').remove();
$('.operations').hide();
$('#preview-2d').show();
$('#preview').html('切换 3D 预览').attr('href', 'javascript:show3dPreview();');
}
function show3dPreview() {
if (isMobile() && preview_type == "2d") {
$("#skinpreview").append($('<div id="preview-msg" class="alert alert-info alert-dismissible fade in"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>手机上的 3D 预览可能会出现奇怪的问题(譬如空白一片),亟待解决。</div>'));
}
init3dCanvas();
$('#preview-2d').hide();
$('.operations').show();
$('#preview').html('切换 2D 预览').attr('href', 'javascript:show2dPreview();');
}
function changeModel(uname) {
showAlert('确定要更改优先皮肤模型吗?', function(){
$.ajax({
@ -113,15 +67,6 @@ function changeModel(uname) {
});
}
$(document).ready(function(){
$('#preview-2d').hide();
$('#model-steve').prop('checked', true);
if (isMobile()) {
show2dPreview();
}
});
function change2dTexture(type, file) {
$('#'+type).attr('src', file);
}
@ -140,5 +85,3 @@ function onWindowResize() {
show2dPreview();
}
}
window.addEventListener('resize', onWindowResize, false);

View File

@ -0,0 +1,99 @@
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
用户管理
<small>User Manage</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="box">
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>预览材质</th>
<th>更改材质</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<?php
$page_now = isset($_GET['page']) ? $_GET['page'] : 1;
$db = new Database\Database();
$result = $db->query("SELECT * FROM users ORDER BY `uid` LIMIT ".(string)(($page_now-1)*30).", 30");
$page_total = round($db->getRecordNum()/30);
while ($row = $result->fetch_array()) { ?>
<tr>
<td><?php echo $row['uid']; ?></td>
<td><?php echo $row['username']; ?></td>
<td>
<img width="64" <?php if ($row['hash_steve']): ?>src="../skin/<?php echo $row['username']; ?>-steve.png"<?php endif; ?> />
<img width="64" <?php if ($row['hash_alex']): ?>src="../skin/<?php echo $row['username']; ?>-alex.png"<?php endif; ?> />
<img width="64" <?php if ($row['hash_cape']): ?>src="../cape/<?php echo $row['username']; ?>.png"<?php endif; ?> />
</td>
<td>
<a href="javascript:uploadSkin('<?php echo $row['username']; ?>');" class="btn btn-primary btn-sm">皮肤</a>
<a href="javascript:uploadTexture('<?php echo $row['username']; ?>', 'cape');" class="btn btn-primary btn-sm">披风</a>
</td>
<td>
<a href="manage.php?show=<?php echo $row['uid']; ?>" class="btn btn-default btn-sm">材质预览</a>
<a href="javascript:deleteTexture('<?php echo $row['username'] ?>');" class="btn btn-warning btn-sm">删除材质</a>
<a href="javascript:changePasswd('<?php echo $row['username'] ?>');" class="btn btn-default btn-sm">更改密码</a>
<a class="btn btn-danger btn-sm"
<?php if ($row['uid'] == 1)
echo 'disabled="disabled" data-toggle="tooltip" data-placement="bottom" title="少年,不要作死哦"';
else
echo 'href="javascript:deleteAccount(\''.$row['username'].'\');"';
?>>
删除用户
</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<ul class="pager">
<?php if ($page_now != 1 && $page_now >= 5): ?>
<li>
<a href="manage.php?page=1">1...</a>
</li>
<?php endif;
if ($page_now > $page_total - 2) {
$from = $page_total - 4;
$to = $page_total;
} elseif ($page_now > 2) {
$from = $page_now - 2;
$to = $page_now + 2;
} else {
$from = 1;
$to = 6;
}
for ($i = $from; $i <= $to; $i++) {
if ($i == $page_now) {
echo '<li class="active"><a href="#">'.(string)$i.'</a></li>';
} else {
echo '<li><a href="manage.php?page='.$i.'">'.(string)$i.'</a></li>';
}
} ?>
<select id="page-select">
<?php for ($i = 1; $i <= $page_total; $i++) {
echo "<option value='$i'>$i</option>";
} ?>
</select>
</ul>
</section><!-- /.content -->
</div><!-- /.content-wrapper -->

View File

@ -0,0 +1,86 @@
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
用户预览
<small>User Preview</small>
</h1>
</section>
<?php $db = new Database\Database();
$user = new User($db->select('uid', $data['uid'])['username']);
?>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">修改用户配置</h3>
</div><!-- /.box-header -->
<form method="post" action="">
<input type="hidden" name="option" value="general">
<div class="box-body">
<?php
if (isset($_POST['submit'])) {
if (User::checkValidUname($_POST['username']) &&
($_POST['model_preference'] == 'default' || $_POST['model_preference'] == 'slim'))
{
$db->update($user->uname, 'username', $_POST['username']);
$db->update($user->uname, 'preference', $_POST['model_preference']);
echo '<div class="callout callout-success">设置已保存。</div>';
} else {
echo '<div class="callout callout-danger">无效的用户名或优先模型。</div>';
}
} ?>
<table class="table">
<tbody>
<tr>
<td class="key">用户名</td>
<td class="value">
<input type="text" class="form-control" name="username" value="<?php echo $user->uname; ?>">
</td>
</tr>
<tr>
<td class="key">优先模型</td>
<td class="value">
<select class="form-control" name="model_preference">
<option <?php echo ($user->getPreference() == 'default') ? 'selected="selected"' : ''; ?> value="default">Default (steve)</option>
<option <?php echo ($user->getPreference() == 'slim') ? 'selected="selected"' : ''; ?> value="slim">Slim (alex)</option>
</select>
</td>
</tr>
</tbody>
</table>
</div><!-- /.box-body -->
<div class="box-footer">
<button type="submit" name="submit" class="btn btn-primary">提交</button>
<a href="javascript:history.back();" style="float: right;" class="btn btn-default">返回</a>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<div class="box">
<div class="box-body table-responsive no-padding">
<div class="box-header with-border">
<h3 class="box-title">皮肤预览
<small><a id="preview" href="javascript:show2dPreview();">切换 2D 预览</a></small>
<div class="operations">
<i data-toggle="tooltip" data-placement="bottom" title="Movements" class="fa fa-pause"></i>
<i data-toggle="tooltip" data-placement="bottom" title="Running" class="fa fa-forward"></i>
<i data-toggle="tooltip" data-placement="bottom" title="Rotation" class="fa fa-repeat"></i>
</div>
</h3>
</div><!-- /.box-header -->
<div class="box-body">
<?php View::show('preview', array('user'=>$user)); ?>
</div><!-- /.box-body -->
</div>
</div>
</div>
</div>
</section><!-- /.content -->
</div><!-- /.content-wrapper -->

View File

@ -20,11 +20,21 @@
/></p>
</div>
</div>
<style>
.operations { display: inline; float: right; }
.operations > i { padding: .5em .5em; display: inline !important; }
.operations > i:hover { color: #555; cursor: pointer; }
.skin2d { float: right; max-height: 64px; width: 64px; }
.box-title { width: 100%; }
#canvas3d { margin: 0 auto; display: block; }
#preview-2d > p { height: 64px; line-height: 64px; }
</style>
<script type="text/javascript">
var preview_type = "3d";
</script>
<script type="text/javascript" src="../assets/libs/skin-preview/three.min.js"></script>
<script type="text/javascript" src="../assets/libs/skin-preview/three.msp.js"></script>
<?php
// Get and set texture for preview
if ($data['user']->getTexture('skin')) {

View File

@ -3,7 +3,7 @@
* @Author: printempw
* @Date: 2016-01-21 13:56:40
* @Last Modified by: printempw
* @Last Modified time: 2016-03-26 22:28:24
* @Last Modified time: 2016-03-27 09:45:18
*/
require "../libraries/session.inc.php";
$data['style'] = <<< 'EOT'
@ -70,6 +70,7 @@ View::show('header', $data);
</div><!-- /.content-wrapper -->
<?php
$data['script'] = <<< 'EOT'
<script type="text/javascript" src="../assets/js/preview.utils.js"></script>
<script type="text/javascript" src="../assets/js/user.utils.js"></script>
EOT;
View::show('footer', $data); ?>

View File

@ -3,7 +3,7 @@
* @Author: printempw
* @Date: 2016-03-18 21:41:21
* @Last Modified by: printempw
* @Last Modified time: 2016-03-26 21:43:42
* @Last Modified time: 2016-03-27 09:45:12
*/
require "../libraries/session.inc.php";
$data['style'] = <<< 'EOT'
@ -82,6 +82,7 @@ $data['script'] = <<< 'EOT'
<script type="text/javascript" src="../assets/libs/iCheck/icheck.min.js"></script>
<script type="text/javascript" src="../assets/libs/bootstrap-fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="../assets/libs/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>
<script type="text/javascript" src="../assets/js/preview.utils.js"></script>
<script type="text/javascript" src="../assets/js/user.utils.js"></script>
<script type="text/javascript" src="../assets/js/upload.utils.js"></script>
EOT;