updated check-in app with cache and auto check-in

- updated cordova-android to 8.0.0 - updated controllers to work with AngularJS 1.8 - added settings page - added auto check-in feature - made QR-code scanning faster (no result display, only QR-code) - added local cache for registrants - added search function / filtering for registrant list - added loading indicators
javfg · May 13, 2019 · 31a130e · 31a130e
1 parent cad7607
commit 31a130e
Show file tree

Hide file tree

Showing 12 changed files with 791 additions and 551 deletions.
diff --git a/package.json b/package.json
@@ -1,55 +1,56 @@
 {
-    "name": "indico-checkin",
-    "version": "1.4.3",
-    "author": "Indico Team <[email protected]>",
-    "description": "Check-in application for Indico conferences",
-    "contributors": [
-        {
-            "name": "Indico Team",
-            "email": "[email protected]"
-        }
-    ],
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/indico/indico-checkin.git"
-    },
-    "keywords": [
-        "indico",
-        "checkin",
-        "conference"
-    ],
-    "devDependencies": {
-        "cordova": "^8.1.0"
-    },
-    "license": "GPL-3.0",
-    "scripts": {
-        "icons": "cordova-icon --icon=res/icon/icon.png --config=www/config.xml"
-    },
-    "cordova": {
-        "plugins": {
-            "cordova-plugin-dialogs": {},
-            "cordova-plugin-inappbrowser": {},
-            "cordova-plugin-network-information": {},
-            "cordova-plugin-splashscreen": {},
-            "cordova-plugin-whitelist": {},
-            "phonegap-plugin-barcodescanner": {
-                "CAMERA_USAGE_DESCRIPTION": "To scan ticket QR codes"
-            }
-        },
-        "platforms": [
-            "android",
-            "ios"
-        ]
-    },
-    "dependencies": {
-        "cordova-android": "^7.1.1",
-        "cordova-icon": "^1.0.0",
-        "cordova-ios": "^4.5.5",
-        "cordova-plugin-dialogs": "2.0.1",
-        "cordova-plugin-inappbrowser": "3.0.0",
-        "cordova-plugin-network-information": "2.0.1",
-        "cordova-plugin-splashscreen": "5.0.2",
-        "cordova-plugin-whitelist": "1.3.3",
-        "phonegap-plugin-barcodescanner": "8.0.0"
+  "name": "indico-checkin",
+  "version": "1.5.0",
+  "author": "Indico Team <[email protected]>",
+  "description": "Check-in application for Indico conferences",
+  "contributors": [
+    {
+      "name": "Indico Team",
+      "email": "[email protected]"
     }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/indico/indico-checkin.git"
+  },
+  "keywords": [
+    "indico",
+    "checkin",
+    "conference"
+  ],
+  "devDependencies": {
+    "cordova": "^8.1.0"
+  },
+  "license": "GPL-3.0",
+  "scripts": {
+    "icons": "cordova-icon --icon=res/icon/icon.png --config=www/config.xml"
+  },
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-dialogs": {},
+      "cordova-plugin-inappbrowser": {},
+      "cordova-plugin-network-information": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-whitelist": {},
+      "phonegap-plugin-barcodescanner": {
+        "CAMERA_USAGE_DESCRIPTION": "To scan ticket QR tickets",
+        "ANDROID_SUPPORT_V4_VERSION": "27.+"
+      }
+    },
+    "platforms": [
+      "android",
+      "ios"
+    ]
+  },
+  "dependencies": {
+    "cordova-android": "^8.0.0",
+    "cordova-ios": "^4.5.5",
+    "cordova-icon": "^1.0.0",
+    "cordova-plugin-dialogs": "^2.0.1",
+    "cordova-plugin-inappbrowser": "^3.0.0",
+    "cordova-plugin-network-information": "^2.0.1",
+    "cordova-plugin-splashscreen": "^5.0.2",
+    "cordova-plugin-whitelist": "^1.3.3",
+    "phonegap-plugin-barcodescanner": "^8.0.1"
+  }
 }
diff --git a/www/config.xml b/www/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="ch.cern.indico.checkin" version="1.4.3" versionCode="420" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
+<widget id="ch.cern.indico.checkin" version="1.5.0" versionCode="421" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
     <name>Indico check-in</name>
     <description>
         Check-in application for Indico conferences.
@@ -18,10 +18,13 @@
     <preference name="ios-statusbarstyle" value="default" />
     <preference name="detect-data-types" value="true" />
     <preference name="exit-on-suspend" value="false" />
