JSFiddle - React, Tailwind, and code Playground
by Parhum Khoshbakht
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">
<div id="js__tv-listing" class="tv-listing"></div>
<script>
/**
* Get URL parameter
* http://www.netlobo.com/url_query_string_javascript.html
*/
function gup( name ) {
name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
// get selected item count from url parameter
var count = (Number(gup('count')) || 1000);
// create groups
var groups = new vis.DataSet([
{id: 1, content: 'Truck 1'},
{id: 2, content: 'Truck 2'},
{id: 3, content: 'Truck 3'},
{id: 4, content: 'Truck 4'},
{id: 5, content: 'Truck 5'},
{id: 6, content: 'Truck 6'},
{id: 7, content: 'Truck 7'},
{id: 8, content: 'Truck 8'},
{id: 9, content: 'Truck 9'},
{id: 10, content: 'Truck 10'},
{id: 11, content: 'Truck 11'},
{id: 12, content: 'Truck 12'},
{id: 13, content: 'Truck 13'},
{id: 14, content: 'Truck 14'},
{id: 15, content: 'Truck 15'},
{id: 16, content: 'Truck 16'},
{id: 17, content: 'Truck 17'},
{id: 18, content: 'Truck 18'},
{id: 19, content: 'Truck 19'},
{id: 20, content: 'Truck 20'},
{id: 21, content: 'Truck 21'}
]);
// create items
var items = new vis.DataSet();
var order = 1;
var truck = 1;
for (var j = 0; j < 21; j++) {
var date = new Date();
for (var i = 0; i < count/10; i++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new...