Merge pull request #11 from ArasLabs/issue-7

Issue 7 Add Location data functionality

Import/PLM/Import/Form/PR.xml

@@ -0,0 +1,75 @@
+<AML>
+ <Item type="Form" id="BECC5C22100641F2A96F2AFB8155A380" action="add">
+  <category_form>0</category_form>
+  <description>Problem Report</description>
+  <height>399</height>
+  <stylesheet><![CDATA[../styles/default.css]]></stylesheet>
+  <width>834</width>
+  <name>PR</name>
+  <Relationships>
+   <Item type="Body" id="12D89FDBF0EA46E9AEF77DD43DC64BE4" action="add">
+    <bg_color>#FFFFFF</bg_color>
+    <sort_order>128</sort_order>
+    <source_id keyed_name="PR" type="Form">BECC5C22100641F2A96F2AFB8155A380</source_id>
+    <Relationships>
+     <Item type="Field" id="21E52DBE2E914A3A8BCFC75AA3922EDF" action="add">
+      <border_width>0</border_width>
+      <display_length_unit>px</display_length_unit>
+      <field_type>textarea</field_type>
+      <font_color>#000000</font_color>
+      <font_family>arial, helvetica, sans-serif</font_family>
+      <font_size>8pt</font_size>
+      <font_weight>bold</font_weight>
+      <is_disabled>0</is_disabled>
+      <is_visible>0</is_visible>
+      <label xml:lang="en">Location</label>
+      <label_position>top</label_position>
+      <list_no_blank>0</list_no_blank>
+      <propertytype_id keyed_name="location" type="Property">6CBCF2DCDCCD4E999C8EB7698961FF59</propertytype_id>
+      <sort_order>2944</sort_order>
+      <source_id keyed_name="12D89FDBF0EA46E9AEF77DD43DC64BE4" type="Body">12D89FDBF0EA46E9AEF77DD43DC64BE4</source_id>
+      <tab_index>5760</tab_index>
+      <tab_stop>1</tab_stop>
+      <x>661</x>
+      <y>10</y>
+      <name>location</name>
+     </Item>
+     <Item type="Field" id="97AFFF73D3734C4BAD455E72278C5AA8" action="add">
+      <border_width>0</border_width>
+      <display_length_unit>px</display_length_unit>
+      <field_type>html</field_type>
+      <font_color>#000000</font_color>
+      <font_family>arial, helvetica, sans-serif</font_family>
+      <font_size>8pt</font_size>
+      <font_weight>bold</font_weight>
+      <html_code><![CDATA[<link href=../javascript/MapboxGL/mapbox-gl.css' rel='stylesheet' />
+<div id='map' style='width: 400px; height: 300px;'></div>
+<address id='map-caption'></address>
+]]></html_code>
+      <is_disabled>0</is_disabled>
+      <is_visible>1</is_visible>
+      <label xml:lang="en">Location</label>
+      <label_position>top</label_position>
+      <list_no_blank>0</list_no_blank>
+      <sort_order>3072</sort_order>
+      <source_id keyed_name="12D89FDBF0EA46E9AEF77DD43DC64BE4" type="Body">12D89FDBF0EA46E9AEF77DD43DC64BE4</source_id>
+      <tab_stop>1</tab_stop>
+      <x>661</x>
+      <y>10</y>
+      <name>map</name>
+     </Item>
+    </Relationships>
+   </Item>
+   <Item type="Form Event" id="379D5C84FB8F49268DAA082375E4A7F1" action="add">
+    <form_event>onformpopulated</form_event>
+    <related_id keyed_name="labs_LoadLocationMap" type="Method">
+     <Item type="Method" action="get" select="id">
+      <name>labs_LoadLocationMap</name>
+     </Item>
+    </related_id>
+    <sort_order>256</sort_order>
+    <source_id keyed_name="PR" type="Form">BECC5C22100641F2A96F2AFB8155A380</source_id>
+   </Item>
+  </Relationships>
+ </Item>
+</AML>

Import/PLM/Import/ItemType/PR.xml

@@ -0,0 +1,25 @@
+<AML>
+ <Item type="ItemType" id="881803D90C0B4F98A49A4732C16277F2" action="add">
+  <name>PR</name>
+  <Relationships>
+   <Item type="Property" id="6CBCF2DCDCCD4E999C8EB7698961FF59" action="add">
+    <column_alignment>left</column_alignment>
+    <data_type>string</data_type>
+    <is_hidden>0</is_hidden>
+    <is_hidden2>0</is_hidden2>
+    <is_indexed>0</is_indexed>
+    <is_keyed>0</is_keyed>
+    <is_multi_valued>0</is_multi_valued>
+    <is_required>0</is_required>
+    <label xml:lang="en">Location</label>
+    <range_inclusive>0</range_inclusive>
+    <readonly>0</readonly>
+    <sort_order>5760</sort_order>
+    <source_id keyed_name="PR" type="ItemType" name="PR">881803D90C0B4F98A49A4732C16277F2</source_id>
+    <stored_length>128</stored_length>
+    <track_history>0</track_history>
+    <name>location</name>
+   </Item>
+  </Relationships>
+ </Item>
+</AML>

Import/ProblemReporter/Import/Method/labs_LoadLocationMap.xml

@@ -0,0 +1,80 @@
+<AML>
+ <Item type="Method" id="3430BDA56E3645ADABCE513F7C5F6BDD" action="add">
+  <execution_allowed_to keyed_name="World" type="Identity">A73B655731924CD0B027E4F4D5FCC0A9</execution_allowed_to>
+  <method_code><![CDATA[require([
+    "../javascript/MapboxGL/mapbox-gl.js"
+], function(
+    mapboxgl
+) {
+    // get the map container element
+    let mapContainer = document.getElementById("map");
+    
+    // get location from PR - if no location, we can hide the map
+    let locationString = document.thisItem.getProperty("location","");
+    if (locationString === "") {
+        mapContainer.style.display = "none";
+        return;
+    } else {
+        mapContainer.style.display = "block";
+    }
+    
+    let coordinates = locationString.split(',');
+    let latitude = coordinates[0];
+    let longitude = coordinates[1];
+    
+    // set caption on map - that way location is displayed regardless of whether map works
+    let mapCaption = document.getElementById("map-caption");
+    let captionHtml = "<strong>Latitude:</strong> " + latitude + " <strong>Longitude:</strong> " + longitude;
+    mapCaption.innerHTML = captionHtml;
+    
+    // get token from Variable
+    let tokenVariable = aras.newIOMItem("Variable","get");
+    tokenVariable.setProperty("name","labs_MapToken");
+    tokenVariable = tokenVariable.apply();
+    
+    let token = tokenVariable.getProperty("value","");
+    if (token === "") {
+        return alert("Bad token variable");
+    }
+    
+    mapboxgl.accessToken = token;
+    
+    // initialize map
+    var map = new mapboxgl.Map({
+        container: 'map',
+        style: 'mapbox://styles/mapbox/streets-v11'
+    });
+    
+    // create load function to place location marker
+    map.on('load', function() {
+        map.loadImage('../javascript/MapboxGL/mapbox-icon.png', function(error, image) {
+            if (error) throw error;
+            map.addImage('pointer', image);
+            map.addLayer({
+                "id": "points",
+                "type": "symbol",
+                "source": {
+                    "type": "geojson",
+                    "data": {
+                        "type": "FeatureCollection",
+                        "features": [{
+                            "type": "Feature",
+                            "geometry": {
+                                "type": "Point",
+                                "coordinates": [longitude, latitude]
+                            }
+                        }]
+                    }
+                },
+                "layout": {
+                    "icon-image": "pointer",
+                    "icon-size": 0.25
+                }
+            });
+        });
+    });
+});]]></method_code>
+  <method_type>JavaScript</method_type>
+  <name>labs_LoadLocationMap</name>
+ </Item>
+</AML>

Import/ProblemReporter/Import/Variable/labs_MapToken.xml

@@ -0,0 +1,5 @@
+<AML>
+ <Item type="Variable" id="EFC3EBA886CF462895385C15D69A9A08" action="add">
+  <name>labs_MapToken</name>
+ </Item>
+</AML>

Import/imports.mf

@@ -0,0 +1,6 @@
+<imports>
+  <package name="ProblemReporter" path="ProblemReporter\Import" />
+  <package name="com.aras.innovator.solution.PLM" path="PLM\Import">
+    <dependson name="com.aras.innovator.solution.ApplicationCore" />
+  </package>
+</imports>

ProblemReporter/index.html

@@ -83,10 +83,18 @@ <h1 class=" header_title">Problem Reporter</h1>
                 <label for="problemDate"><b>Date</b></label>
                 <input type="date" id="problemDate" name="problemDate" value="">
 