-    <preference name="show-splash-screen-spinner" value="true" />
-    <preference name="auto-hide-splash-screen" value="true" />
     <preference name="android-minSdkVersion" value="19" />
     <preference name="android-installLocation" value="auto" />
+    <preference name="ShowSplashScreenSpinner " value="true" />
+    <preference name="AutoHideSplashScreen" value="true" />
+    <preference name="SplashMaintainAspectRatio" value="true" />
+    <preference name="SplashScreenSpinnerColor" value="#03a4e4" />
+    <preference name="SplashScreenDelay" value="4000" />
     <platform name="android">
         <icon gap:density="ldpi" src="res/icon/android/icon-36-ldpi.png" />
         <icon gap:density="mdpi" src="res/icon/android/icon-48-mdpi.png" />
@@ -43,7 +46,6 @@
         <splash height="2048" src="res/screen/ios/screen-ipad-portrait-2x.png" width="1536" />
         <splash height="2208" src="res/screen/ios/screen-iphone-portrait-736h-3x.png" width="1242" />
     </platform>
-    <preference name="SplashScreenDelay" value="4000" />
     <content src="index.html" />
     <allow-navigation href="*" />
     <allow-intent href="tel:*" />
@@ -57,7 +59,7 @@
         <variable name="CAMERA_USAGE_DESCRIPTION" value="To scan ticket QR codes" />
     </plugin>
     <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
-        <string>To scan barcodes</string>
+        <string>To scan QR tickets</string>
     </edit-config>
     <engine name="android" spec="^7.1.1" />
     <engine name="ios" spec="~4.5.5" />

