https://timetable.bcgweb.co.uk/Recent content on Bruce's Hugo SiteHugoen-usSun, 28 Jan 2018 21:55:52 +0100https://timetable.bcgweb.co.uk/subjects/timetable/Sun, 28 Jan 2018 21:55:52 +0100https://timetable.bcgweb.co.uk/subjects/timetable/<p>A hugo experiment in timetable management via js <br /> <div class="options"> <div class="option"> <label for="slot-title">Slot Title</label> <input id="slot-title" name="slot-title" type='checkbox' checked/> </div> <div class="option"> <label for="slot-time">Slot Time</label> <input id="slot-time" name="slot-time" type='checkbox' checked/> </div> <div class="option"> <label for="slot-teacher">Slot Teacher</label> <input id="slot-teacher" name="slot-teacher" type='checkbox' checked/> </div> </div> <div class="timetable"> <div class="day"> <div class="title">Monday</div> <div class="slot house" data-start="08:50" data-end="09:04"> <span class='name'><strong>House Time</strong></span> <span class='timings'>[08:50 - 09:04]</span> <div class="theclass"> <span class="class"><span class="teacher">with Miss Maciver</span> </div> </div> <div class="slot " data-start="09:04" data-end="09:52"> <span class='name'><strong>Period 1</strong></span> <span class='timings'>[09:04 - 09:52]</span> <div class="theclass"> <span class="class">Biology</span><span class="teacher"> with Mrs Johnson</span> </div> </div> <div class="slot study" data-start="09:52" data-end="10:40"> <span class='name'><strong>Period 2</strong></span> <span class='timings'>[09:52 - 10:40]</span> <div class="theclass"> <span class="class">Study</span> </div> </div> <div class="slot study" data-start="10:40" data-end="11:28"> <span class='name'><strong>Period 3</strong></span> <span class='timings'>[10:40 - 11:28]</span> <div class="theclass"> <span class="class">Study non-timetabled</span> </div> </div> <div class="slot break" data-start="11:28" data-end="11:43"> <span class='name'><strong>Break</strong></span> <span class='timings'>[11:28 - 11:43]</span> </div> <div class="slot " data-start="11:43" data-end="12:31"> <span class='name'><strong>Period 4</strong></span> <span class='timings'>[11:43 - 12:31]</span> <div class="theclass"> <span class="class">English</span><span class="teacher"> with Mr Charles</span> </div> </div> <div class="slot " data-start="12:31" data-end="13:19"> <span class='name'><strong>Period 5</strong></span> <span class='timings'>[12:31 - 13:19]</span> <div class="theclass"> <span class="class">English</span><span class="teacher"> with Mr Charles</span> </div> </div> <div class="slot lunch" data-start="13:19" data-end="14:09"> <span class='name'><strong>Lunch</strong></span> <span class='timings'>[13:19 - 14:09]</span> </div> <div class="slot " data-start="14:09" data-end="14:57"> <span class='name'><strong>Period 6</strong></span> <span class='timings'>[14:09 - 14:57]</span> <div class="theclass"> <span class="class">Mathematics</span><span class="teacher"> with Ms Johnston</span> </div> </div> <div class="slot " data-start="14:57" data-end="15:45"> <span class='name'><strong>Period 7</strong></span> <span class='timings'>[14:57 - 15:45]</span> <div class="theclass"> <span class="class">Mathematics</span><span class="teacher"> with Ms Johnston</span> </div> </div> </div> <div class="day"> <div class="title">Tuesday</div> <div class="slot house" data-start="08:50" data-end="09:04"> <span class='name'><strong>House Time</strong></span> <span class='timings'>[08:50 - 09:04]</span> <div class="theclass"> <span class="class"><span class="teacher">with Mrs Black</span> </div> </div> <div class="slot study" data-start="09:04" data-end="09:52"> <span class='name'><strong>Period 1</strong></span> <span class='timings'>[09:04 - 09:52]</span> <div class="theclass"> <span class="class">Study</span> </div> </div> <div class="slot study" data-start="09:52" data-end="10:40"> <span class='name'><strong>Period 2</strong></span> <span class='timings'>[09:52 - 10:40]</span> <div class="theclass"> <span class="class">Study</span> </div> </div> <div class="slot " data-start="10:40" data-end="11:28"> <span class='name'><strong>Period 3</strong></span> <span class='timings'>[10:40 - 11:28]</span> <div class="theclass"> <span class="class">Chemistry</span><span class="teacher"> with Mrs McDowell</span> </div> </div> <div class="slot break" data-start="11:28" data-end="11:43"> <span class='name'><strong>Break</strong></span> <span class='timings'>[11:28 - 11:43]</span> </div> <div class="slot " data-start="11:43" data-end="12:31"> <span class='name'><strong>Period 4</strong></span> <span class='timings'>[11:43 - 12:31]</span> <div class="theclass"> <span class="class">Biology</span><span class="teacher"> with Dr Walling</span> </div> </div> <div class="slot " data-start="12:31" data-end="13:19"> <span class='name'><strong>Period 5</strong></span> <span class='timings'>[12:31 - 13:19]</span> <div class="theclass"> <span class="class">Biology</span><span class="teacher"> with Dr Walling</span> </div> </div> <div class="slot lunch" data-start="13:19" data-end="14:09"> <span class='name'><strong>Lunch</strong></span> <span class='timings'>[13:19 - 14:09]</span> </div> <div class="slot study" data-start="14:09" data-end="14:57"> <span class='name'><strong>Period 6</strong></span> <span class='timings'>[14:09 - 14:57]</span> <div class="theclass"> <span class="class">Study non-timetabled</span> </div> </div> <div class="slot study" data-start="14:57" data-end="15:45"> <span class='name'><strong>Period 7</strong></span> <span class='timings'>[14:57 - 15:45]</span> <div class="theclass"> <span class="class">Study non-timetabled</span> </div> </div> </div> <div class="day"> <div class="title">Wednesday</div> <div class="slot house" data-start="08:50" data-end="09:04"> <span class='name'><strong>House Time</strong></span> <span class='timings'>[08:50 - 09:04]</span> <div class="theclass"> <span class="class"><span class="teacher">with Miss Maciver</span> </div> </div> <div class="slot " data-start="09:04" data-end="09:52"> <span class='name'><strong>Period 1</strong></span> <span class='timings'>[09:04 - 09:52]</span> <div class="theclass"> <span class="class">Mathematics</span><span class="teacher"> with Ms Johnston</span> </div> </div> <div class="slot " data-start="09:52" data-end="10:40"> <span class='name'><strong>Period 2</strong></span> <span class='timings'>[09:52 - 10:40]</span> <div class="theclass"> <span class="class">Mathematics</span><span class="teacher"> with Ms Johnston</span> </div> </div> <div class="slot " data-start="10:40" data-end="11:28"> <span class='name'><strong>Period 3</strong></span> <span class='timings'>[10:40 - 11:28]</span> <div class="theclass"> <span class="class">English</span><span class="teacher"> with Mr Charles</span> </div> </div> <div class="slot break" data-start="11:28" data-end="11:43"> <span class='name'><strong>Break</strong></span> <span class='timings'>[11:28 - 11:43]</span> </div> <div class="slot study" data-start="11:43" data-end="12:31"> <span class='name'><strong>Period 4</strong></span> <span class='timings'>[11:43 - 12:31]</span> <div class="theclass"> <span class="class">Study</span> </div> </div> <div class="slot study" data-start="12:31" data-end="13:19"> <span class='name'><strong>Period 5</strong></span> <span class='timings'>[12:31 - 13:19]</span> <div class="theclass"> <span class="class">Study</span> </div> </div> <div class="slot lunch" data-start="13:19" data-end="14:09"> <span class='name'><strong>Lunch</strong></span> <span class='timings'>[13:19 - 14:09]</span> </div> <div class="slot " data-start="14:09" data-end="14:57"> <span class='name'><strong>Period 6</strong></span> <span class='timings'>[14:09 - 14:57]</span> <div class="theclass"> <span class="class">Chemistry</span><span class="teacher"> with Mrs McDowell</span> </div> </div> <div class="slot " data-start="14:57" data-end="15:45"> <span class='name'><strong>Period 7</strong></span> <span class='timings'>[14:57 - 15:45]</span> <div class="theclass"> <span class="class">Chemistry</span><span class="teacher"> with Mrs McDowell</span> </div> </div> </div> <div class="day"> <div class="title">Thursday</div> <div class="slot house" data-start="08:50" data-end="09:04"> <span class='name'><strong>House Time</strong></span> <span class='timings'>[08:50 - 09:04]</span> <div class="theclass"> <span class="class"><span class="teacher">with Miss Maciver</span> </div> </div> <div class="slot " data-start="09:04" data-end="09:52"> <span class='name'><strong>Period 1</strong></span> <span class='timings'>[09:04 - 09:52]</span> <div class="theclass"> <span class="class">English</span><span class="teacher"> with Mr Charles</span> </div> </div> <div class="slot " data-start="09:52" data-end="10:40"> <span class='name'><strong>Period 2</strong></span> <span class='timings'>[09:52 - 10:40]</span> <div class="theclass"> <span class="class">English</span><span class="teacher"> with Mr Charles</span> </div> </div> <div class="slot " data-start="10:40" data-end="11:28"> <span class='name'><strong>Period 3</strong></span> <span class='timings'>[10:40 - 11:28]</span> <div class="theclass"> <span class="class">Mathematics</span><span class="teacher"> with Ms Johnston</span> </div> </div> <div class="slot break" data-start="11:28" data-end="11:43"> <span class='name'><strong>Break</strong></span> <span class='timings'>[11:28 - 11:43]</span> </div> <div class="slot " data-start="11:43" data-end="12:31"> <span class='name'><strong>Period 4</strong></span> <span class='timings'>[11:43 - 12:31]</span> <div class="theclass"> <span class="class">Biology</span><span class="teacher"> with Dr Walling</span> </div> </div> <div class="slot " data-start="12:31" data-end="13:19"> <span class='name'><strong>Period 5</strong></span> <span class='timings'>[12:31 - 13:19]</span> <div class="theclass"> <span class="class">Biology</span><span class="teacher"> with Dr Walling</span> </div> </div> <div class="slot lunch" data-start="13:19" data-end="14:09"> <span class='name'><strong>Lunch</strong></span> <span class='timings'>[13:19 - 14:09]</span> </div> <div class="slot study" data-start="14:09" data-end="14:57"> <span class='name'><strong>Period 6</strong></span> <span class='timings'>[14:09 - 14:57]</span> <div class="theclass"> <span class="class">Study non-timetabled</span> </div> </div> <div class="slot study" data-start="14:57" data-end="15:45"> <span class='name'><strong>Period 7</strong></span> <span class='timings'>[14:57 - 15:45]</span> <div class="theclass"> <span class="class">Study non-timetabled</span> </div> </div> </div> <div class="day"> <div class="title">Friday</div> <div class="slot house" data-start="08:50" data-end="09:04"> <span class='name'><strong>House Time</strong></span> <span class='timings'>[08:50 - 09:04]</span> <div class="theclass"> <span class="class"><span class="teacher">with Miss Maciver</span> </div> </div> <div class="slot " data-start="09:00" data-end="09:48"> <span class='name'><strong>Period 1</strong></span> <span class='timings'>[09:00 - 09:48]</span> <div class="theclass"> <span class="class">blank</span><span class="teacher"> with </span> </div> </div> <div class="slot " data-start="09:48" data-end="10:36"> <span class='name'><strong>Period 2</strong></span> <span class='timings'>[09:48 - 10:36]</span> <div class="theclass"> <span class="class">PSE</span><span class="teacher"> with Mrs Boyd</span> </div> </div> <div class="slot study" data-start="10:36" data-end="11:24"> <span class='name'><strong>Period 3</strong></span> <span class='timings'>[10:36 - 11:24]</span> <div class="theclass"> <span class="class">blank</span> </div> </div> <div class="slot study" data-start="11:24" data-end="11:44"> <span class='name'><strong>Break</strong></span> <span class='timings'>[11:24 - 11:44]</span> </div> <div class="slot " data-start="11:44" data-end="12:32"> <span class='name'><strong>Period 4</strong></span> <span class='timings'>[11:44 - 12:32]</span> <div class="theclass"> <span class="class">Chemistry</span><span class="teacher"> with Mrs McDowell</span> </div> </div> <div class="slot " data-start="12:32" data-end="13:20"> <span class='name'><strong>Period 5</strong></span> <span class='timings'>[12:32 - 13:20]</span> <div class="theclass"> <span class="class">Chemistry</span><span class="teacher"> with Mrs McDowell</span> </div> </div> <div class="slot blank" data-start="13:20" data-end="14:09"> <span class='name'><strong>n/a</strong></span> <span class='timings'>[13:20 - 14:09]</span> </div> <div class="slot blank" data-start="14:09" data-end="14:57"> <span class='name'><strong>n/a</strong></span> <span class='timings'>[14:09 - 14:57]</span> </div> <div class="slot blank" data-start="14:57" data-end="15:45"> <span class='name'><strong>n/a</strong></span> <span class='timings'>[14:57 - 15:45]</span> </div> </div> </div> <script> $(document).ready(function () { }); $("#slot-title").click(function() { let titleChecked = $("#slot-title").is(":checked"); console.log(titleChecked); $(".name").toggle(); }); $("#slot-time").click(function() { let timeChecked = $("#slot-time").is(":checked"); console.log(timeChecked); $(".timings").toggle(); }); $("#slot-teacher").click(function() { let teacherChecked = $("#slot-teacher").is(":checked"); console.log(teacherChecked); $(".teacher").toggle(); }); showCurrent(); setInterval(function() { showCurrent(); }, 60 * 1000); function showCurrent() { const d = new Date(); let day = d.getDay(); let hours = d.getHours(); let mins = d.getMinutes(); currentmins = hours * 60 + mins; console.log(day, hours, mins, currentmins); console.log(currentmins); $(function(){ $(".progress").remove(); $( ".timetable .day:nth-child(" + day + ") .slot" ).each(function( index ) { let start = $(this).attr("data-start"); let end = $(this).attr("data-end"); let startArray = start.split(":"); let endArray = end.split(":"); let startmins = parseInt(startArray[0]) * 60 + parseInt(startArray[1]); let endmins = parseInt(endArray[0]) * 60 + parseInt(endArray[1]); console.log(start, end, startArray, startmins, endmins); if (startmins<=currentmins && currentmins < endmins) { console.log("THIS ONE"); $(this).addClass('active'); let height = $(this).css('height'); console.log ("height is ", height); let percentthrough = (currentmins-startmins) / (endmins - startmins) * 100; console.log ("percent is ", percentthrough); $(".progress").remove(); $(this).append("<div class='progress' style='height:" + percentthrough + "%;'></div>"); } else { $(this).removeClass('active'); } }); $('html, body').animate({ scrollTop: $('.active').offset().top }, 'slow'); }); } </script> </p>