Create a hourly charge schedule based off of user input, plug in or build?
I am building a charge schedule off of the user input for my reflection and I am stuck on whether to try find and adapt a plug in, or build it myself.
The schedule is a solar charge schedule to charge electric cars between the hours of 7am and 16pm. There are 6 cars and 6 solar chargers.
I have built the first table where the user inputs the car registration, the amount of miles left, the amount of miles needed for the next journey and the time they need to leave for that journey.
The schedule must take in to account the above and then generate a charge time table so each car is sufficiently charged for the next journey.
Each car has a maximum range of 250 miles and the cars charge at 44 miles per hour.
Here is the JSFiddle with the whole project: https://jsfiddle.net/Coxy/1r30xgjc/3/
// Charge Table
// name =reg & value = carname
var regss = [{
"name": "NP60UQQ",
"values": "Little White"
},
{
"name": "NP60UQS",
"values": "Little Grey"
},
{
"name": "NP60UQT",
"values": "The Tango"
},
{
"name": "NP60UQU",
"values": "The Gandalf"
},
{
"name": "NP60UQV",
"values": "Aqua"
},
{
"name": "NP60UQW",
"values": "Big Red"
}
]
$(document).ready(function() {
$('#table_id').DataTable();
});
$('#table_id').DataTable({
paging: false,
searching: false,
select: true
});
$("input[type='text']").change(function() {
//get that values
var regs = $(this).val().toUpperCase();
//check if have class reg
if ($(this).hasClass("reg")) {
//filter json array
var cars_name = $(regss)
.filter(function(i, n) {
return n.name === regs;
});
//check if retrn value is > 0
if (cars_name.length > 0) {
//add value
$(this).closest("tr").find(".name").text(cars_name[0].values)
//hide
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
// console.log(cars_name[0].values)
} else {
//put mesage not valid
$(this).closest("tr").find(".name").text("Not a valid Registration")
}
}
});
$("input[type='time']").change(function() {
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
});
$(".reset").click(function() {
$(".answer").html("");
$("input").show();
$('.ltime').val('').prop('disabled', true);
});
$(".confirm").click(function() {
//loop through tr
$("#table_id tbody tr").each(function() {
//check reg value is null
if ($(this).find(".reg").val() == "") {
$(this).find(".name").text("Please enter valid Registration")
}
//get value
var cmra = $(this).find(".cmr").val()
var mtnc = $(this).find(".mtnc").val()
if ((cmra != null && cmra != "") && (mtnc != null && mtnc != "")) {
//calculate
var miles = Math.ceil((parseInt(mtnc - cmra)) / 44);
//console.log(miles)
$(this).find(".charge").text(miles)
} else if (cmra == null || cmra == "") {
$(this).find(".charge").text("Please enter the current miles left")
} else if (mtnc == null || mtnc == "") {
$(this).find(".charge").text("Please enter the miles needed for next trip")
}
})
});
// Get leave time
// $(".confirm").click(function() {
// var car_test = $("#car-1-7").val();
// var lt_time = $(".time").val();
// car_test = lt_time;
// });
$( ".leave-input")
$(".confirm").click(function() {
var value = $( ".leave-input" ).val();
$( "#car-1-7" ).text( value );
})
// Generate time table
$('generate-time-table').click(function() {
})
Here is an example I have been given that will hopefully help explain what I mean.
I have looked on Stack and can't seem a similar question, and I have looked for plug ins that may (with some adapting) be able to do this but haven't found any I think will work.
Any ideas or pointers would be really be appreciated, I am quite new to JS and this I feel is a bit beyond my scope and I definitely need advice/help with this.
Thanks for your time.
<table id="table_id_2" class="table">
<thead>
<tr>
<th id="car">Car</th>
<th id="7">7 - 8</th>
<th id="8">8 - 9</th>
<th id="9">9 - 10</th>
<th id="10">10 - 11</th>
<th id="11">11- 12</th>
<th id="12">12 -13</th>
<th id="13">13 - 14</th>
<th id="14">14 - 15</th>
<th id="15">15 - 16</th>
<th id="16">16 - 17</th>
<th id="exit_miles">Exit Miles</th>
</tr>
</thead>
<tbody>
<tr>
<td id="car-1">Car 1</td>
<td id="car-1-7" class="charging not_charging">Test</td>
<td id="car-1-8" class="charging not_charging">Test</td>
<td id="car-1-9" class="charging not_charging">Test</td>
<td id="car-1-10" class="charging not_charging">Test</td>
<td id="car-1-11" class="charging not_charging">Test</td>
<td id="car-1-12" class="charging not_charging">Test</td>
<td id="car-1-13" class="charging not_charging">Test</td>
<td id="car-1-14" class="charging not_charging">Test</td>
<td id="car-1-15" class="charging not_charging">Test</td>
<td id="car-1-16" class="charging not_charging">Test</td>
<td id="car-1-exit-miles">60</td>
</tr>
<tr>
<td id="car-2">Car 2</td>
<td id="car-2-7" class="charging not_charging">Test</td>
<td id="car-2-8" class="charging not_charging">Test</td>
<td id="car-2-9" class="charging not_charging">Test</td>
<td id="car-2-10" class="charging not_charging">Test</td>
<td id="car-2-11" class="charging not_charging">Test</td>
<td id="car-2-12" class="charging not_charging">Test</td>
<td id="car-2-13" class="charging not_charging">Test</td>
<td id="car-2-14" class="charging not_charging">Test</td>
<td id="car-2-15" class="charging not_charging">Test</td>
<td id="car-2-16" class="charging not_charging">Test</td>
<td id="car-2-exit-miles">60</td>
</tr>
<tr>
<td id="car-3">Car 3</td>
<td id="car-3-7" class="charging not_charging">Test</td>
<td id="car-3-8" class="charging not_charging">Test</td>
<td id="car-3-9" class="charging not_charging">Test</td>
<td id="car-3-10" class="charging not_charging">Test</td>
<td id="car-3-13" class="charging not_charging">Test</td>
<td id="car-3-12" class="charging not_charging">Test</td>
<td id="car-3-13" class="charging not_charging">Test</td>
<td id="car-3-14" class="charging not_charging">Test</td>
<td id="car-3-15" class="charging not_charging">Test</td>
<td id="car-3-16" class="charging not_charging">Test</td>
<td id="car-3-exit-miles">60</td>
</tr>
<tr>
<td id="car-4" >Car 4</td>
<td id="car-4-7" class="charging not_charging">Test</td>
<td id="car-4-8" class="charging not_charging">Test</td>
<td id="car-4-9" class="charging not_charging">Test</td>
<td id="car-4-10" class="charging not_charging">Test</td>
<td id="car-4-11" class="charging not_charging">Test</td>
<td id="car-4-12" class="charging not_charging">Test</td>
<td id="car-4-13" class="charging not_charging">Test</td>
<td id="car-4-14" class="charging not_charging">Test</td>
<td id="car-4-15" class="charging not_charging">Test</td>
<td id="car-4-16" class="charging not_charging">Test</td>
<td id="car-4-exit-miles">60</td>
</tr>
<tr>
<td id="car-5">Car 5</td>
<td id="car-5-7" class="charging not_charging">Test</td>
<td id="car-5-8" class="charging not_charging">Test</td>
<td id="car-5-9" class="charging not_charging">Test</td>
<td id="car-5-10" class="charging not_charging">Test</td>
<td id="car-5-11" class="charging not_charging">Test</td>
<td id="car-5-12" class="charging not_charging">Test</td>
<td id="car-5-13" class="charging not_charging">Test</td>
<td id="car-5-14" class="charging not_charging">Test</td>
<td id="car-5-15" class="charging not_charging">Test</td>
<td id="car-5-16" class="charging not_charging">Test</td>
<td id="car-5-exit-miles">60</td>
</tr>
<tr>
<td id="car-6">Car 6</td>
<td id="car-6-7" class="charging not_charging">Test</td>
<td id="car-6-8" class="charging not_charging">Test</td>
<td id="car-6-9" class="charging not_charging">Test</td>
<td id="car-6-10" class="charging not_charging">Test</td>
<td id="car-6-11" class="charging not_charging">Test</td>
<td id="car-6-12" class="charging not_charging">Test</td>
<td id="car-6-13" class="charging not_charging">Test</td>
<td id="car-6-14" class="charging not_charging">Test</td>
<td id="car-6-15" class="charging not_charging">Test</td>
<td id="car-6-16" class="charging not_charging">Test</td>
<td id="car-6-exit-miles">60</td>
</tr>
</tbody>
</table>
To clarify I am trying to work out the functionality behind this. I have the table created in HTML already, with each cell having it's own id.
I am trying to work out how to: Check which car the leave time relates to, get the leave time, round it to the nearest hour, check how many hours charge it needs before the leave time. Then populate the schedule changing the background colour of the cells that are needed to charge. For example. Car 1 needs to charge for 3 hours and leaves at 12. The schedule would show car 1 row, 8 - 0, 9 - 10, 10 - 11 cells background colour has changed, the exit miles column shows how many miles charge the car has.
I hope this clarifies what I am trying to do.
Edit** Have manged to get the leave time rounded up or down, I am using numbers, not time at the minute. I have the amount of hours needed for charge.
I am now working on how to select the right table cell, and change the back ground colour for that cell, and any cells following it that need changing.
If anyone has any advice, or can at least point me in the right direction of how to do it, or a plug in to use I'd really appreciate the help.
I have made a few advancements on this, and this is the latest fiddle: https://jsfiddle.net/Coxy/bv5jct7n/13/
Solution
When user click on generate button you first need to loop through first(charge) table to get required data using $(this).find.. .Now , to calculate leaves get time input then use split to get the time in array i.e : a[0] for hrs , a[1] for minutes and so on .Then , subtract it with charge to get required leaves .
Now, to put these info inside another table use each loop again . But , here we will loop through tr > tds using tr:eq('+count+') which will loop one row at a time . Inside this we will need to use for loop to add background-color to required td. I have added comments in code so you can understand logic behind it .
Demo code :
var regss = [{
"name": "NP60UQQ",
"values": "Little White"
},
{
"name": "NP60UQS",
"values": "Little Grey"
},
{
"name": "NP60UQT",
"values": "The Tango"
},
{
"name": "NP60UQU",
"values": "The Gandalf"
},
{
"name": "NP60UQV",
"values": "Aqua"
},
{
"name": "NP60UQW",
"values": "Big Red"
}
]
$(document).ready(function() {
$('#table_id').DataTable();
});
$('#table_id').DataTable({
paging: false,
searching: false,
select: true
});
$("input[type='text']").change(function() {
var regs = $(this).val().toUpperCase();
if ($(this).hasClass("reg")) {
var cars_name = $(regss)
.filter(function(i, n) {
return n.name === regs;
});
if (cars_name.length > 0) {
$(this).closest("tr").find(".name").text(cars_name[0].values)
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
} else {
$(this).closest("tr").find(".name").text("Not a valid Registration")
}
}
});
$("input[type='time']").change(function() {
$(this).closest('td').find("span").show().text($(this).val());
$(this).hide();
});
$(".reset").click(function() {
$(".answer").html("");
$("input").show();
});
$(".confirm").click(function() {
$("#table_id tbody tr").each(function() {
if ($(this).find(".reg").val() == "") {
$(this).find(".name").text("Please enter valid Registration")
}
var cmra = $(this).find(".cmr").val()
var mtnc = $(this).find(".mtnc").val()
if ((cmra != null && cmra != "") && (mtnc != null && mtnc != "")) {
var miles = Math.ceil((parseInt(mtnc - cmra)) / 44);
$(this).find(".charge").text(miles)
} else if (cmra == null || cmra == "") {
$(this).find(".charge").text("Please enter the current miles left")
} else if (mtnc == null || mtnc == "") {
$(this).find(".charge").text("Please enter the mtnc left")
}
})
});
$(".generate").click(function() {
var count = 0;//for second table
//remove any bg color in td
$("#table_id_2 tbody td").css({
"background-color": ""
});
//loop through first table to get datas
$("#table_id tbody tr").each(function() {
//get required datas
var car1_name = $(this).find(".name").text();
var mtnc = $(this).find(".mtnc").val();
var charges = $(this).find(".charge").text();
var times = $(this).find('.time').val();
//get hours i.e : 11:30 so take "11"
var hrs = times.split(":")[0];
//get leaves
var leaves = parseInt(hrs - charges);
//loop through second table starting from tr eq 0
$("#table_id_2 tbody tr:eq(" + count + ")").each(function() {
$(this).find("td:eq(0)").text(car1_name);//set car_name
//if hrs = 11 and leaves = 2 so loop from 11 -10-9-8..
for (var i = hrs; i >= leaves; i--) {
//add bg to that td
$(this).find("td[value=" + i + "]").css({
"background-color": "yellow"
});;
}
// add exit miles
$(this).find(".exit").text(mtnc)
});
count++;//increment to go to next tr
})
});
$(".reset").click(function() {
$(".answer").html("");
$("input").show();
});.table {
border: 3px solid #000032;
width: 100%;
}
button {
padding: 10px;
border: none;
font: inherit;
color: white;
background-color: #000032;
margin: 5px;
}<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<div id="table-section" class="table-section">
<div>
<button class="confirm">Confirm</button>
<button class="reset" type="reset">Reset Reg</button>
<table id="table_id" class="table">
<thead>
<tr>
<th id="th-reg">Registration</th>
<th id="th-name">Name</th>
<th id="th-cmr">Current Miles Range</th>
<th id="th-cni">Miles needed for next trip</th>
<th id="th-tl">Hours to charge for next trip</th>
<th id="tpoc">Time Leaving</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="answer"></span><input class="reg question" id="car-1-reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-1-name" class="name value-reset"></td>
<td><span id="car-1-cmra" class="answer" type="number"></span><input id="car-1-cmr" class="cmr question" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-1-mtnc" class="answer" type="number"></span><input id="car-1-mtnc" class="mtnc question" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-1-charge-needed" class="charge"></td>
<td id="car-1-tl" class="tl"><span class="answer time-input" type="text"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-2-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-2-name" class="name"></td>
<td><span id="car-2-cmra" class="answer" type="number"></span><input id="car-2-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-2-mtnc" class="answer" type="number"></span><input id="car-2-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-2-charge-needed" class="charge"></td>
<td id="car-2-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-3-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-3-name" class="name"></td>
<td><span id="car-3-cmra" class="answer"></span><input id="car-3-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-3-mtnc" class="answer" type="number"></span><input id="car-3-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-3-charge-needed" class="charge"></td>
<td id="car-3-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-4-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-4-name" class="name"></td>
<td><span id="car-4-cmra" class="answer"></span><input id="car-4-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-4-mtnc" class="answer" type="number"></span><input id="car-4-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-4-charge-needed" class="charge"></td>
<td id="car-4-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-5-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-5-name" class="name"></td>
<td><span id="car-5-cmra" class="answer"></span><input id="car-5-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-5-mtnc" class="answer" type="number"></span><input id="car-5-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-5-charge-needed" class="charge"></td>
<td id="car-5-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
<tr>
<td><span class="answer"></span><input id="car-6-reg" class="reg" type="text" value="" placeholder="Enter Registration"></input>
</td>
<td id="car-6-name" class="name"></td>
<td><span id="car-6-cmra" class="answer"></span><input id="car-6-cmr" class="cmr" type="text" value="" placeholder="Enter Miles Left"></input>
</td>
<td><span id="car-6-mtnc" class="answer" type="number"></span><input id="car-6-mtnc" class="mtnc" type="text" value="" placeholder="Enter Miles needed"></input>
</td>
<td id="car-6-charge-needed" class="charge"></td>
<td id="car-6-tl" class="tl"><span class="answer" type="time"></span><input class="time" type="time" min="07:00" max="18:00" required></input>
</td>
</tr>
</tbody>
</table>
<button id="generate-time-table" class="generate">Generate Schedule</button>
</div>
</div>
<div id="schedule " class="schedule">
<table id="table_id_2" class="table">
<thead>
<tr>
<th id="car">Car</th>
<th id="7" value="7">7 - 8</th>
<th id="8" value="8">8 - 9</th>
<th id="9" value="9">9 - 10</th>
<th id="10" value="10">10 - 11</th>
<th id="11" value="11">11- 12</th>
<th id="12" value="12">12 -13</th>
<th id="13" value="13">13 - 14</th>
<th id="14" value="14">14 - 15</th>
<th id="15" value="15">15 - 16</th>
<th id="16" value="16">16 - 17</th>
<th id="exit_miles" class="exit">Exit Miles</th>
</tr>
</thead>
<tbody>
<!-- add attrr value to each td -->
<tr id="tr-car-1">
<td id="car-2">Car 1</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-1-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-2">Car 2</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-2-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-3">Car 3</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-3-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-4">Car 4</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-4-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-5">Car 5</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-5-exit-miles" class="exit">60</td>
</tr>
<tr>
<td id="car-6">Car 6</td>
<td id="7" value="7"></td>
<td id="8" value="8"></td>
<td id="9" value="9"></td>
<td id="10" value="10"></td>
<td id="11" value="11"></td>
<td id="12" value="12"></td>
<td id="13" value="13"></td>
<td id="14" value="14"></td>
<td id="15" value="15"></td>
<td id="16" value="16"></td>
<td id="car-6-exit-miles" class="exit">60</td>
</tr>
</tbody>
</table>
</div>Note : Your time input is not validating min and max you need to validate it using jquery so that user do not input beyond that time.
- How to fix Lambda function timeout when interacting with DynamoDB using AWS SDK v3 in Node.js?
- Count of duplicate console.log() resets when called from a different element
- createStore is @deprecated so im trying to replace with configurationStore
- finding a point and its angle on a cubic Bezier curve in JavaScript
- Count cell values only if another condition is met
- Understanding unique keys for array children in React.js
- What are the requirements for audio output in Chrome on Android?
- How to submit an ASP.NET Core Razor Pages form without reloading the page
- How do I fix CORS issue in Fetch API
- Why isn't it good non-compile scripting languages to use for intensive calculations?
- Send Sendgrid Email Without Subject
- How to remove required to an element using jQuery?
- How to format numbers as currency strings
- Trouble using require(); Needing to convert JS file to ES module
- I keep getting Exception: Invalid argument: replacement on a google Apps Script
- Append element as sibling after element?
- Why doesn't npm update install the latest nodemon version?
- Ellipsis in the middle of a text (Mac style)
- Finding all elements with a scroll
- How to get the mouse position relative to the window viewport in javascript?
- jQuery on click to check if it has a div with a certain class and then change the value of a different class
- Firebase deploy error: Neither apiKey nor config.authenticator provided (using Stripe)
- Detecting which input is focused React hooks
- How can I find out if a javascript iterator terminates early?
- Vuetify3 autocomplete with per-item tooltips not clickable
- Renaming Function Parameters with Babel Without Changing Other Identical Identifiers
- How to find npm duplicate packages?
- Color gradient as style on marker
- How to fill the whole canvas with specific color?
- Change onclick action with a Javascript function