From 7af59799cc07a3ff4ebe4c8bd04a7e6b7e721d87 Mon Sep 17 00:00:00 2001
From: ryanjsalva <ryanjsalva@gmail.com>
Date: Mon, 6 Jun 2016 10:39:16 -0700
Subject: [PATCH] UI updates; add device plugin

---
 config.xml                    | 10 +++++---
 www/battery-status.html       |  1 +
 www/dbmeter.html              |  1 +
 www/device.html               | 47 +++++++++++++++++++++++++++++++++++
 www/navigation.html           |  1 +
 www/scripts/battery-status.js |  2 +-
 www/scripts/camera.js         |  1 +
 www/scripts/dbmeter.js        | 15 +++++++++++
 www/scripts/device.js         | 19 ++++++++++++++
 www/scripts/dialogs.js        |  2 +-
 www/scripts/vibration.js      |  2 +-
 www/vibration.html            | 10 ++++----
 12 files changed, 99 insertions(+), 12 deletions(-)
 create mode 100644 www/device.html
 create mode 100644 www/scripts/device.js

diff --git a/config.xml b/config.xml
index 6fb0c59..dea6a8d 100644
--- a/config.xml
+++ b/config.xml
@@ -9,6 +9,7 @@
     <preference name="windows-target-version" value="8.1" />
     <preference name="windows-phone-target-version" value="8.1" />
     <preference name="StatusBarOverlaysWebView" value="true" />
+    <preference name="BackgroundColor" value="0xff0000ff" />
     <plugin name="cordova-plugin-whitelist" spec="1" />
     <plugin name="cordova-plugin-camera" spec="~2.2.0" />
     <plugin name="cordova-plugin-device-motion" spec="~1.2.1" />
@@ -23,6 +24,11 @@
     <plugin name="cordova-plugin-dbmeter" spec="~1.0.3" />
     <plugin name="cordova-plugin-splashscreen" spec="~3.2.2" />
     <plugin name="cordova-plugin-device-orientation" spec="~1.0.3" />
+    <plugin name="cordova-plugin-network-information" spec="~1.2.1" />
+    <plugin name="cordova-plugin-geolocation" spec="~2.2.0" />
+    <plugin name="cordova-plugin-battery-status" spec="~1.1.2" />
+    <plugin name="cordova-sqlite-storage" spec="~1.4.1" />
+    <plugin name="cordova-plugin-device" spec="~1.1.2" />
     <allow-intent href="http://*/*" />
     <allow-intent href="tel:*" />
     <allow-intent href="sms:*" />
@@ -105,8 +111,4 @@
     <platform name="wp8">
         <splash height="1280" src="res/screens/wp8/SplashScreenImage.png" width="768" />
     </platform>
-    <plugin name="cordova-plugin-network-information" spec="~1.2.1" />
-    <plugin name="cordova-plugin-geolocation" spec="~2.2.0" />
-    <plugin name="cordova-plugin-battery-status" spec="~1.1.2" />
-    <plugin name="cordova-sqlite-storage" spec="~1.4.1" />
 </widget>
diff --git a/www/battery-status.html b/www/battery-status.html
index 47b382f..7f57203 100644
--- a/www/battery-status.html
+++ b/www/battery-status.html
@@ -7,6 +7,7 @@ <h1 class="title">Battery Status</h1>
     #status {
         height: 10px;
         background: #22c064;
+        transition: background 500ms;
     }
 </style>
 
diff --git a/www/dbmeter.html b/www/dbmeter.html
index 7640930..6a47216 100644
--- a/www/dbmeter.html
+++ b/www/dbmeter.html
@@ -11,6 +11,7 @@ <h1 class="title">DB Meter (custom)</h1>
     #db {
         height: 10px;
         background: #22c064;
+        transition: background 250ms;
     }
 </style>
 
diff --git a/www/device.html b/www/device.html
new file mode 100644
index 0000000..832518c
--- /dev/null
+++ b/www/device.html
@@ -0,0 +1,47 @@
+<div class="view">
+    <h1 class="title">Device</h1>
+    <table>
+        <tbody>
+            <tr>
+                <td class="label">cordova</td>
+                <td id="cordova"></td>
+            </tr>
+            <tr>
+                <td class="label">model</td>
+                <td id="model"></td>
+            </tr>
+            <tr>
+                <td class="label">platform</td>
+                <td id="platform"></td>
+            </tr>
+            <tr>
+                <td class="label">uuid</td>
+                <td id="uuid"></td>
+            </tr>
+            <tr>
+                <td class="label">version</td>
+                <td id="version"></td>
+            </tr>
+            <tr>
+                <td class="label">manufacturer</td>
+                <td id="manufacturer"></td>
+            </tr>
+            <tr>
+                <td class="label">isVirtual</td>
+                <td id="isVirtual"></td>
+            </tr>
+            <tr>
+                <td class="label">serial</td>
+                <td id="serial"></td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+<style type="text/css">
+    .label {
+        color: #666;
+    }
+</style>
+
+<div data-script="scripts/device.js"></div>
\ No newline at end of file
diff --git a/www/navigation.html b/www/navigation.html
index e4fb1a4..3bbda70 100644
--- a/www/navigation.html
+++ b/www/navigation.html
@@ -4,6 +4,7 @@ <h1 class="title">Plugins</h1>
     <div data-href="camera.html">Camera</div>
     <div data-href="contacts.html">Contacts</div>
     <div data-href="dbmeter.html">DB Meter (custom)</div>
