added page of texture preview at user manage page

admin/manage.php

@@ -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 -->
+if (isset($_GET['show'])) {
-    <section class="content">
+    View::show('admin/show', ['uid' => (int)$_GET['show']]);
-        <div class="box">
+} else {
-            <div class="box-body table-responsive no-padding">
+    View::show('admin/list');
-                <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>
-                                <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() {

assets/css/admin.style.css

@@ -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);

assets/css/user.style.css

@@ -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;

assets/js/preview.utils.js

@@ -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();');
+}

assets/js/user.utils.js

@@ -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);

templates/admin/list.tpl.php

@@ -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 -->

templates/admin/show.tpl.php

@@ -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 -->

templates/preview.tpl.php

@@ -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')) {

user/index.php

@@ -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); ?>

user/upload.php

@@ -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;