+                <label for="location"><b>Location</b></label>
+                <input type="text" id="location" name="location" maxlength="128"
+                    placeholder="Enter your Address"></input>
+                <iframe width="100%" style="min-height: 300px" id="gmap"
+                    src="https://maps.google.com/maps?t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
+                    scrolling="no"></iframe>
+
+
+
                 <label for="description"><b>Description</b></label>
                 <textarea id="description" placeholder="Describe the problem"></textarea>
 
-
                 <input type="file" id="imageUpload" onchange="getImage();" accept="image/*"></input>
                 <button id="photoButton" onclick="document.getElementById('imageUpload').click(); return false;">
                 </button>

ProblemReporter/scripts/app.js

@@ -26,6 +26,8 @@ function initialize() {
         }
     };
 
+    initLocationService();
+
     // Checking if there is local storage
     if (window.localStorage) {
         database = window.localStorage.getItem("database");
@@ -211,17 +213,19 @@ function getImage() {
  * Get's the user's location and logs it to the console
  */
 function getLocation() {
-    var location = null;
-    if (navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition(function (position) {
-            location = "Latitude: " + position.coords.latitude +
-                " - Longitude: " + position.coords.longitude;
-        });
-    } else {
-        console.error = "Geolocation is not supported by this browser.";
-    };
-
-    return location;
+    return new Promise(function (resolve) {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(resolve, resolve);
+        } else {
+            console.error("Geolocation is not supported by this browser.");
+            resolve(null);
+        };
+    }).then(function (position) {
+        if (position !== null && position !== undefined && position.code !== 1) {
+            return position.coords.latitude + "," + position.coords.longitude;
+        }
+        return null;
+    });
 }
 
 /**
@@ -235,7 +239,7 @@ function submitReport() {
     var title = document.getElementById("title").value;
     var description = document.getElementById("description").value;
     var problemDate = document.getElementById("problemDate").value;
-    var location = getLocation();
+    var location = document.getElementById("location").value;
     var image = getImage();
 
     return new Promise(function (resolve, reject) {
@@ -272,7 +276,7 @@ function submitReport() {
         }
 
         if (location !== null) {
-            body["location"] = loc;
+            body["location"] = location;
         }
 
         body = JSON.stringify(body);
@@ -439,6 +443,14 @@ function showUserReports() {
             card.appendChild(document.createTextNode(problemReport.title));
             card.appendChild(document.createElement("br"));
 
+            if (problemReport.location !== undefined && problemReport.location !== null && problemReport.location.length !== 0) {
+                var locationLink = document.createElement("a");
+                locationLink.innerText = problemReport.location;
+                locationLink.setAttribute("href", generateLocationLink(problemReport.location));
+                locationLink.setAttribute("target", "_blank");
+                card.appendChild(locationLink);
+            }
+
             styleNode = document.createElement("div");
             textNode = document.createTextNode(problemReport.state);
             styleNode.appendChild(textNode);
@@ -496,4 +508,38 @@ function generateNewGuid() {
     }
     var crypto = window.crypto || window.msCrypto;
     return 'xxxxxxxxxxxx4xxx8xxxxxxxxxxxxxxx'.replace(/x/g, randomDigit).toUpperCase();
+}
+
+function generateLocationLink(location) {
+    const googleMapsEmbedLink = "https://maps.google.com/maps?t=&ie=UTF8&iwloc=";
+
+    if (location === null || location === undefined || location.length == 0) {
+        return googleMapsEmbedLink;
+    }
+
+    return googleMapsEmbedLink + "&q=" + encodeURI(location);
+}
+
+function generateEmbedLocationLink(location) {
+    return generateLocationLink(location) + "&output=embed";
+}
+
+
+function updateLocation() {
+    var mapFrame = document.getElementById("gmap");
+    var location = document.getElementById('location').value;
+    var src = generateEmbedLocationLink(location);
+    mapFrame.setAttribute("src", src);
+}
+
+
+function initLocationService() {
+    var locationInputElement = document.getElementById('location');
+    locationInputElement.addEventListener("input", updateLocation);
+    locationInputElement.addEventListener("change", updateLocation);
+    getLocation().then(function (coordinates) {
+        //TODO convert coordinates to address using google api. 
+        locationInputElement.value = encodeURI(coordinates);
+        updateLocation();
+    })
 }