working on component

src/index.html

@@ -11,7 +11,7 @@
     <!-- injector:theme -->
     <link rel="stylesheet" href="css/libs/oj/v4.0.0/alta/oj-alta-min.css" type="text/css"/>
     <!-- endinjector -->
-    
+
     <!-- This contains icon fonts used by the starter template -->
     <link rel="stylesheet" href="css/demo-alta-site-min.css" type="text/css"/>
 
@@ -54,6 +54,7 @@
               <img src="http://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/f4a5b21d-66fa-4885-92bf-c4e81c06d916/Image/719c7ac35319363570c2eaed0584e9cd/oracle_jet.png" width="50" />
               &nbsp;&nbsp;<img src="http://www.projectcodex.co/img/codeX-logo.svg" width="90" />
               &nbsp;&nbsp;<img src="http://zone.steltixlabs.com/images/steltixlabs-black.png" width="120" />
+              &nbsp;&nbsp;<img src="http://undisputedaz.com/wp-content/uploads/sites/16/2017/11/undisputed-fb-1.jpg" width="120" />
 
             </div>
             <div class="oj-flex-bar-end">
@@ -63,7 +64,6 @@
                   <span data-bind="text: userLogin"></span>
                   <span slot="endIcon" data-bind="css: smScreen() ? 'oj-icon demo-appheader-avatar' : 'oj-component-icon oj-button-menu-dropdown-icon'"></span>
                   <oj-menu id="menu1" slot="menu" style="display:none">
-                    <!-- <oj-option id="about" value="about">About</oj-option> -->
                   </oj-menu>
                 </oj-menu-button>
               </oj-toolbar>
@@ -94,10 +94,10 @@
         </footer>
       </div>
     </div>
-    
+
     <script type="text/javascript" src="js/libs/require/require.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
 
   </body>
 
-</html>
+</html>

src/js/appController.js

@@ -20,7 +20,7 @@ define(['ojs/ojcore', 'knockout', 'ojs/ojrouter', 'ojs/ojknockout', 'ojs/ojarray
        // Router setup
        self.router = oj.Router.rootInstance;
        self.router.configure({
-         'dashboard': {label: 'Dashboard', isDefault: true},
+         'dashboard': {label: 'Dashboard', isDefault: true },
          'incidents': {label: 'Incidents'},
          'customers': {label: 'Customers'},
          'about': {label: 'About'}
@@ -33,8 +33,6 @@ define(['ojs/ojcore', 'knockout', 'ojs/ojrouter', 'ojs/ojknockout', 'ojs/ojarray
        iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-chart-icon-24'},
       // {name: 'Incidents', id: 'incidents',
       //  iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-fire-icon-24'},
-      // {name: 'Customers', id: 'customers',
-      //  iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-people-icon-24'},
       {name: 'About', id: 'about',
        iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-info-icon-24'}
       ];
@@ -57,10 +55,10 @@ define(['ojs/ojcore', 'knockout', 'ojs/ojrouter', 'ojs/ojknockout', 'ojs/ojarray
 
       // Header
       // Application Name used in Branding Area
-      self.appName = ko.observable("CodeX Dashboard");
+      self.appName = ko.observable("Siyaya Dashboard");
       // User Info used in Global Navigation area
-      self.userLogin = ko.observable("user@codex.com");
-
+      self.userLogin = ko.observable("Undisputed@codex.com");
+      // self.signout = ko.observable("Sign Out");
       // Footer
       function footerLink(name, id, linkTarget) {
         this.name = name;

src/js/jet-composites/location-component/README.md

@@ -0,0 +1,5 @@
+# ojet component template
+
+## Usage
+Refer to the oj.Composite jsdoc
+http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.Composite.html

src/js/jet-composites/location-component/component.json

@@ -0,0 +1,27 @@
+{
+  "name": "sign-in",
+  "displayName": "sign-in",
+  "description": "Sign in to the application",
+  "version": "1.0.0",
+  "jetVersion": "^4.1.0",
+  "properties": {
+    "username": {
+      "type": "string"
+    },
+    "password": {
+      "type": "string"
+    },
+    "cb" : {
+      "type": "function"
+    }
+  },
+  "methods": {
+
+  },
+  "events": {
+
+  },
+  "slots": {
+
+  }
+}

src/js/jet-composites/location-component/loader.js

@@ -0,0 +1,13 @@
+/**
+  Copyright (c) 2015, 2017, Oracle and/or its affiliates.
+  The Universal Permissive License (UPL), Version 1.0
+*/
+define(['ojs/ojcore', 'text!./view.html', './viewModel', 'text!./component.json', 'css!./styles', 'ojs/ojcomposite'],
+  function(oj, view, viewModel, metadata) {
+    oj.Composite.register('location-component', {
+      view: {inline: view},
+      viewModel: {inline: viewModel},
+      metadata: {inline: JSON.parse(metadata)}
+    });
+  }
+);

src/js/jet-composites/location-component/styles.css

@@ -0,0 +1,6 @@
+sign-in:not(.oj-complete){
+  visibility: hidden;
+}
+
+sign-in{
+}

src/js/jet-composites/location-component/view.html

@@ -0,0 +1,14 @@
+<!--
+  Copyright (c) 2015, 2017, Oracle and/or its affiliates.
+  The Universal Permissive License (UPL), Version 1.0
+-->
+
+<h1>Search for Location</h1><br>
+<label for="locFrom">Current Location:
+  <input type="text" id="locFrom" data-bind="value:enterLocationFrm" placeholder="From..."></input>
+</label>
+<br></br>
+<label for="locTo">Final Destination:
+  <input type="text" id="locTo" data-bind="value:enterLocationTo" placeholder="To..."></input>
+</label><br><br>
+<input type="button" id="search" name="name" value="Search Location">

src/js/jet-composites/location-component/viewModel.js

@@ -0,0 +1,38 @@
+/**
+  Copyright (c) 2015, 2017, Oracle and/or its affiliates.
+  The Universal Permissive License (UPL), Version 1.0
+*/
+define(
+    ['ojs/ojcore', 'knockout', 'jquery'], function (oj, ko, $) {
+    'use strict';
+
+    function LocationModel(context) {
+        var self = this;
+        self.composite = context.element;
+        //Example observable
+        self.enterLocationFrm = ko.observable(context.locFrom);
+        self.enterLocationTo = ko.observable(context.locTo);
+        context.props.then(function (propertyMap) {
+            //Store a reference to the properties for any later use
+            self.properties = propertyMap;
+
+            //Parse your component properties here
+
+        });
+    };
+
+    //Lifecycle methods - uncomment and implement if necessary
+    //signInModel.prototype.activated = function(context){
+    //};
+
+    //signInModel.prototype.attached = function(context){
+    //};
+
+    //signInModel.prototype.bindingsApplied = function(context){
+    //};
+
+    //signInModel.prototype.detached = function(context){
+    //};
+
+    return LocationModel;
+});

src/js/jet-composites/map-wrapper/README.md

@@ -0,0 +1,5 @@
+# ojet component template
+
+## Usage
+Refer to the oj.Composite jsdoc
+http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.Composite.html

src/js/jet-composites/map-wrapper/component.json

@@ -0,0 +1,24 @@
+{
+  "name": "map-wrapper",
+  "displayName": "map-wrapper",
+  "description": "Draw a google map on a location",
+  "version": "1.0.0",
+  "jetVersion": "^4.0.0",
+  "properties": {
+    "height":{
+      "type": "string"
+    },
+    "width":{
+    "type":"string"
+    }
+  },
+  "methods": {
+
+  },
+  "events": {
+
+  },
+  "slots": {
+
+  }
+}

src/js/jet-composites/map-wrapper/loader.js

@@ -0,0 +1,13 @@
+/**
+  Copyright (c) 2015, 2017, Oracle and/or its affiliates.
+  The Universal Permissive License (UPL), Version 1.0
+*/
+define(['ojs/ojcore', 'text!./view.html', './viewModel', 'text!./component.json', 'css!./styles', 'ojs/ojcomposite'],
+  function(oj, view, viewModel, metadata) {
+    oj.Composite.register('map-wrapper', {
+      view: {inline: view}, 
+      viewModel: {inline: viewModel}, 
+      metadata: {inline: JSON.parse(metadata)}
+    });
+  }
+);

src/js/jet-composites/map-wrapper/styles.css

@@ -0,0 +1,3 @@
+map-wrapper:not(.oj-complete){
+  visibility: hidden;
+}

src/js/jet-composites/map-wrapper/view.html

@@ -0,0 +1,46 @@
+<!--
+  Copyright (c) 2015, 2017, Oracle and/or its affiliates.
+  The Universal Permissive License (UPL), Version 1.0
+-->
+<head>
+   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+</head>
+<div class="container" align="center">
+<label for="SelectFrom"><h4>Select Start Point:
+<select class="btn-info btn-lg" id="SelectFrom">
+  <option value="LA">Langa</option>
+  <option value="SR">Salt River</option>
+  <option value="MB">Mowbray</option>
+  <option value="CM">Claremont</option>
+  <option value="WB">Wynberg</option>
+  <option value="CT">Cape Town</option>
+</select><br></br>
+</label>
+
+<label for="SelectTo">Select End Point:
+<select class="btn-info btn-lg" id="SelectTo">
+  <option value="CT">Cape Town</option>
+  <option value="SR">Salt River</option>
+  <option value="MB">Mowbray</option>
+  <option value="CM">Claremont</option>
+  <option value="WB">Wynberg</option>
+  <option value="LA">Langa</option>
+</select></h4>
+</label><br>
+<input type="button" class='btn btn-primary btn-lg' name="name" data-bind="click:clickhandler"value="Go"><br></br>
+
+  <h4>Driving:</h4>
+  <p data-bind="text : distance"></p>
+  <p data-bind="text: duration"></p>
+
+<div class="" style="display:inline-block">
+  <h4>Walking:</h4>
+  <p data-bind="text : distanceWalk"></p>
+  <p data-bind="text: durationWalk"></p>
+</div>
+
+
+<p data-bind="text: message"></p>
+<div id="googleMap" data-bind="style: {height: height, width: width  }"></div>
+
+</div>