Adding ui functionality for doormanager application

modules/samples/doormanager/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.doormanager.device-view/device-view.hbs

@@ -19,6 +19,51 @@
     </div>
 {{/zone}}
 
+<div class="wr-uioperations" style="display: block;">
+    <table>
+        <tr>
+            <td  width="47%"> <div id="light-bulb" class="off ui-draggable" >
+
+                <div id="bulb-intensity"></div>
+                <p class="intensity-val">Bulb intensity = <span>0</span></p>
+                <div id="light-bulb2" style="opacity: 0; "></div>
+            </div>
+            </td>
+            <td  width="20%"><div href="" class="cube-switch">
+        <span class="switch">
+            <span class="switch-state off">Off</span>
+            <span class="switch-state on">On</span>
+        </span>
+
+            </div>
+                <br> <p class="operation-label" style="margin-left: 33px;">Fan On/Off</p>
+            </td>
+            <td  width="20%"><div href="" class="door-switch">
+        <span class="switch">
+            <span class="switch-state off">Unlock</span>
+            <span class="switch-state on">Lock</span>
+        </span>
+
+            </div>
+                <br> <p class="operation-label">Door Lock/Unlock</p>
+            </td>
+
+            <td  width="20%">
+                <a href="javascript:operationSelect('{{operation}}')">
+                    {{#if icon}}
+                        <img src="{{@app.context}}/{{icon}}" style="width: 48px;"/>
+                    {{else}}
+                        <i class="fw fw-user fw-5x"></i>
+                    {{/if}}
+                    <span>{{name}}</span>
+                </a>
+
+                <br> <p class="operation-label">Assign new user to lock</p>
+            </td>
+        </tr>
+    </table>
+</div>
+
 {{#zone "device-detail-properties"}}
     <div class="media">
         <div class="media-left col-xs-12 col-sm-2 col-md-2 col-lg-2">
@@ -66,3 +111,13 @@
         </div>
     </div>
 {{/zone}}
+
+{{#zone "bottomJs"}}
+    {{css "css/custom-style.css"}}
+    {{css "css/jquery-ui.css"}}
+    {{js "js/jquery-1.8.3.js"}}
+    {{js "js/jquery-ui.js"}}
+    {{js "js/ui-operation.js"}}
+
+
+{{/zone}}

modules/samples/doormanager/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.doormanager.device-view/public/css/custom-style.css

@@ -0,0 +1,265 @@
+.wr-uioperations{background:#46484B; padding-top: 15px;}
+
+.wr-uioperations .block{
+    background: #fafafa none repeat scroll 0 0;
+    color: #526a84;
+    display: inline-block;
+    float: left;
+    font-size: 12px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    min-width: 70px;
+    padding: 2px 10px 10px;
+    text-align: center;
+    text-decoration: none;
+}
+
+/* FAN SWITCH */
+.cube-switch {
+    border-radius:10px;
+    border:1px solid rgba(0,0,0,0.4);
+    box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 100px 50px rgba(255,255,255,0.1);
+    /* Prevents clics on the back */
+    cursor:default;
+    display: block;
+    height: 100px;
+    position: relative;
+    margin: 5% 0px 0px 10%;
+    overflow:hidden;
+    /* Prevents clics on the back */
+    pointer-events:none;
+    width: 100px;
+    white-space: nowrap;
+    background:#333;
+}
+
+/* The switch */
+.cube-switch .switch {
+    border:1px solid rgba(0,0,0,0.6);
+    border-radius:0.7em;
+    box-shadow:
+            inset 0 1px 0 rgba(255,255,255,0.3),
+            inset 0 -7px 0 rgba(0,0,0,0.2),
+            inset 0 50px 10px rgba(0,0,0,0.2),
+            0 1px 0 rgba(255,255,255,0.2);
+    display:block;
+    width: 60px;
+    height: 60px;
+    margin-left:-30px;
+    margin-top:-30px;
+    position:absolute;
+    top: 50%;
+    left: 50%;
+    width: 60px;
+
+    background:#666;
+    transition: all 0.2s ease-out;
+
+    /* Allows click */
+    cursor:pointer;
+    pointer-events:auto;
+}
+
+/* SWITCH Active State */
+.cube-switch.active {
+    /*background:#222;
+    box-shadow:
+    0 0 5px rgba(0,0,0,0.5),
+    inset 0 50px 50px rgba(55,55,55,0.1);*/
+}
+
+.cube-switch.active .switch {
+    background:#333;
+    box-shadow:
+            inset 0 6px 0 rgba(255,255,255,0.1),
+            inset 0 7px 0 rgba(0,0,0,0.2),
+            inset 0 -50px 10px rgba(0,0,0,0.1),
+            0 1px 0 rgba(205,205,205,0.1);
+}
+
+.cube-switch.active:after,
+.cube-switch.active:before {
+    background:#333;
+    box-shadow:
+            0 1px 0 rgba(255,255,255,0.1),
+            inset 1px 2px 1px rgba(0,0,0,0.5),
+            inset 3px 6px 2px rgba(200,200,200,0.1),
+            inset -1px -2px 1px rgba(0,0,0,0.3);
+}
+
+.cube-switch.active .switch:after,
+.cube-switch.active .switch:before {
+    background:#222;
+    border:none;
+    margin-top:0;
+    height:1px;
+}
+
+.cube-switch .switch-state {
+    display: block;
+    position: absolute;
+    left: 40%;
+    color: #FFF;
+
+    font-size: .7em;
+    text-align: center;
+}
+
+/* SWITCH On State */
+.cube-switch .switch-state.on {
+    bottom: 15%;
+}
+
+/* SWITCH Off State */
+.cube-switch .switch-state.off {
+    top: 15%;
+}
+
+
+
+/* DOOR SWITCH */
+.door-switch {
+    border-radius:10px;
+    border:1px solid rgba(0,0,0,0.4);
+    box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 100px 50px rgba(255,255,255,0.1);
+    /* Prevents clics on the back */
+    cursor:default;
+    display: block;
+    height: 100px;
+    position: relative;
+    margin: 5% 0px 0px 10%;
+    overflow:hidden;
+    /* Prevents clics on the back */
+    pointer-events:none;
+    width: 100px;
+    white-space: nowrap;
+    background:#333;
+}
+
+/* The switch */
+.door-switch .switch {
+    border:1px solid rgba(0,0,0,0.6);
+    border-radius:0.7em;
+    box-shadow:
+            inset 0 1px 0 rgba(255,255,255,0.3),
+            inset 0 -7px 0 rgba(0,0,0,0.2),
+            inset 0 50px 10px rgba(0,0,0,0.2),
+            0 1px 0 rgba(255,255,255,0.2);
+    display:block;
+    width: 60px;
+    height: 60px;
+    margin-left:-30px;
+    margin-top:-30px;
+    position:absolute;
+    top: 50%;
+    left: 50%;
+    width: 60px;
+
+    background:#666;
+    transition: all 0.2s ease-out;
+
+    /* Allows click */
+    cursor:pointer;
+    pointer-events:auto;
+}
+
+/* SWITCH Active State */
+.door-switch.active {
+    /*background:#222;
+    box-shadow:
+    0 0 5px rgba(0,0,0,0.5),
+    inset 0 50px 50px rgba(55,55,55,0.1);*/
+}
+
+.door-switch.active .switch {
+    background:#333;
+    box-shadow:
+            inset 0 6px 0 rgba(255,255,255,0.1),
+            inset 0 7px 0 rgba(0,0,0,0.2),
+            inset 0 -50px 10px rgba(0,0,0,0.1),
+            0 1px 0 rgba(205,205,205,0.1);
+}
+
+.door-switch.active:after,
+.door-switch.active:before {
+    background:#333;
+    box-shadow:
+            0 1px 0 rgba(255,255,255,0.1),
+            inset 1px 2px 1px rgba(0,0,0,0.5),
+            inset 3px 6px 2px rgba(200,200,200,0.1),
+            inset -1px -2px 1px rgba(0,0,0,0.3);
+}
+
+.door-switch.active .switch:after,
+.door-switch.active .switch:before {
+    background:#222;
+    border:none;
+    margin-top:0;
+    height:1px;
+}
+
+.door-switch .switch-state {
+    display: block;
+    position: absolute;
+    left: 27%;
+    color: #FFF;
+
+    font-size: .7em;
+    text-align: center;
+}
+
+/* SWITCH On State */
+.door-switch .switch-state.on {
+    bottom: 15%;
+}
+
+/* SWITCH Off State */
+.door-switch .switch-state.off {
+    top: 15%;
+}
+
+#light-bulb2 {
+    width: 150px;
+    height: 150px;
+    background: url("/devicemgt/public/cdmf.unit.device.type.doormanager.device-view/images/lightbulb.png")no-repeat 0 0;
+}
+
+#light-bulb {
+  /*  position: absolute; */
+    width: 150px;
+    height: 150px;
+    top: 5%;
+    left: 40%;
+    background: url("/devicemgt/public/cdmf.unit.device.type.doormanager.device-view/images/lightbulb.png") no-repeat -150px 0;
+    cursor: move;
+    z-index: 800;
+}
+
+#bulb-intensity {
+    float: left;
+    clear: left;
+    width: 300px;
+    margin-left:159px;
+    margin-top: 68px;
+
+}
+.intensity-val {
+    color: #ffffff;
+    float: left;
+    margin-left: 242px;
+    margin-top: 15px;
+    width: 179px;
+}
+
+#swatch {
+    width: 120px;
+    height: 100px;
+    margin-top: 18px;
+    margin-left: 350px;
+    background-image: none;
+}
+
+#bulb-intensity .ui-slider-range { background: #729fcf; }
+#bulb-intensity .ui-slider-handle { border-color: #729fcf; }
+
+.operation-label{ color: #ffffff;}

modules/samples/doormanager/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.doormanager.device-view/public/js/ui-operation.js

@@ -0,0 +1,38 @@
+function refreshSwatch() {
+    var intensity = $( "#bulb-intensity" ).slider( "value" );
+    $('#light-bulb2').css({'opacity': (intensity / 100)});
+    $('.intensity-val span').html(intensity);
+
+}
+
+$(function(){
+    $('.cube-switch .switch').click(function() {
+        if ($('.cube-switch').hasClass('active')) {
+            $('.cube-switch').removeClass('active');
+        } else {
+            $('.cube-switch').addClass('active');
+        }
+    });
+
+    $('.door-switch .switch').click(function() {
+        if ($('.door-switch').hasClass('active')) {
+            $('.door-switch').removeClass('active');
+        } else {
+            $('.door-switch').addClass('active');
+        }
+    });
+
+
+
+
+    $( "#bulb-intensity" ).slider({
+        orientation: "horizontal",
+        range: "min",
+        min:0,
+        max: 100,
+        value: 127,
+        slide: refreshSwatch,
+        change: refreshSwatch
+    });
+    $( "#bulb-intensity" ).slider( "value", 0 );
+});