Skip to content

Instantly share code, notes, and snippets.

@mrprofessor

mrprofessor/index.html

Created July 27, 2019 09:07
Show Gist options
  • Save mrprofessor/4db70fda93701798b33bc6346e05e7bd to your computer and use it in GitHub Desktop.
Save mrprofessor/4db70fda93701798b33bc6346e05e7bd to your computer and use it in GitHub Desktop.
Download ZIP
uploader
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<!--<link rel="stylesheet" href="css/main.css">-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet">
<meta name="theme-color" content="#fafafa">
</head>
<style>
body {
padding-top: 1rem;
}
.header-content {
padding: 1rem;
text-align: center;
}
.nav {
margin-bottom: 1rem;
}
#runIdDisplay {
margin-bottom: 1rem;
}
.table {
max-height: 500px;
margin-bottom: 5rem;
}
.headerDiv {
display: flex;
justify-content: space-between
}
</style>
<body>
<div class="container">
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<div class="header-content">
<h2>
<span class="badge badge-pill badge-light">Roadnet portal</span>
</h2>
<!--<p class="lead">poc for roadnet data import</p>-->
</div>
<ul class="nav nav-pills justify-content-center" id="mainTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="upload-tab" data-toggle="tab" href="#upload" role="tab" aria-controls="upload" aria-selected="true">Upload Form</a>
</li>
<li class="nav-item">
<a class="nav-link" id="data-tab" data-toggle="tab" href="#dataTab" role="tab" aria-controls="profile" aria-selected="false">Data table</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="upload" role="tabpanel" aria-labelledby="upload-tab">
<div class="row" id="uploadForm">
<div class="col-12 col-md-6 offset-md-3">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Listen up!</strong> All fields are mandatory.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form action = "http://127.0.0.1:5000/api/routing/roadnet/" method = "POST"
enctype = "multipart/form-data" target="hiddenFrame">
<!--<form target="hiddenFrame" id="roadnetPost" onsubmit="postRoadnetData()">-->
<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title" id="title" class="form-control" required>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" rows="3"
name="description" required></textarea>
</div>
<div class="form-group">
<label for="team_id">Team Id</label>
<input type="text" name="team_id" id="team_id" class="form-control" required>
</div>
<div class="form-group">
<label for="period_id">Period Id</label>
<input type="text" name="period_id" id="period_id" class="form-control" required>
</div>
<div class="form-group">
<label for="roster_file_input">Upload roster</label>
<div class="input-group" id="roster_file_input">
<div class="input-group-prepend">
<span class="input-group-text" id="addon2">
<i class="far fa-file-alt"></i>
</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="roster_file" name="roster_file" required>
<label class="custom-file-label" for="roster_file">Choose file</label>
</div>
</div>
</div>
<div class="form-group">
<label for="hierarchy_file_input">Upload hierarchy</label>
<div class="input-group" id="hierarchy_file_input">
<div class="input-group-prepend">
<span class="input-group-text" id="addon2">
<i class="fas fa-file-excel"></i>
</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="hierarchy_file" name="hierarchy_file" required>
<label class="custom-file-label" for="hierarchy_file">Choose file</label>
</div>
</div>
</div>
<div class="form-group">
<label for="roadnet_itinerary_file_input">Upload roadnet itinerary</label>
<div class="input-group" id="roadnet_itinerary_file_input">
<div class="input-group-prepend">
<span class="input-group-text" id="addon2">
<i class="far fa-file-alt"></i>
</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="roadnet_itinerary_file" name="roadnet_itinerary_file" required>
<label class="custom-file-label" for="roadnet_itinerary_file">Choose file</label>
</div>
</div>
</div>
<input type="submit" class="btn btn-success btn-block" value="Upload">
</form><!-- /form -->
<div class="alert alert-secondary alert-dismissible fade show" role="alert" style="margin-top: 1rem; margin-bottom: 2rem" >
<strong>CLI :</strong> flask seed_roadnet &lt;title&gt; &lt;team_id&gt; &lt;period_id&gt;
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.upload-tab -->
<div class="tab-pane fade" id="dataTab" role="tabpanel" aria-labelledby="data-tab">
<div class="row">
<div class="col-12 col-md-6 offset-md-3 text-center">
<span id="runIdDisplay"></span>
</div>
</div>
<form class="form-inline justify-content-center form-control-sm" onsubmit="return false">
<div class="form-group mx-sm-3 mb-2">
<label for="runId" class="sr-only">Password</label>
<input type="text" class="form-control" id="runId" placeholder="Enter Run Id">
</div>
<button id="runIdFind" class="btn btn-primary mb-2 btn-sm">Find</button>
</form>
<div class="row">
<div class="col-12">
<!--<details>-->
<div id="tableSpace" style="margin-top: 2rem">
<!--</details>-->
</div>
</div>
</div>
</div><!-- /.container -->
<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
<script src="script.js"></script>
</html>
Raw
script.js
"use strict";
// Global constants
const runUrl = "http://127.0.0.1:5000/api/routing/roadnet/"
const uploadForm = document.getElementById("uploadForm");
const dvTable = document.getElementById("tableSpace");
const runIdButton = document.getElementById("runIdFind");
const dataTab = document.getElementById("data-tab");
runIdButton.addEventListener("click", () => {
const runId = document.getElementById("runId").value;
let runData = getRunData(runId);
});
dataTab.addEventListener("click", () => {
getRunIds()
});
function buildDataTables(runData) {
dvTable.innerHTML = "";
GenerateTable(runData.data.roster[0], "Roster");
GenerateTable(runData.data.hierarchy[0], "Hierarchy");
GenerateTable(runData.data.itinerary[0], "itinerary");
}
function GenerateTable(runData, title) {
//Build an array containing Customer records.
var items = new Array();
items.push(Object.keys(runData[0]));
//items.push(["Customer Id", "Name", "Country"]);
for (let record of runData) {
items.push(Object.values(record));
}
//Create a HTML Table element.
const table = document.createElement("table");
const tableHead = document.createElement("thead");
const tableBody = document.createElement("tbody");
table.className = "table table-responsive table-striped table-bordered";
table.id = title.toLowerCase()
tableHead.className = "thead-dark";
//Get the count of columns.
const columnCount = items[0].length;
//Add the header row.
var thead_row = tableHead.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("th");
headerCell.innerHTML = items[0][i];
thead_row.appendChild(headerCell);
}
table.appendChild(tableHead);
//Add the data rows.
for (var i = 1; i < items.length; i++) {
let row = tableBody.insertRow(-1);
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = items[i][j];
}
}
table.appendChild(tableBody);
// Export button
const csvButton = document.createElement("button");
csvButton.className = "btn btn-outline-info btn-sm";
csvButton.innerHTML = "Export " + title.toLowerCase() + ".csv";
csvButton.style.margin = "0.25rem";
csvButton.addEventListener("click", () => {
exportTableToCSV(title.toLowerCase() + ".csv", "#" + table.id);
})
const header = document.createElement("h4");
const headerDiv = document.createElement("div");
headerDiv.appendChild(header);
headerDiv.appendChild(csvButton);
headerDiv.className = "headerDiv";
dvTable.appendChild(headerDiv);
header.innerHTML = title + " table"
// Append table to tableSpace
dvTable.appendChild(table);
}
function getRunData(id) {
fetch(runUrl + "find/" + id + "/")
.then(res => res.json())
.then(data => {
buildDataTables(data)
})
.catch(error => {
console.log(error) ;
})
}
function getRunIds() {
fetch(runUrl + "list/")
.then( res => res.json())
.then( res => {
const runIdDisplay = document.getElementById("runIdDisplay")
runIdDisplay.innerHTML = "";
for (let item of res.data) {
runIdDisplay.append(buildRunButton(item.id, item.title))
}
})
.catch(error => {
console.log(error);
})
}
function buildRunButton(runId, title) {
const runButton = document.createElement("button");
runButton.className = "btn btn-outline-secondary btn-sm";
runButton.innerHTML = title + " [" + runId + "] ";
runButton.style.margin = "0.25rem";
runButton.addEventListener("click", () => {
let runData = getRunData(runId);
})
return runButton;
}
// Got it from https://www.codexworld.com/export-html-table-data-to-csv-using-javascript/
function downloadCSV(csv, filename) {
// CSV file
const csvFile = new Blob([csv], {type: "text/csv"});
// Download link
const downloadLink = document.createElement("a");
// File name
downloadLink.download = filename;
// Create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Hide download link
downloadLink.style.display = "none";
// Add the link to DOM
document.body.appendChild(downloadLink);
// Click download link
downloadLink.click();
}
function exportTableToCSV(filename, tableQuery) {
const csv = [];
const rows = document.querySelectorAll(tableQuery + " tr");
for (var i = 0; i < rows.length; i++) {
var row = [], cols = rows[i].querySelectorAll("td, th");
for (var j = 0; j < cols.length; j++)
row.push(cols[j].innerText);
csv.push(row.join(","));
}
// Download CSV file
downloadCSV(csv.join("\n"), filename);
}
function postRoadnetData() {
const formData = {
title: document.getElementById("title").value,
description: document.getElementById("description").value,
team_id: document.getElementById("team_id").value,
period_id: document.getElementById("period_id").value,
roster_file: document.getElementById("roster_file").files[0],
hierarchy_file: document.getElementById("hierarchy_file").files[0],
roadnet_itinerary_file: document.getElementById("roadnet_itinerary_file").files[0]
}
console.log(formData);
fetch(runUrl, {
method: "post",
headers: {
'Access-Control-Allow-Origin': true
},
body: formData
})
.then(res => res.json())
.then(data => {
console.log(data)
})
.catch(error => {
console.log(error)
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment