Commit db6199c4 authored by Jasin's avatar Jasin

Move stats to extra repo

parent fd12ab15
<!-- Modal -->
<div class="modal fade" id="AddLine" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Linie hinzufügen</h5>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Linienname</label>
<small id="emailHelp" class="form-text text-muted">Beispielsweise: 4A oder 34</small>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="4A">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
<button type="button" id="addBtn" class="btn btn-primary" data-dismiss="modal">Hinzufügen</button>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function()
{
$("#addBtn").click(function ()
{
let inputLineLabel = $("#exampleInputEmail1").val();
$("#exampleInputEmail1").val(""); //Clear the inputfield
dataLoader(inputLineLabel, findGetParameter("amount"), false);
});
});
</script>
\ No newline at end of file
body
{
background-color: #18bc9c !important;
}
.wrapper
{
margin: 10%;
}
\ No newline at end of file
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>StatsTest</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <style>body{background-color: #18bc9c;}.form-control{width: 100%;}.wrapper{background: white; height: 90%; margin: 2%; padding: 2%;}#methodInfo{font-family: 'Lato', sans-serif; color: grey;}button{width: 50%; margin-left: 25%; margin-top: 20px; margin-bottom: 2%; background-color: #18bc9c; color: white; border: 3px solid #18bc9c; border-radius: 25px; -webkit-transition: 0.3s ease-in-out !important; transition: 0.3s ease-in-out !important;}button:hover{background-color: white; color: #18bc9c; -webkit-transition: 0.3s ease-in-out !important; transition: 0.3s ease-in-out !important;}h4{margin-top: 4%; width: 100%; text-align: center; color: #18bc9c;}.h4Underline{width: 10%; background-color: #18bc9c; height: 3px; margin-top: 5px;}</style></head><body><div class="wrapper"> <div class="container"> <div class="row"> <button type="button" data-toggle="modal" data-target="#AddLine" class="button">Weitere Daten hinzufügen</button> </div></div><div class="container"> <canvas class="mainChart" id="myChart"></canvas> <div class="row"> <small id="methodInfo"></small> </div></div></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script><script>var myChart;function generateColorAsString(){/*Found: https://stackoverflow.com/questions/23095637/how-do-you-get-random-rgb-in-javascript*/ let o=Math.round, r=Math.random, s=255; return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ', 0.7)';}function addDataSet(delays, name){let color=generateColorAsString(); let Dataset={label: name, backgroundColor: color, borderColor: color, data: delays, fill: false}; chartConfig.data.datasets.push(Dataset); window.myChart.update();}function initChart(config){const ctx=document.getElementById('myChart').getContext('2d'); myChart=new Chart(ctx, config);}let chartConfig={type: 'line', data:{labels: [], datasets: []}, options:{title:{display: true}}};function dataLoader(lineLabel, amount, first){if(first===true){let methodInfoLabel=document.getElementById("methodInfo"); let method=findGetParameter("method"); let response=findGetParameter("data"); response=JSON.parse(response); console.log(response); let dataDelays=[]; for(let i=0; i < response.length; i++){dataDelays.push(response[i].delays);}let labels=[]; for(let e=0; e < findGetParameter("amount"); e++){labels.push(response[e].created);}chartConfig.data.labels=labels; initChart(chartConfig); addDataSet(dataDelays, findGetParameter("lineLabel")); switch (method){case "LineByTime": methodInfoLabel.textContent="Methode: Verspätung nach Linien sortiert. Alle erfassten Verspätungen pro Tag aufsummiert"; break; default: methodInfoLabel.textContent="Methode: Nicht erfasst.";}}else{let settings={"async": true, "crossDomain": true, "url": "https://rnv-monitor.de/public/server/getInfosForStats.php", "method": "GET", "data":{"lineLabel" : lineLabel, "amount": amount}}; $.ajax(settings) .done(function (response){ response=JSON.parse(response); console.log(response); let dataDelays=[]; for(let i=0; i < response.length; i++){dataDelays.push(response[i].delays);}if(first){let labels=[]; for(let e=0; e < amount; e++){labels.push(response[e].created);}chartConfig.data.labels=labels; initChart(chartConfig);}addDataSet(dataDelays, lineLabel);});}}function findGetParameter(parameterName){var result=null, tmp=[]; location.search .substr(1) .split("&") .forEach(function (item){tmp=item.split("="); if (tmp[0]===parameterName) result=decodeURIComponent(tmp[1]);}); return result;}</script><script>$( document ).ready(function(){dataLoader(null, null, true);});</script><?php require_once ("../../Views/AddLineModal.php");?></body></html>
\ No newline at end of file
.iconWrapper
{
display: inline-block;
font-size: 5vw; !important;
background: #18bc9c;
color: white;
border: #18bc9c 0.5vw solid;
border-radius: 50%;
padding: 0.5vw 1vw;
}
h4
{
vertical-align: middle;
}
\ No newline at end of file
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RNV - Monitor</title>
<link rel="stylesheet" href="../formStyle.css">
<link rel="stylesheet" href="404Style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<form id="stepByStepForm" class="form">
<h2 class="mainTitle">RNV - Monitor: Statistik</h2>
<hr>
<h4>Keine Treffer für Ihre Suche :(</h4>
<p>Für Ihre Suche konnten keine Ergebnisse gefunden werden</p>
<a href="../index.html">Zurück</a>
</form>
<!--<div class="iconWrapper"><i class="fas fa-bus-alt"></i></div>-->
</body>
</html>
\ No newline at end of file
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const submitButton = document.getElementById('validate');
const form = document.getElementById('stepByStepForm');
const dots = document.getElementsByClassName('progress-bar__dot');
const numberOfSteps = 3;
let currentStep = 1;
for(let i = 0 ; i < dots.length ; ++i)
{
dots[i].addEventListener('click', ()=>{
goToStep(i+1)
})
}
previousButton.onclick = goPrevious;
nextButton.onclick = goNext;
function goNext(e)
{
e.preventDefault();
currentStep += 1;
goToStep(currentStep);
}
function goPrevious(e)
{
e.preventDefault();
currentStep -= 1;
goToStep(currentStep);
}
function goToStep(stepNumber)
{
currentStep = stepNumber;
let inputsToHide = document.getElementsByClassName('step');
let inputs = document.getElementsByClassName(`step${currentStep}`);
let indicators = document.getElementsByClassName('progress-bar__dot');
for(let i = indicators.length-1; i >= currentStep ; --i)
{
indicators[i].classList.remove('full');
}
for(let i = 0; i < currentStep; ++i)
{
indicators[i].classList.add('full');
}
//hide all input
for (let i = 0; i < inputsToHide.length; ++i)
{
hide(inputsToHide[i]);
}
//only show the right one
for (let i = 0; i < inputs.length; ++i)
{
show(inputs[i]);
}
//if we reached final step
if(currentStep === numberOfSteps)
{
enable(previousButton);
disable(nextButton);
show(submitButton);
}
//else if first step
else if(currentStep === 1)
{
disable(previousButton);
enable(next);
hide(submitButton);
}
else
{
enable(previousButton);
enable(next);
hide(submitButton);
}
}
function enable(elem) {
elem.classList.remove("disabled");
elem.disabled = false;
}
function disable(elem)
{
elem.classList.add("disabled");
elem.disabled = true;
}
function show(elem)
{
elem.classList.remove('hidden');
}
function hide(elem)
{
elem.classList.add('hidden');
}
\ No newline at end of file
html {
background-color: #18bc9c;
font-family: 'Lato', sans-serif;
}
.hidden
{
display: none;
}
.mainTitle
{
font-family: 'Montserrat', sans-serif;
text-align: center;
}
.button
{
width: 140px;
cursor: pointer;
padding: 1em;
border-radius: 0.2em;
border: none;
color: white;
font-weight: bold;
font-size: 1em;
transition: all .5s ease;
background-color: #ff8552;
}
.button:hover
{
background-color: #ff4f06;
}
.button.disabled
{
opacity: 0.5;
}
.button.disabled:hover
{
background-color: #ff8552;
}
.form
{
width: 20em;
margin: auto;
margin-top: 5em;
padding: 5em;
padding-top: 2em;
padding-bottom: 1em;
background-color: white;
color: #33312E;
border-radius: 0.2em;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.form .progress-bar
{
width: 100%;
list-style-type: none;
display: flex;
padding: 0;
justify-content: center;
margin-bottom: 3.5em;
}
.form .progress-bar li.progress-bar__dot
{
display: block;
width: 0.6em;
border-radius: 1000em;
height: 0.6em;
border: 0.2em solid #ff8552;
background-color: white;
cursor: pointer;
transition: all .5s ease;
}
.form .progress-bar li.progress-bar__dot.full
{
background-color: #ff8552;
}
.form .progress-bar li.progress-bar__connector
{
display: block;
width: 5em;
border-radius: 1000em;
height: 0.1em;
background-color: #ff8552;
margin-top: 0.45em;
}
.form label {
font-weight: bold;
font-size: 1.2em;
}
.form input, .form select
{
width: 100%;
padding: 1.3em;
margin-bottom: 0.5em;
box-sizing: border-box;
margin-top: 1em;
border: none;
border-radius: 0.5em;
background-color: #e6e6e6;
font-size: 1em;
}
.form input:focus, .form select:focus
{
border: none;
}
.form .button-group
{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 25px;
}
.form button#validate
{
margin: auto;
background-color: #1A936F;
width: 12em;
}
.form button#validate:hover
{
background-color: #12684e;
}
<?php
$generalStats = getGeneralStatsInformation();
header("Location: ../View/index.php/?data=" . $generalStats ."&lineLabel=" . $_GET['LineLabel'] . "&amount=" . $_GET['Time'] . "&method=" . $_GET['Method']);
function getGeneralStatsInformation()
{
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://rnv-monitor.de/public/server/getInfosForStats.php?lineLabel=" . $_GET['LineLabel'] . "&amount=" . $_GET['Time'],
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"cache-control: no-cache"
),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err)
{
header("Location: 404");
}
else
{
$jsonResponse = json_decode($response);
if ($jsonResponse === null)
{
header("Location: 404");
}
else if(count($jsonResponse) == 0)
{
header("Location: 404");
}
else
{
return strval($response);
//header("Location: ../main?data=" . $response ."&lineLabel=" . $_GET['LineLabel'] . "&amount=" . $_GET['Time'] . "&method=" . $_GET['Method']);
}
}
}
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RNV - Monitor</title>
<link rel="stylesheet" href="formStyle.css">
</head>
<body>
<form id="stepByStepForm" class="form" action="handleForm.php" method="get">
<h2 class="mainTitle">RNV - Monitor: Statistik</h2>
<ul class="progress-bar">
<li class="progress-bar__dot full"></li>
<li class="progress-bar__connector"></li>
<li class="progress-bar__dot"></li>
<li class="progress-bar__connector"></li>
<li class="progress-bar__dot"></li>
</ul>
<div class="step step1">
<div class="input-group">
<label for="LineLabel">Linienname</label>
<br>
<small>Beispielsweise: 4A oder 34</small>
<input type="text" placeholder="22" name="LineLabel" id="LineLabel">
</div>
</div>
<div class="step step2 hidden">
<div class="input-group">
<label for="Time">Zeitraum</label>
<br>
<small>Anzahl der Tage seit dem Start der Aufzeichnungen</small>
<input type="number" placeholder="10" name="Time" id="Time">
</div>
</div>
<div class="step step3 hidden">
<div class="input-group">
<label for="Method">Methode</label>
<select name="Method" id="Method">
<option value="LineByTime">Nach Linien sortiert, alle Verspätungen addiert pro Tag</option>
<option disabled class="disabled" value="LineByTime">Nach Zeitpunkten sortiert (Bald Verfügbar)</option>
<option disabled class="disabled" value="LineByTime">Nach Haltestellen sortiert (Bald Verfügbar)</option>
</select>
</div> <div class="iconWrapper"><i class="fas fa-bus-alt"></i></div>
</div>
<div class="button-group">
<button id="previous" class="disabled button" disabled>
Zurück
</button>
<button id="next" class="button">
Weiter
</button>
</div>
<div class="button-group">
<button id="validate" type="submit" class="hidden button">
Zeig mir die Statistik
</button>
</div>
<br>
<small>Credit: inspired by <a href="https://codepen.io/chayuan/">Gwenaël Robert</a></small>
</form>
<script src="formScript.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</body>
</html>
\ No newline at end of file
<?php
header("Location: form");
die();
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="Jasin Goldkorn">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/normalize.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="cardDeckStyle.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="wrapper">
<div class="card-group">
<div class="card">
<div class="card-body">
<h5 class="card-title">Gesamt Verspätungen</h5>
<p class="card-text">Eine Statistik über verschiedene Linien mit ihren Verspätungen addiert pro Tag.</p>
<a href="generalStats" class="btn btn-success">Los geht's!</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Verspätungen Heute</h5>
<p class="card-text">Stastistik über alle Verspätungen von Linien an einem Tag. Coming soon.</p>
<button class="btn btn-success" disabled>Los geht's!</button>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Gesamt Fahrtausfälle</h5>
<p class="card-text">Eine Statistik über alle Fahrtausfälle verschiedener Linien. Coming soon.</p>
<button class="btn btn-success" disabled="">Los geht's!</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment