diff --git a/index.php b/index.php
index a94c309b46093720df8a65c1e6259f145487ac20..3a51a08bc71ed71d907242c5fe1434465f8654c1 100644
--- 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">
diff --git a/src/index.js b/src/index.js
index f00e982a64aa5e0c1536d3e3f5caa237495bf8ca..58d8367a7e9bc40c875b068b117293570050309a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,52 +1,7 @@
-"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;
-var lonOffset = 1;
-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);
-
- 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");
-}
diff --git a/src/style.css b/src/style.css
index 38751e2cea8995c3ae604516354f1f89f3ccf900..e4cf55f97ff57108c1c8ba3bbdb9168f37272296 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,6 +1,5 @@
body {
- background-image: url("http://img15.hostingpics.net/pics/359157Damier50blanc50noir.png");
- background-size: cover;
+ background-color: lightblue;
}
#btn-action {
diff --git a/src/traffic.js b/src/traffic.js
new file mode 100644
index 0000000000000000000000000000000000000000..85f44ca8b94c4c1f25c9e340ba4328551704d3c9
--- /dev/null
+++ b/src/traffic.js
@@ -0,0 +1,68 @@
+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");
+}
diff --git a/traffic.php b/traffic.php
new file mode 100644
index 0000000000000000000000000000000000000000..46b4c015f3abc55ca0116ed66739348d67ee33a7
--- /dev/null
+++ b/traffic.php
@@ -0,0 +1,16 @@
+<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>