Customer Journey demo fully working

smartfog · Mar 29, 2023 · bf9f5af · bf9f5af
1 parent 15b6d05
commit bf9f5af
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 14 deletions.
diff --git a/designer/main.js b/designer/main.js
@@ -306,12 +306,12 @@ app.all("/ngsi10/*", function (req, res) {
 });
 
 app.all("/ngsi-ld/*", function (req, res) {
-    //console.log('redirecting to ngsi-ld broker');
+    console.log('redirecting to ngsi-ld broker', cloudBrokerURL);
     ngsiProxy.web(req, res, { target: cloudBrokerURL });
 });
 
 app.all("/ngsi9/*", function (req, res) {
-    //console.log('redirecting to ngsi-v1 discovery');
+    console.log('redirecting to ngsi-v1 discovery', discoveryURL);
     ngsiProxy.web(req, res, { target: discoveryURL });
 });
 

diff --git a/designer/public/customerjourney.html b/designer/public/customerjourney.html
@@ -41,6 +41,7 @@
     <!-- NGSI -->
     <script src="/lib/axios/axios.min.js"></script>
     <script src="/lib/ngsi/ngsiclient.js"></script>
+    <script src="/lib/ngsi/LDngsiclient.js"></script>
 
     <!-- NGSI proxy to receive notification via webscoket-->
     <script src="/socket.io/socket.io.js"></script>