diff --git a/www/css/index.css b/www/css/index.css
@@ -21,30 +21,33 @@
 
 body {
     padding-top: 70px;
+    padding-bottom: 70px;
 }
 
 .checkin-nav {
-    text-shadow: 0 -1px 0 rgba(0,0,0,.15);
+    text-shadow: 0 -1px 0 rgba(0,0,0,.05);
     border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.1);
     box-shadow: 0 1px 0 rgba(255,255,255,.1);
 }
 
 header.checkin-nav {
     background-color: #0B63A5;
-    height: 46px;
+    border-bottom: 1px solid #0b4571;
+    height: 50px;
     color: #ffffff;
 }
 
 header.checkin-nav  > .title {
     color: #ffffff;
-    font-size: 1.2em;
+    font-size: 1.4em;
+    font-weight: bold;
     position: absolute;
     left: 1.6em;
     right: 1.6em;
     text-align: center;
     display: inline-block;
-    line-height: 46px;
-    height: 46px;
+    line-height: 50px;
+    height: 50px;
     margin: 0px 10px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -55,21 +58,21 @@ header.checkin-nav  > a {
     font-size: 1.2em;
     text-align: center;
     float: left;
-    line-height: 46px;
-    min-width: 46px;
+    line-height: 50px;
+    min-width: 50px;
 }
 
 header.checkin-nav > a:hover {
     color: #0E80D8;
 }
 
 footer.checkin-nav {
-    min-height: 50px;
-    line-height: 50px;
+    min-height: 60px;
+    line-height: 55px;
+    padding-top: 5px;
     border-bottom: none;
-    border-top: 1px solid #0E80D8;
-    background-color: #EEE;
-
+    border-top: 1px solid #0B63A5;
+    background-color: #eee;
 }
 
 footer.checkin-nav nav {
@@ -133,34 +136,41 @@ footer.checkin-nav nav > a:hover {
 /* Override Bootstrap style*/
 
 h3.panel-title {
-    font-size: 24px;
+    font-size: 1.4em;
     font-weight: bold;
 }
 
-h4.list-group-item-heading {
-    white-space: pre;
+.registrants h4.list-group-item-heading {
+    font-size: 1em;
+    margin-top: 1px;
+    margin-bottom: 1px;
     word-wrap: break-word;
 }
 
 .badge {
-    font-size: 20px;
+    font-size: 1.3em;
 }
 
 div.registrants .checked  {
-    font-size: 18px;
+    font-size: 1em;
     margin-left: 10px;
 }
 
+div.registrants input.list-group-item  {
+    width: 100%;
+}
+
 
 
 .toggle-button {
     -webkit-box-sizing: border-box;
     border: 1px solid #999;
     box-shadow: 0 0 5px rgba(100,100,100,0.3) inset;
-    width: 6em;
+    width: 8em;
     display: block;
     background: #ddd;
-    height: 2em;
+    height: 2.7em;
+    line-height: 2.35em;
     cursor: pointer;
     position: relative;
 }
@@ -182,7 +192,7 @@ div.registrants .checked  {
     box-shadow: 0 0 0px rgba(255,255,255,0.8) inset;
     background-color: #0B63A5;
     border-color: #0E80D8;
-    left: 3em;
+    left: 4em;
 }
 
 .toggle-button .toggle::before {
@@ -199,3 +209,28 @@ div.registrants .checked  {
     color: #eee !important;
 }
 
+.pull-right .btn {
+    margin-top: -7px;
+}
+
+.panel .table th, .panel .table td {
+    padding: 10px 15px;
+}
+.panel .table td.condensed, .panel .table td.condensed {
+    padding: 4px 15px;
+}
+.panel .registration th {
+    width: 45%;
+}
+.panel .table td.description {
+    border-top: none;
+    padding: 0 15px 10px 15px;
+    color: #888;
+}
+
+#registrants-spinner-container, #registrant-spinner-container {
+    display: block;
+    position: relative;
+    height: 1.4em;
+    width: 2em;
+}
diff --git a/www/index.html b/www/index.html
@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
         <meta http-equiv="Content-Security-Policy" content="default-src 'self' * gap://ready; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';">
         <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
-        <link rel="stylesheet" type="text/css" href="css/on-off-switch.css" />
+        <link rel="stylesheet" type="text/css" href="css/spin.css" />
         <link rel="stylesheet" type="text/css" href="css/index.css" />
         <title>Check in</title>
     </head>
@@ -22,29 +22,32 @@
         </div>
         <footer class="navbar navbar-fixed-bottom checkin-nav" role="navigation">
             <nav class="nav navbar-nav">
-                <a ng-click="allEvents()">
+                <a ng-click="showEvents()">
                     <span class="glyphicon glyphicon-list"></span>
                     All events
                 </a>
-                <a ng-click="addEvent()">
-                    <span class="glyphicon glyphicon-plus"></span>
-                    Add event
+                <a ng-click="showSettings()">
+                    <span class="glyphicon glyphicon-cog"></span>
+                    Settings
                 </a>
-                <a ng-click="scan()">
+                <a ng-click="scanTicket()">
                     <span class="glyphicon glyphicon-qrcode"></span>
-                    Check-in
+                    Scan ticket
                 </a>
             </nav>
         </footer>
         <script type="text/javascript" src="cordova.js"></script>
+        <script type="text/javascript" src="js/lib/jquery.min.js"></script>
         <script type="text/javascript" src="js/lib/jsOAuth.js"></script>
         <script type="text/javascript" src="js/lib/hello.js"></script>
         <script type="text/javascript" src="js/lib/hello-modules/indico.js"></script>
         <script type="text/javascript" src="js/lib/angular.js"></script>
         <script type="text/javascript" src="js/lib/angular-route.js"></script>
         <script type="text/javascript" src="js/lib/angular-touch.js"></script>
+        <script type="text/javascript" src="js/lib/ng-infinite-scroll.min.js"></script>
         <script type="text/javascript" src="js/lib/ui-bootstrap.js"></script>
         <script type="text/javascript" src="js/lib/moment.min.js"></script>
+        <script type="text/javascript" src="js/lib/spin.js"></script>
         <script type="text/javascript" src="js/util.js"></script>
         <script type="text/javascript" src="js/controllers.js"></script>
         <script type="text/javascript" src="js/services.js"></script>

diff --git a/www/js/app.js b/www/js/app.js
@@ -40,14 +40,19 @@ var app = {
     }
 };
 
-angular.module('Checkinapp', ['ngTouch', 'ngRoute', 'ui.bootstrap', 'Checkinapp.services']).
+angular.module('Checkinapp', ['ngTouch', 'ngRoute', 'ui.bootstrap', 'infinite-scroll',
+        'Checkinapp.services', 'Checkinapp.controllers']).
     config(function ($routeProvider) {
 
     $routeProvider.
         when('/', {
             templateUrl: 'partials/events.html',
             controller: 'EventsController'
         }).
+        when('/settings', {
+            templateUrl: 'partials/settings.html',
+            controller: 'SettingsController'
+        }).
         when('/server/:server/event/:event', {
             templateUrl: 'partials/registrants.html',
             controller: 'RegistrantsController'