添加设备，添加摄像头，删除设备

src/main/webapp/WEB-INF/views/user/detail.jsp

@@ -27,7 +27,8 @@
         </tr>
     </tbody>
 </table>
-<h4 style="margin-top: 100px;float: left">拥有设备</h4><div style="margin-top: 100px;float: left;margin-left: 10px;"><button class="btn btn-xs btn-primary" id="bindDeviceBtn"><i class="fa-edit"></i>新增</button></div>
+<h4 style="margin-top: 100px;float: left">拥有设备</h4><div style="margin-top: 100px;float: left;margin-left: 10px;">
+    <button class="btn btn-xs btn-primary" data-toggle="modal" data-target="#bindDeviceModal"><i class="fa-edit"></i>新增</button></div>
 <table class="dataTable cell-border no-footer" role="grid" style="width: 1611px;">
     <thead>
         <tr role="row">
@@ -62,14 +63,15 @@
                 <td>${item.createTime}</td>
                 <td>${item.isBlacklist}</td>
                 <td>
-                    <a href="javascript:void(0);" onclick="" class="btn btn-xs btn-danger"><i class="fa-remove">解除绑定</i></a>
+                    <a href="javascript:void(0);" onclick="deleteDevice('${user.userId}', '${item.deviceId}')" class="btn btn-xs btn-danger"><i class="fa-remove">解除绑定</i></a>
                     <a href="javascript:void(0);" title="[禁用]" class="btn btn-xs"><i class="fa-remove">取消授权</i></a>
                 </td>
             </tr>
         </c:forEach>
     </tbody>
 </table>
-<h4 style="margin-top: 100px;float: left">拥有摄像头</h4><div style="margin-top: 100px;float: left;margin-left: 10px;"><button class="btn btn-xs btn-primary" id="bindCameraModal"><i class="fa-edit"></i>新增</button></div>
+<h4 style="margin-top: 100px;float: left">拥有摄像头</h4><div style="margin-top: 100px;float: left;margin-left: 10px;">
+    <button class="btn btn-xs btn-primary" data-toggle="modal" data-target="#bindCameraModal"><i class="fa-edit"></i>新增</button></div>
 <table class="dataTable cell-border no-footer" role="grid" style="width: 1611px;">
     <thead>
         <tr role="row">
@@ -94,45 +96,116 @@
         </c:forEach>
     </tbody>
 </table>
-<form action="/bindCamera" class="form-horizontal" method="post" id="form-bindCamera">
-    <div class="modal fade" id="bindCameraModal">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="closeBtn close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                    <h4 class="modal-title">绑定摄像头</h4>
-                </div>
-                <div class="modal-body row">
-                    <div class="col-xs-12">
-                        <div class="form-group">
-                            <label class="col-xs-2 control-label no-padding-right">用户ID<span style="color:red;">*</span></label>
-                            <div class="col-xs-8">
-                                <input type="number" name="userId" value="${user.userId}" readonly="readonly" class="input-medium" required="required">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-xs-2 control-label no-padding-right">摄像头ID<span style="color:red;">*</span></label>
-                            <div class="col-xs-8">
-                                <input type="text" id="cameraId" name="cameraId" class="input-medium" required="required" maxlength="20">
-                            </div>
-                        </div>
+<div class="modal fade" id="bindCameraModal" tabindex="1" role="dialog" aria-labelledby="exampleModalLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="exampleModalLabel">绑定摄像头</h4>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <div class="form-group">
+                        <label for="recipient-name" class="control-label">用户ID：</label>
+                        <input type="text" class="form-control" id="userId" name="userId" value="${user.userId}">
                     </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="closeBtn btn btn-default">关闭</button>
-                    <button id="bindCameraModalBtn" type="submit" class="btn btn-primary">确定</button>
-                </div>
+                    <div class="form-group">
+                        <label for="message-text" class="control-label">摄像头ID：</label>
+                        <input type="text" class="form-control" id="cameraId" name="cameraId" >
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <input type="hidden" value="device" id="bindtype">
+                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                <button type="button" class="btn btn-primary" id="bindCamera" data-toggle="modal" data-target="#surediv">绑定</button>
             </div>
         </div>
     </div>
-</form>
+</div>
+<div class="modal fade" id="bindDeviceModal" tabindex="1" role="dialog" aria-labelledby="exampleModalLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="exampleModalLabel">绑定设备</h4>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <div class="form-group">
+                        <label for="recipient-name" class="control-label">用户ID：</label>
+                        <input type="text" class="form-control" id="userId" name="userId" value="${user.userId}">
+                    </div>
+                    <div class="form-group">
+                        <label for="message-text" class="control-label">设备Mac：</label>
+                        <input type="text" class="form-control" id="deviceMac" name="deviceMac" >
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                <button type="button" class="btn btn-primary" id="bindDevice" data-toggle="modal" data-target="#surediv">绑定</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal fade" id="surediv" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">Modal title</h4>
+            </div>
+            <div class="modal-body">
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary" id="btnBind">确认</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="surediv" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">Modal title</h4>
+            </div>
+            <div class="modal-body">
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary" id="btnBind">确认</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 
 <script>
