From cee809fc63edb18262721939403f45782e7ba5cc Mon Sep 17 00:00:00 2001 From: Eliah Rebstock <elireb54@outlook.com> Date: Fri, 8 Dec 2017 03:58:52 +0100 Subject: [PATCH] Add info traffic --- index.php | 6 ++--- src/index.js | 47 +--------------------------------- src/style.css | 3 +-- src/traffic.js | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++ traffic.php | 16 ++++++++++++ 5 files changed, 89 insertions(+), 51 deletions(-) create mode 100644 src/traffic.js create mode 100644 traffic.php diff --git a/index.php b/index.php index a94c309..3a51a08 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 f00e982..58d8367 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 38751e2..e4cf55f 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 0000000..85f44ca --- /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 0000000..46b4c01 --- /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> -- GitLab