From 919707adae9755e1fb49216cab5fd7e0ffe60a56 Mon Sep 17 00:00:00 2001 From: Kameron Kenny Date: Wed, 29 May 2019 17:32:53 -0400 Subject: [PATCH] css --- broadcast_timer/css/custom.css | 26 +++++- broadcast_timer/events.js | 5 + broadcast_timer/index.html | 161 +++++++++++++++++++-------------- broadcast_timer/main.js | 20 ++-- broadcast_timer/timerMath.js | 60 ++++++++---- 5 files changed, 172 insertions(+), 100 deletions(-) diff --git a/broadcast_timer/css/custom.css b/broadcast_timer/css/custom.css index 62370e0..7b3f3b4 100644 --- a/broadcast_timer/css/custom.css +++ b/broadcast_timer/css/custom.css @@ -22,6 +22,17 @@ body { table.events { width: 99%; } +.notes { + background: #000; + margin-top: 10px; + font-size: 1.8rem; + color: #fff; + max-width: 100%; } +.debug { + background: #000; + color: lime; + margin-top: 15px; + border: 1px solid lime; } .clock { display: none; font-size: 1.8rem; @@ -30,7 +41,7 @@ table.events { padding: 5px; margin-bottom: 0px; } .button { - border: 1px solid #666; + border: 1px solid #333; background-color: #4CAF50; margin-top: 10px; margin-bottom: 0px; @@ -43,13 +54,15 @@ table.events { max-width: 99%; padding: 0 5px; } .header { - background: #666; + background-color: #666; margin-top: 6rem; text-align: center; } +.header.columns { + background: #666; } .navbar { font-size: 3rem; font-weight: 600; - background-color: #222; + background: #222; /*display: none;*/ } .events { text-align: left; } @@ -57,7 +70,7 @@ table.events { /* Larger than phone */ @media (min-width: 550px) { .button { - border: 1px solid #666; + border: 1px solid #333; background-color: #4CAF50; margin-top: 10px; margin-bottom: 0px; @@ -67,6 +80,7 @@ table.events { .two-thirds.column { width: 68.8%; } .column, .columns { + background: transparent; margin-left: 3px; } .clock-wrapper { display: block; @@ -80,7 +94,9 @@ table.events { padding: 5px; margin-bottom: 0px; } .header { - margin-top: 0rem; } + background-color: #666; + text-align: center; + margin-top: 6rem; } .events { text-align: left; } } diff --git a/broadcast_timer/events.js b/broadcast_timer/events.js index 60433b9..72bc55a 100644 --- a/broadcast_timer/events.js +++ b/broadcast_timer/events.js @@ -69,6 +69,11 @@ var events = [ "subject": "Monit w/ Gumby", "notes": "Demo Monit and how it can be useful for gumby" }, + { + "date": "May 29, 2019 16:25:00", + "subject": "Git Push", + "notes": "" + }, { "date": "May 30, 2019 00:00:01", "subject": "10-year anniversery", diff --git a/broadcast_timer/index.html b/broadcast_timer/index.html index 60a7bfa..dfc4b5a 100644 --- a/broadcast_timer/index.html +++ b/broadcast_timer/index.html @@ -1,88 +1,111 @@ - Broadcast Timer - - - - - - - - - - - - - - - - + Broadcast Timer + + + + + + + + + + + + + + + + +
-
-
-
-
-
Date:
-
+
+
+
+
+
Date:
+
+
+
+
Local:
+
+
+
+
UTC:
+
+
+
+
+
+ + +
+
+
-
-
Local:
-
-
-
-
UTC:
-
-
-
-
-
- - -
-
-
-
+ +
-
-
-
-
-
+
+
+ +
+
+
+ + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+ -
-
-
-
+ +
+
-
-
-
diff --git a/broadcast_timer/main.js b/broadcast_timer/main.js index f57c4b3..2ad471b 100644 --- a/broadcast_timer/main.js +++ b/broadcast_timer/main.js @@ -1,7 +1,9 @@ // meta -var version = "0.9.112" +var version = "0.10.2" var debug = false; +var initialized = false; + var style = 'green'; var eventStyle = "events"; @@ -9,6 +11,7 @@ var list; var counter_diff; var eventsLength = events.length; +var eventLength; var array_counter = 0; var currentObject = array_counter; @@ -44,7 +47,6 @@ function toggleDebug() { } } - function incArray() { if (array_counter < eventsLength) { array_counter++; @@ -108,8 +110,8 @@ var x = setInterval(function() { list = ""; - if (eventsLength > 20) { - var listLength = 20; + if (eventsLength > 15) { + var listLength = 15; var page = true; } else { var listLength = eventsLength; @@ -121,9 +123,11 @@ var x = setInterval(function() { for (i = 0; i < listLength; i++) { if (i === array_counter) { - eventStyle= "events-current"; + eventStyle = "events-current"; + cdFunction = countdown(events[i].date, "current"); } else { eventStyle = "events"; + cdFunction = countdown(events[i].date, "next"); } counter_diff = i - array_counter; @@ -134,7 +138,7 @@ var x = setInterval(function() { listLength++; } } else { - list += ""; + list += ""; } } @@ -148,8 +152,8 @@ var x = setInterval(function() { document.getElementById("utc_now").innerHTML = clock_dateUTC(); // - document.getElementById("countdown").innerHTML = countdown(currentDate); - document.getElementById("nextCountdown").innerHTML = countdown(nextDate); + document.getElementById("countdown").innerHTML = countdown(currentDate, "current"); + document.getElementById("nextCountdown").innerHTML = countdown(nextDate, "next"); if (debug === true) { document.getElementById("debug").innerHTML = "debug: " + debug + "
Version: " + version + "
Current time object: " + currentDate + "
Current subject object: " + currentSubject + "
current notes object: " + notes + "
next time object: " + nextDate + "
next subject object: " + nextSubject + "
current array counter: " + array_counter + "
Start Time: " + currentStart + "
End Time: " + currentEnd + "
" ; diff --git a/broadcast_timer/timerMath.js b/broadcast_timer/timerMath.js index 89a5198..90ceb9d 100755 --- a/broadcast_timer/timerMath.js +++ b/broadcast_timer/timerMath.js @@ -6,51 +6,67 @@ var style = "green"; // reset style var r; aLen = events.length; -function countdown(targetDate) { +function countdown(targetDate, current) { countDownDate = new Date(targetDate).getTime(); now = new Date().getTime(); distance = countDownDate - now; + if (current === "current") { + var nextCountDownDate = new Date(nextDate).getTime(); + var nextDistance = nextCountDownDate - now; + var nextDays = Math.floor(nextDistance / (1000 * 60 * 60 * 24)); + var nextHours = Math.floor((nextDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + var nextMinutes = Math.floor((nextDistance % (1000 * 60 * 60)) / (1000 * 60)); + var nextSeconds = Math.floor((nextDistance % (1000 * 60)) / 1000); + } days = Math.floor(distance / (1000 * 60 * 60 * 24)); hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); seconds = Math.floor((distance % (1000 * 60)) / 1000); - // Day or Days? if (days > 0) { - if (days == 1){ - days = (days + ' Day '); + if (days === 1){ + rDays = (days + ' Day '); } else { - days = (days + ' Days '); + rDays = (days + ' Days '); } } else { - days = ''; + rDays = ''; } // set style for countdown based on remaining time style = "green"; // reset style - if (days < 1 && hours < 1) { - //console.log(`in days and hours if statment`) - //console.log(`days = ${days} , hours = ${hours} , minutes = ${minutes}`) - if (minutes < 0) { - style = 'over'; - } else if (minutes < 15) { - style = 'warn'; - } else { - style = 'green'; + if (current === "current") { + if (nextDays < 1 && nextHours < 1) { + if (nextMinutes < 0) { + style = 'over'; + } else if (nextMinutes < 15) { + style = 'warn'; + } else { + style = 'green'; + } + } + } else { + if (days < 1 && hours < 1) { + if (minutes < 0) { + style = 'over'; + } else if (minutes < 15) { + style = 'warn'; + } else { + style = 'green'; + } } } - //console.log(`Style = ${style}`) - // pad single digits with a '0' prefix // when time is out, start counting up by inverting if (hours < 0) { hours = (-hours); + hours--; } if (hours < 10 && hours >= 0) { hours = ('0' + hours); @@ -58,6 +74,7 @@ function countdown(targetDate) { if (minutes < 0) { minutes = (-minutes); + minutes--; } if (minutes < 10 && minutes >= 0) { minutes = ('0' + minutes); @@ -65,13 +82,20 @@ function countdown(targetDate) { if (seconds < 0) { seconds = (-seconds); + seconds--; } if (seconds < 10 && seconds >= 0) { seconds = ('0' + seconds); } - var r = "
" + days + hours + ":" + minutes + ":" + seconds + "
"; + if (initialized === false && distance < 0) { + incArray(); + } else if (initialized === false) { + initialized = true; + decArray(); + } + var r = "
" + rDays + hours + ":" + minutes + ":" + seconds + "
"; return r; }
EventTimeTime Until
" + events[i].subject + "" + events[i].date + "" + countdown(events[i].date) + "
" + events[i].subject + "" + events[i].date + "" + cdFunction + "