-    $(function () {
-        $('#myModal').modal('hide')
-    });
+    //解除绑定设备
+    function deleteDevice(userId, deviceId) {
+        if (window.confirm('你确定要取消交易吗？')) {
+            $(document).ready(function () {
+                $.ajax({
+                    url: 'deleteDeviceUser',
+                    type: 'post',
+                    data: {"userId": userId, "deviceId": deviceId},
+                    success: function (e) {
+                        alert(e.data);
+                        window.location.reload();
+                    },
+                    error: function (e) {}
+                })
+            });
+        } else {
+            return false;
+        }
+
+    }
+
 
     $(document).ready(function () {
         var a = $('#crumb');
@@ -140,8 +213,93 @@
         a.append('<li>用户详情<li>');
 
         //绑定摄像头
-        $("#bindCameraBtn").click(function () {
-            console.log(1);
+        $('#bindCameraModal').on('show.bs.modal', function (event) {
         });
+        //绑定设备
+        $('#bindDeviceModal').on('show.bs.modal', function (event) {
+        });
+        //绑定摄像头绑定按钮，准备弹出确认框
+        $('#bindCamera').click(function () {
+            $('#bindCameraModal').modal("hide");
+            $('#bindtype').val('camera');
+        });
+        //绑定设备绑定按钮，准备弹出确认框
+        $('#bindDevice').click(function () {
+            $('#bindDeviceModal').modal("hide");
+            $('#bindtype').val('device');
+        });
+        //确认框
+        $('#surediv').on('show.bs.modal', function (event) {
+            var modal = $(this);
+            var a = $('#cameraId').val();
+            var b = $('#userId').val();
+            var c = $('#bindtype').val();
+            var d = $('#deviceMac').val();
+            if (c === 'device') {
+                if (d == null || d === '' || b == null || b === '') {
+                    modal.find('.modal-title').text('警告');
+                    modal.find('.modal-body').text('');
+                    modal.find('.modal-body').append('<p>请填写正确的用户ID或设备Mac</p>');
+                } else {
+                    modal.find('.modal-body').text('');
+                    modal.find('.modal-title').text('提示');
+                    modal.find('.modal-body').append('<p>请确认要进行绑定?</p>');
+                    modal.find('.modal-body').append('<p>用户ID：' + b + '</p>');
+                    modal.find('.modal-body').append('<p>设备Mac：' + d + '</p>');
+                    modal.find('.modal-body').append('<input type="hidden" id="sendbind" value="devicetrue" />');
+                }
+            } else if (c === 'camera') {
+                if (a == null || a === '' || b == null || b === '') {
+                    modal.find('.modal-title').text('警告');
+                    modal.find('.modal-body').text('');
+                    modal.find('.modal-body').append('<p>请填写正确的用户ID或摄像头ID</p>');
+                } else {
+                    modal.find('.modal-body').text('');
+                    modal.find('.modal-title').text('提示');
+                    modal.find('.modal-body').append('<p>请确认要进行绑定?</p>');
+                    modal.find('.modal-body').append('<p>用户ID：' + b + '</p>');
+                    modal.find('.modal-body').append('<p>摄像头ID：' + a + '</p>');
+                    modal.find('.modal-body').append('<input type="hidden" id="sendbind" value="cameratrue" />');
+                }
+            }
+
+        });
+        //绑定
+        $('#btnBind').click(function () {
+            $('#surediv').modal('hide');
+            var a = $('#sendbind').val();
+            var b = $('#userId').val();
+            var c = $('#cameraId').val();
+            var d = $('#deviceMac').val();
+            if (a === 'devicetrue') {
+                $.ajax({
+                    url: 'bindDevice',
+                    type: 'post',
+                    data: {"userId": b, "deviceMac": d},
+                    success: function (e) {
+                        alert(e.data);
+                        window.location.reload();
+                    },
+                    error: function (e) {
+                        alert(e.data);
+                    }
+                });
+            } else if (a === 'cameratrue') {
+                $.ajax({
+                    url: '/bindCamera',
+                    type: 'post',
+                    data: {"userId": b, "cameraId": c},
+                    success: function (e) {
+                        alert(e.data);
+                        window.location.reload();
+                    },
+                    error: function (e) {
+                        alert(e.data);
+                    }
+                });
+            }
+        });
+
+
     });
 </script>