+    <div data-href="device.html">Device</div>
     <div data-href="device-motion.html">Device Motion</div>
     <div data-href="device-orientation.html">Device Orientation</div>
     <div data-href="dialogs.html">Dialogs</div>
diff --git a/www/scripts/battery-status.js b/www/scripts/battery-status.js
index 2bf0ee8..a62c166 100644
--- a/www/scripts/battery-status.js
+++ b/www/scripts/battery-status.js
@@ -15,7 +15,7 @@ app.batteryStatus = {
         var c;
         switch (true) {
             case (s <= 10):
-                c = 'cc0000';
+                c = '#cc0000';
                 break;
             case (s > 10 && s <= 20):
                 c = '#f7941d';
diff --git a/www/scripts/camera.js b/www/scripts/camera.js
index 7a28cd4..618fa80 100644
--- a/www/scripts/camera.js
+++ b/www/scripts/camera.js
@@ -25,6 +25,7 @@ app.camera = {
 
     // camera returned an error
     error: function(msg) {
+        alert(msg);
         console.error('error: ', msg);
     },
     
diff --git a/www/scripts/dbmeter.js b/www/scripts/dbmeter.js
index 8daafb6..4d7ef4d 100644
--- a/www/scripts/dbmeter.js
+++ b/www/scripts/dbmeter.js
@@ -25,7 +25,22 @@ app.dbmeter = {
     },
     
     success: function(db) {
+        var c;
+        switch (true) {
+            case (db > 70 && db < 90):
+                c = '#f7941d';
+                break;
+            case (db >= 90):
+                c = 'cc0000';
+                break;
+            default:
+                c = '#22c064';
+                break;
+        }
+
         this.db.style.width = db + '%';
+        this.db.style.backgroundColor = c;
+
         console.log('DBMeter: ', db);
     },
     
diff --git a/www/scripts/device.js b/www/scripts/device.js
new file mode 100644
index 0000000..5a7d364
--- /dev/null
+++ b/www/scripts/device.js
@@ -0,0 +1,19 @@
+app.device = {
+
+    options: {
+    },
+    
+    init: function () {
+        
+        $('cordova').innerText      = device.cordova;
+        $('model').innerText        = device.model;
+        $('platform').innerText     = device.platform
+        $('uuid').innerText         = device.uuid
+        $('version').innerText      = device.version
+        $('manufacturer').innerText = device.manufacturer
+        $('isVirtual').innerText    = device.isVirtual
+        $('serial').innerText       = device.serial
+    }
+};
+
+app.device.init();
\ No newline at end of file
diff --git a/www/scripts/dialogs.js b/www/scripts/dialogs.js
index 6923735..299db71 100644
--- a/www/scripts/dialogs.js
+++ b/www/scripts/dialogs.js
@@ -30,7 +30,7 @@ app.dialogs = {
             'You are the winner!',  // message
             this.callBack,          // callback
             'Game Over',            // title
-            'Done',                 // buttons
+            ['Done','Cancel'],      // buttons
             'default text'          // default text
         );
     },
diff --git a/www/scripts/vibration.js b/www/scripts/vibration.js
index 6a72112..9b14a89 100644
--- a/www/scripts/vibration.js
+++ b/www/scripts/vibration.js
@@ -6,7 +6,7 @@ app.vibration = {
     },
     
     vibrate: function() {
-        navigator.vibrate([1000,500,1000,500,1000]);
+        navigator.vibrate([500,500,500,500,500]);
         this.button.className = 'shake';
         window.setTimeout(function(e){
             this.button.className = '';
diff --git a/www/vibration.html b/www/vibration.html
index dba39b5..98f60b3 100644
--- a/www/vibration.html
+++ b/www/vibration.html
@@ -11,23 +11,23 @@ <h1 class="title">Vibrate</h1>
     
     @keyframes shake {
         5%, 45% {
-            transform: translate3d(-1px, 0, 0);
+            transform: translateX(-1px);
         }
 
         10%, 40% {
-            transform: translate3d(2px, 0, 0);
+            transform: translateX(2px);
         }
 
         15%, 25%, 35% {
-            transform: translate3d(-4px, 0, 0);
+            transform: translateX(-4px);
         }
 
         20%, 30% {
-            transform: translate3d(4px, 0, 0);
+            transform: translateX(4px);
         }
         
         50%, 100% {
-            transform: translate3d(0, 0, 0);
+            transform: translateX(0);
         }
     }
 </style>