i have external json feed displays room bookings multiple rooms. problem shows timeslots booked , not show empty slots/appointments in data object. issue feed not contain empty timeslots have not been booked yet.
so came idea have preformatted html 'template' page data present - overlay json data in booked timeslots , leave empty timeslots static html.
idea name <td> elements class name denotes room id , timeslot in 24hr time. construct array based on <td> class names. filter json object bookings times , retrieve array contained room id , booking start time (amongst other necessary data).
next step loop through both arrays , if there match against room id , booking start time across both arrays, print data cell (which can accessed via class name). right now, having problems getting arrays same.
the 'simplified' json file (just selection of whole object):
var response={ "bookings": { "group_id": 12306, "name": "public meeting rooms", "url": "http:theurlfeed.from.libcal", "timeslots": [{ "room_id": "36615", "room_name": "meeting room 2a", "booking_label": "mahjong", "booking_start": "2016-01-20t10:00:00+10:00", "booking_end": "2016-01-20t11:00:00+10:00" }, { "room_id": "36615", "room_name": "meeting room 2a", "booking_label": "mahjong", "booking_start": "2016-01-20t11:00:00+10:00", "booking_end": "2016-01-20t12:00:00+10:00" }, { "room_id": "36616", "room_name": "meeting room 2b", "booking_label": "ielts", "booking_start": "2016-01-20t10:00:00+10:00", "booking_end": "2016-01-20t11:00:00+10:00" }, { "room_id": "36616", "room_name": "meeting room 2b", "booking_label": "recording", "booking_start": "2016-01-20t12:00:00+10:00", "booking_end": "2016-01-20t13:00:00+10:00" }, { "room_id": "36616", "room_name": "meeting room 2b", "booking_label": "luke", "booking_start": "2016-01-20t18:00:00+10:00", "booking_end": "2016-01-20t19:00:00+10:00" }], "last_updated": "2016-01-20t12:40:36+10:00" } } here html (for sake of simplification haven't shown complete structure):
<table border="1" id="rooms-table"> <thead><tr><th></th> <th>10am</th><th>11am</th><th>12pm</th><th>1pm</th><th>2pm</th><th>3pm</th><th>4pm</th><th>5pm</th><th>6pm</th><th>7pm</th></tr></thead> <tbody id="main-table-body"> <tr> <td>meeting room 2a</td> <td class="36615 10:00"></td> <td class="36615 11:00"></td> <td class="36615 12:00"></td> </tr> <tr> <td>meeting room 2b</td> <td class="36616 10:00"></td> <td class="36616 11:00"></td> <td class="36616 12:00"></td> </tr> <tr> </tbody> </table> and javascript (contains pseudo code @ bottom concepts have not yet coded):
//convert timestamp readable format , remove date var timeslots = response.bookings.timeslots; function gettime(timestamp) { var time = new date(timestamp); return [ time.gethours(), time.getminutes() ].map(function(time){ return ['', "0"][+(string(time).length < 2)] + string(time); }).join(':'); } for(var in timeslots) (function(timeslots){ timeslots.booking_start = gettime(timeslots.booking_start); timeslots.booking_end = gettime(timeslots.booking_end); })(timeslots[i]); console.log(response); var roomlist = new array; var tdclasslist; //function detect if timeslot booked or not //if booked, assigns booking name , changes bg color of cell $.each(response.bookings.timeslots, function(index, timeslot) { var roombooking = timeslot.room_id + ' ' + timeslot.booking_start; roomlist[roombooking] = roombooking; tdclasslist = $('td').map(function () { return $(this).attr('class'); }).get(); }); console.log(tdclasslist); console.log(roomlist); // code incomplete // need loop through both arrays , compare values , write css , html if match found across arrays /*if (roomlist == tdclassname) { $( "td" ).html(timeslot.booking_label) $( "td" ).css( "background-color", "red" ); } else { $( "td" ).html(""); }*/ here link working js fiddle showing elements in play: https://jsfiddle.net/coolwebs/l0ybd0dm/1/
my issue right array being created json object coming in key value pairs.
instead of returning:
["36615 10:00", "36615 11:00", "36615 12:00", "36615 30:00", ...] it returning:
[36615 10:00: "36615 10:00",36615 11:00: "36615 11:00", 36615 12:00: "36615 12:00", 36615 13:00: "36615 30:00", ...] um, doing wrong?
this far perfect or complete simplify process somewhat.
i don't see need create cell array. once have parsed incoming data, can loop on cells , matching right away.
i used simple object make room/start comparison.
// example var timeclasses ={"3456 02:00":true, "56854 11:00": true} then when loop through table it's simple check see if property matching cell classes exists
success: function(response) { var data = response.bookings.timeslots; var timeclasses = {}; var timeslots = data.map(function(item) { // parse dates item.booking_start = gettime(item.booking_start); item.booking_end = gettime(item.booking_end); // update hashmap timeclasses[item.room_id + ' ' + item.booking_start] = true; return item; }); $('tbody tr').each(function() { $(this).find('td:gt(0)').each(function() { var classname = $(this).attr('class'); if (timeclasses[classname]) { $(this).css('background', 'red') } }); }); } this intended give starting point. don't classes methodology ...especially space in them.
you need revisit how visualize full timeslot booking covers , need more logic apply cells in middle of each booking
Comments
Post a Comment