Merge branch 'master' of git.iiens.net:null-pointer-exception/nuitinfo2017 into 404

2971b860 · Etienne BRATEAU · d23fadc6 · cee809fc · 2971b860 · 2971b860
--- a/index.php
+++ b/index.php
@@ -13,8 +13,8 @@
    </a>
 </div>
 <div style="width:100%"  class="btn-group">
-    <a href="404.html" style="width:30%; line-height:75px; margin-top:100px;" class="btn btn-lg btn-success text-center">
-        localisation
+    <a href="traffic.php" style="width:30%; line-height:75px; margin-top:100px;" class="btn btn-lg btn-success text-center">
+        Traffic
    </a>
    <a href="404.html" style="width:30%; line-height:75px; margin-top:100px; margin-left:40%" class="btn btn-lg btn-primary text-center">
        jeux
@@ -27,7 +27,7 @@
    <a href="404.html" style="width:30%; line-height:75px; margin-top:100px; margin-left:40%" class="btn btn-lg btn-warning text-center">
        Sortie prochaine
    </a>
-</div> 
+</div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-md-2 col-md-offset-5">

--- a/src/index.js
+++ b/src/index.js
-"use strict";
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap/dist/css/bootstrap-theme.min.css'
 import 'bootstrap'
+import './traffic'
 import './style.css'

 var latOffset = 1;
@@ -30,23 +30,3 @@ var getTraffic = (lat, lon) => {
 	//var url = "https://dev.virtualearth.net/REST/V1/Traffic/Incidents/" + coords.join(',') + "/true?" + options.join('&') + "&key=" + key;
 	var url = "src/traffic.php?coords=" + coords.join(',') + "&" + options.join('&');

-	console.log("latitude: " + lat);
-	console.log("longitude: " + lon);
-
-	fetch(url)
-	.then(response => {
-		console.log(response.json());
-	})
-	.catch(() => {
-		console.log("oups");
-	});
-}
-
-if ("geolocation" in navigator) {
-	navigator.geolocation.getCurrentPosition(function(position) {
-		getTraffic(position.coords.latitude, position.coords.longitude)
-	});
-}
-else {
-	console.log("Geolocation isn't available");
-}
--- a/src/style.css
+++ b/src/style.css
 body {
-    background-image: url("http://img15.hostingpics.net/pics/359157Damier50blanc50noir.png");
-    background-size: cover;
+    background-color: lightblue;
 }

 html, body {

--- a/src/traffic.js
+++ b/src/traffic.js
+import Vue from 'vue'
+
+var latOffset = 1;
+var lonOffset = 1;
+
+
+var traffic_table = new Vue({
+    el: '#traffic',
+    data: {
+        resources: []
+    },
+    template: '<table class="table"><thead><tr><th>Description de l\'accident</th></tr></thead>' +
+    '<tbody v-for="resource in resources">' +
+    '<tr><td>{{ resource.description }}</td></tr>' +
+    '</tbody></table>'
+})
+
+var getTraffic = (lat, lon) => {
+    /*
+    severity:	1: LowImpact
+                2: Minor
+                3: Moderate
+                4: Serious
+    type:	1: Accident
+            2: Congestion
+            3: DisabledVehicle
+            4: MassTransit
+            5: Miscellaneous
+            6: OtherNews
+            7: PlannedEvent
+            8: RoadHazard
+            9: Construction
+            10: Alert
+            11: Weather
+    */
+    var options = ["o=json", "severity=2", "type=2,3,4,7,8,9"];
+    var coords = [lat - latOffset, lon - lonOffset, lat + latOffset, lon + lonOffset];
+    //var url = "https://dev.virtualearth.net/REST/V1/Traffic/Incidents/" + coords.join(',') + "/true?" + options.join('&') + "&key=" + key;
+    var url = "src/traffic.php?coords=" + coords.join(',') + "&" + options.join('&');
+
+    console.log("latitude: " + lat);
+    console.log("longitude: " + lon);
+
+    let xmlhttp = new XMLHttpRequest();
+
+    xmlhttp.onreadystatechange = function() {
+        if (this.readyState === 4 && this.status === 200) {
+            var myArr = JSON.parse(this.responseText);
+            setup(myArr);
+        }
+    };
+
+    xmlhttp.open("GET", url, true);
+    xmlhttp.send();
+
+    function setup(response) {
+        traffic_table.resources = response.resourceSets[0].resources
+    }
+}
+
+if ("geolocation" in navigator) {
+    navigator.geolocation.getCurrentPosition(function(position) {
+        getTraffic(position.coords.latitude, position.coords.longitude)
+    });
+}
+else {
+    console.log("Geolocation isn't available");
+}
--- a/traffic.php
+++ b/traffic.php
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Nuit de l'info 2017</title>
+</head>
+<body>
+<div class="container">
+    <h1>Nuit de l'info 2017</h1>
+    <h2>Infos traffic</h2>
+    <p>Pour accéder aux infos traffic autour de vous, merci d'activer la géolocalisation de votre navigateur.</p>
+    <div id="traffic"></div>
+</div>
+<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<script src="assets/app.bundle.js"></script>
+</body>
+</html>