<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>mpwo</title> <!-- Bootstrap Core CSS --> <link href="static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- MetisMenu CSS --> <link href="static/vendor/metisMenu/metisMenu.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="static/css/sb-admin-2.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <link rel="stylesheet" type="text/css" href="static/css/custom.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <!-- Navigation --> <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index">mpwo - My personal workouts</a> </div> <!-- /.navbar-header --> <ul class="nav navbar-top-links navbar-right"> <!-- /.dropdown --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a> </li> <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a> </li> <li class="divider"></li> <li><a href="login"><i class="fa fa-sign-out fa-fw"></i> Logout</a> </li> </ul> <!-- /.dropdown-user --> </li> <!-- /.dropdown --> </ul> <!-- /.navbar-top-links --> <div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse"> <ul class="nav" id="side-menu"> <li class="sidebar-search"> <div class="input-group custom-search-form"> <input type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <i class="fa fa-search"></i> </button> </span> </div> <!-- /input-group --> </li> <li class="active"> <a class="active" href="/"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a> </li> </ul> </div> <!-- /.sidebar-collapse --> </div> <!-- /.navbar-static-side --> </nav> <!-- Page Content --> <div id="page-wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">Dashboard</h1> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> <div class="row"> <div class="col-lg-3 col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="row"> <div class="col-xs-3"> <i class="fa fa-calendar fa-5x"></i> </div> <div class="col-xs-9 text-right"> <div class="huge">188</div> <div>Activities</div> </div> </div> </div> <a href="#"> <div class="panel-footer"> <span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span> <div class="clearfix"></div> </div> </a> </div> </div> <div class="col-lg-3 col-md-6"> <div class="panel panel-green"> <div class="panel-heading"> <div class="row"> <div class="col-xs-3"> <i class="fa fa-road fa-5x"></i> </div> <div class="col-xs-9 text-right"> <div class="huge">1850</div> <div>Km</div> </div> </div> </div> <a href="#"> <div class="panel-footer"> <span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span> <div class="clearfix"></div> </div> </a> </div> </div> <div class="col-lg-3 col-md-6"> <div class="panel panel-yellow"> <div class="panel-heading"> <div class="row"> <div class="col-xs-3"> <i class="fa fa-clock-o fa-5x"></i> </div> <div class="col-xs-9 text-right"> <div class="huge">6</div> <div>days</div> </div> </div> </div> <a href="#"> <div class="panel-footer"> <span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span> <div class="clearfix"></div> </div> </a> </div> </div> <div class="col-lg-3 col-md-6"> <div class="panel panel-red"> <div class="panel-heading"> <div class="row"> <div class="col-xs-3"> <i class="fa fa-fire fa-5x"></i> </div> <div class="col-xs-9 text-right"> <div class="huge">74 988 </div> <div>kcal</div> </div> </div> </div> <a href="#"> <div class="panel-footer"> <span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span> <div class="clearfix"></div> </div> </a> </div> </div> </div> </div> <!-- /.container-fluid --> <div class="container-fluid"> <div class="row"> </div> <div class="row"> <div class="col-lg-12"> <h2>Last activity</h2> </div> </div> <div class="row"> <div class="col-lg-8"> <div id='map'></div> </div> <div class="col-lg-4"> <h3>Name: <font id="filename"></font><br></h3> <p><strong>Start at:</strong> <font id="start"></font><br> <strong>Distance:</strong> <font id="distance"></font><br> <strong>Duration:</strong> <font id="duration"></font><br> <strong>Ave. speed:</strong> <font id="speed"></font><br> <strong>Max. speed:</strong> <font id="maxspeed"></font><br> <strong>Min. altitude:</strong> <font id="elevationmin"></font><br> <strong>Max. altitude:</strong> <font id="elevationmax"></font><br> </div> </div> </div> </div> <!-- /#page-wrapper --> </div> <!-- /#wrapper --> <!-- jQuery --> <script src="static/vendor/jquery/jquery.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="static/vendor/bootstrap/js/bootstrap.min.js"></script> <!-- Metis Menu Plugin JavaScript --> <script src="static/vendor/metisMenu/metisMenu.min.js"></script> <!-- Custom Theme JavaScript --> <script src="static/js/sb-admin-2.js"></script> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.3.1/gpx.min.js"></script> <script type="text/javascript"> var map = L.map('map').setView([45.450983, 4.386894], 21); L.tileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=646952101ecc401da329322439370a8b', { attribution: '© <a href="http://www.thunderforest.com/">Thunderforest</a>, © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', maxZoom: 22, apikey: '646952101ecc401da329322439370a8b' }).addTo(map); var gpx_file = '/gpx/20161227_140317.gpx' var gpx_url = 'http://' + location.host + gpx_file; new L.GPX(gpx_url, { async: true, marker_options: { startIconUrl: 'images/pin-icon-start.png', endIconUrl: 'images/pin-icon-end.png', shadowUrl: 'images/pin-shadow.png' }}).on('loaded', function(e) { var gpx = e.target; map.fitBounds(gpx.getBounds()); }).addTo(map); console.log('coucou'); function getData(){ var ip = location.host; $.getJSON('http://' + ip + '/get_gpxinfo' + gpx_file, function (data) { var json = JSON.stringify(data.result); var gpx_data = JSON.parse(json); $('#filename').text(gpx_data.filename); $('#start').text(gpx_data.start); $('#distance').text(gpx_data.distance); $('#duration').text(gpx_data.duration); $('#speed').text(gpx_data.averagespeed); $('#maxspeed').text(gpx_data.maxspeed); $('#elevationmin').text(gpx_data.elevationmin); $('#elevationmax').text(gpx_data.elevationmax); $('#uphill').text(gpx_data.uphill); $('#downhill').text(gpx_data.downhill); }); }; getData(); console.log('coucou2'); </script> </body> </html>