diff --git a/designer/public/data/shops_data.json b/designer/public/data/shops_data.json
diff --git a/designer/public/img/customerjourney_cdpSegmentIdentification.png b/designer/public/img/customerjourney_cdpSegmentIdentification.png
diff --git a/designer/public/img/customerjourney_customersatisfactionindex.png b/designer/public/img/customerjourney_customersatisfactionindex.png
diff --git a/designer/public/img/customerjourney_transactionsSimulation.png b/designer/public/img/customerjourney_transactionsSimulation.png
diff --git a/designer/public/img/customerjourney_wishedStoreSelection.png b/designer/public/img/customerjourney_wishedStoreSelection.png
diff --git a/designer/public/img/customerjourneydigitaltwin.png b/designer/public/img/customerjourneydigitaltwin.png
diff --git a/designer/public/img/customerjourneyscenario.png b/designer/public/img/customerjourneyscenario.png
diff --git a/designer/public/js/customerjourney.js b/designer/public/js/customerjourney.js
@@ -17,10 +17,11 @@ $(function() {
 
     var curMap = null;
 
-    addMenuItem('CustomerJourney', 'Customer Journey', showCustomerJourney);
+    addMenuItem('CustomerJourneyScenario', 'Customer Journey Scenario', showCustomerJourneyScenario);
+    addMenuItem('CustomerJourneyDigitalTwin', 'Digital Twin for Customer Journey', showCustomerJourneyDigitalTwin);
     addMenuItem('WishedStore', 'Wished Store', showWishedStore);
-    addMenuItem('SuggestedStore', 'Suggested Store', showSuggestedStore);
-    addMenuItem('TransactionsSimulator', 'Transactions Simulator', transactionsSimulator);
+    addMenuItem('SelectedStores', 'Selected Stores', showSelectedStore);
+    addMenuItem('TransactionsSimulator', 'Suggested Store Simulator', transactionsSimulator);
 
     // //connect to the socket.io server via the NGSI proxy module
     // var ngsiproxy = new NGSIProxy();
@@ -29,14 +30,16 @@ $(function() {
     // client to interact with IoT Broker
     // var ldclient = new NGSILDclient(config.LdbrokerURL);
     var client = new NGSI10Client(config.brokerURL);
+    var ldclient = new NGSILDclient(config.LdbrokerURL);
+
     // subscribeResult();
 
     if(!config.doNotInitApplications){
         console.log('doNotInitApplications: ' + config.doNotInitApplications);
         // initParkingSite();
     }
 
-    showCustomerJourney();
+    showCustomerJourneyScenario();
 
     $(window).on('hashchange', function() {
         var hash = window.location.hash;
@@ -58,18 +61,30 @@ $(function() {
     }
 
 
-    function showCustomerJourney() {
-        $('#info').html('to show the customery journey application overview');
+    function showCustomerJourneyScenario() {
+        $('#info').html('Customer journey application scenario');
 
         var html = '';
-        html += '<div><img width="50%" src="/img/smart-parking.png"></img></div>';
+        html += '<div><img width="70%" src="/img/customerjourneyscenario.png"></img></div>';
 
         $('#content').html(html);
     }
 
+    function showCustomerJourneyDigitalTwin() {
+        $('#info').html('Digital Twin for customer journey');
+
+        var html = '';
+        html += '<div><img width="50%" src="/img/customerjourneydigitaltwin.png"></img></div>';
+        html += '<button  id="populate" type="button">Populate System</button>'
+
+        $('#content').html(html);
+
+        $('#populate').click(populateSystem);
+    }
+
     function showWishedStore() {
         // console.log("showWishedStore")
-        $('#info').html('wished store from CDP');
+        $('#info').html('Wished store from Customer Data Platform (CDP)');
 
         var shopTypes = [
             "musicshop",
@@ -94,13 +109,15 @@ $(function() {
 
         var html = ''
 
+        html += '<div><img width="40%" src="/img/customerjourney_cdpSegmentIdentification.png"></img></div>';
+
         html += '<h2>CDP Wished Store</h2>';
 
         html += '<br><br>';
 
         html += '<div style="display: table-row">';
 
-        html += '<div style="display: table-cell;vertical-align: middle;"><button id="CDPWishedStore" style="transition: all 0.5s; cursor: pointer; background: #dfe7ff;color:#4e46e5;padding: 15px 32px;font-size: 16px;border-radius: 12px;" type="button">CDP Segment Identification</button></div>'
+        html += '<div style="display: table-cell;vertical-align: middle;"><button id="CDPWishedStore" style="transition: all 0.5s; cursor: pointer; background: #d0be34;color:#ffffff;padding: 15px 32px;font-size: 16px;border-radius: 100px;" type="button">CDP Segment Identification</button></div>'
         html += '<div style="display: table-cell;"><table id="wishedStoreTypesTable" style="width:100px; display: none;">'
         html += '<tr><td><button id="rowButton" style="border-radius: 4px;" type="button">x</button></td><td>musicshop</td></tr>'
         html += '<tr><td><button id="rowButton" style="border-radius: 4px;" type="button">x</button></td><td>cafe</td></tr>'
@@ -181,13 +198,35 @@ $(function() {
         }
     }
 
+    function populateSystem() {
+
+        fetch('/data/shops_data.json')
+            .then(response => response.json())
+            .then( shopsdata =>
+                ldclient.updateContext(shopsdata).then(function(data) {
+                    console.log(data);
+                }).catch(function(error) {
+                    console.log('failed to create a parking site entity');
+                })
+        )
+    }
+
 
-    function showSuggestedStore() {
+
+    function showSelectedStore() {
         // console.log("showWishedStore")
-        $('#info').html('suggested store with and without context');
+        $('#info').html('Suggested store with and without context');
 
         var html = ''
 
+        html += '<div><img width="50%" src="/img/customerjourney_wishedStoreSelection.png"></img></div>';
+
+        html += '<br><br>'
+
+        html += '<h2>Customer Satisfaction Index Comparison</h2>';
+
+        html += '<div><img width="50%" src="/img/customerjourney_customersatisfactionindex.png"></img></div>';
+
         html += '<br><br>'
 
         html += 'Baseline Time in the Shop (minutes): <input type="text" class="input-large" value="60" id="baselineTime"><br>';
@@ -285,9 +324,10 @@ $(function() {
 
     function transactionsSimulator() {
 
-        $('#info').html('simulate scenario for total transactions');
+        $('#info').html('Simulate scenario for total transactions');
 
         var html = '<div id="kpis"></div>';
+        html += '<div><img width="70%" src="/img/customerjourney_transactionsSimulation.png"></img></div>';
         html += 'Number of Customers: <input type="text" class="input-large" id="customers"><br>';
         html += 'Time Budget: <input type="text" class="input-large" id="time_budget"><br>';
         html += 'Baseline time per shop: <input type="text" class="input-large" id="baseline_time_per_shop"><br>';