search

CRLSCSClub / CRLSTime

A clock for showing the CRLS schedule during the school day
6 stars 10 forks source link

Cookies for lunch #3

Closed dougmcg closed 5 years ago

dougmcg commented 7 years ago

Add the capability for the app to use cookies to remember which lunch the user has set, and set the schedule to that lunch when the app is next opened. Default to A lunch.

maxtkc commented 7 years ago

localStorage.setItem( , ) is a way that we can do the same thing slightly easier and more robust. This should make it work: PS: Can I have permissions to push to the repo? I could make a separate branch so that I wouldn't ruin anything. Then I wouldn't be pasting this here (:


<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
</head>
<body>

<canvas id="canvas"
style="background-color:#FFF">
</canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;
var smallerDimension = (window.innerWidth < window.innerHeight) ? window.innerWidth : window.innerHeight;
var radius = smallerDimension / 2 - 12;

window.addEventListener('resize', function(event) {
  clearTimeout(resizeTimeout);
  var resizeTimeout = setTimeout(function(){
    window.location.reload();
  }, 1500);
});

var imageObj = new Image();
imageObj.src = 'falcon_high_res2.png';

var delta = radius;
ctx.translate(delta, delta);
var radius = radius * 0.93

var smRadius = radius * 0.18;

// CRLSTime button
var upperLeftX = -radius * 0.88;
var upperLeftY = -radius * 0.88;
function drawCRLSTimeButton() {
  drawSmallCircle(upperLeftX, upperLeftY, smRadius, '#DDD');
  ctx.font = "bold " + radius*0.067 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  ctx.fillStyle = '#999';
  ctx.fillText("CRLSTime", upperLeftX, upperLeftY);
}

// Info/settings button
var upperRightX = radius * 0.88;
var upperRightY = -radius * 0.88;
function drawSettingsButton() {
  drawSmallCircle(upperRightX, upperRightY, smRadius, '#DDD');
  ctx.font = radius*0.2 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  ctx.fillStyle = '#999';
  ctx.fillText("", upperRightX, upperRightY);
}

// Lunch
function advanceLunchMode() {
  if (lunchMode == "A") {
    lunchMode = "B";
    schedule = scheduleB;
  }
  else if (lunchMode == "B") {
    lunchMode = "C";
    schedule = scheduleC;
    }
  else if (lunchMode == "C") {
    lunchMode = "A";
    schedule = scheduleA;
  }
  localStorage.setItem("lunch", lunchMode);
  drawLunchButton();
}

var lowerLeftX = -radius * 0.88;
var lowerLeftY = radius * 0.88;
function drawLunchButton() {
  drawSmallCircle(lowerLeftX, lowerLeftY, smRadius * .95, '#DDD');
  ctx.font = radius*0.2 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  ctx.fillStyle = '#999';
  ctx.fillText(lunchMode, lowerLeftX, lowerLeftY);
}

function removeLunchButton() {
  drawSmallCircle(lowerLeftX, lowerLeftY, smRadius * .95, '#FFF');
}

// Black/silver button
var lowerRightX = radius * 0.88;
var lowerRightY = radius * 0.88;
function drawBSButton() {
  drawSmallCircle(lowerRightX, lowerRightY, smRadius, '#DDD');
}

function drawSmallCircle(cx, cy, r, color) {
  ctx.beginPath();
  ctx.arc(cx, cy, r, 0, 2 * Math.PI, false);
  ctx.fillStyle = color; //'#DDD';
  ctx.fill();
  ctx.lineWidth = 0;
  ctx.strokeStyle = color; //'#DDD';
  ctx.stroke();
}

////////////////////// button logic //////////////////////
//Function to get the mouse position
function getMousePos(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left - delta,
        y: event.clientY - rect.top - delta
    };
}
//Function to check whether a point is inside a rectangle
function isInside(pos, rect){
    return pos.x > rect.x && pos.x < rect.x+rect.width && pos.y < rect.y+rect.height && pos.y > rect.y
}

//The rectangle should have x,y,width,height properties
var rect = {
    x:lowerLeftX - smRadius,
    y:lowerLeftY - smRadius,
    width:smRadius * 2,
    height:smRadius * 2
};
//Binding the click event on the canvas
canvas.addEventListener('click', function(evt) {
    var mousePos = getMousePos(canvas, evt);

    if (isInside(mousePos,rect)) {
        advanceLunchMode();
    }   
}, false);
//////////////////////////////////////////////////

function block(lbl,srt,ed) {
  return {label:lbl,start:srt};
}

function myDate(m, d) {
  return {month:m, day:d};
}

var today = new Date();

/////////////// schedule types //////////////////

// Table of period labels and start times
var scheduleA = [
block("morning",today.setHours(0,0,0,0)),
block("before",today.setHours(6,25,0,0)),
block("1",today.setHours(8,5,0,0)),
block("1-CM",today.setHours(9,25,0,0)),
block("CM",today.setHours(9,29,0,0)),
block("CM-2",today.setHours(9,44,0,0)),
block("2",today.setHours(9,48,0,0)),
block("2-LA",today.setHours(11,8,0,0)),
block("LA",today.setHours(11,12,0,0)),
block("LA-3",today.setHours(11,42,0,0)),
block("3",today.setHours(11,46,0,0)),
block("3-4",today.setHours(13,06,0,0)),
block("4",today.setHours(13,10,0,0)),
block("after",today.setHours(14,30,0,0)),
block("end",today.setHours(23,59,59,0))
];

var scheduleB = [
block("morning",today.setHours(0,0,0,0)),
block("before",today.setHours(6,25,0,0)),
block("1",today.setHours(8,5,0,0)),
block("1-CM",today.setHours(9,25,0,0)),
block("CM",today.setHours(9,29,0,0)),
block("CM-2",today.setHours(9,44,0,0)),
block("2",today.setHours(9,48,0,0)),
block("2-3",today.setHours(11,8,0,0)),
block("3",today.setHours(11,12,0,0)),
block("3-LB",today.setHours(11,52,0,0)),
block("LB",today.setHours(11,54,0,0)),
block("LB-3",today.setHours(12,24,0,0)),
block("3",today.setHours(12,26,0,0)),
block("3-4",today.setHours(13,6,0,0)),
block("4",today.setHours(13,10,0,0)),
block("after",today.setHours(14,30,0,0)),
block("end",today.setHours(23,59,59,0))
];

var scheduleC = [
block("morning",today.setHours(0,0,0,0)),
block("before",today.setHours(6,25,0,0)),
block("1",today.setHours(8,5,0,0)),
block("1-CM",today.setHours(9,25,0,0)),
block("CM",today.setHours(9,29,0,0)),
block("CM-2",today.setHours(9,44,0,0)),
block("2",today.setHours(9,48,0,0)),
block("2-3",today.setHours(11,8,0,0)),
block("3",today.setHours(11,12,0,0)),
block("3-LC",today.setHours(12,32,0,0)),
block("LC",today.setHours(12,36,0,0)),
block("LC-4",today.setHours(13,6,0,0)),
block("4",today.setHours(13,10,0,0)),
block("after",today.setHours(14,30,0,0)),
block("end",today.setHours(23,59,59,0))
];

var scheduleFinal12 = [
block("morning",today.setHours(0,0,0,0)),
block("before",today.setHours(6,25,0,0)),
block("1",today.setHours(8,5,0,0)),
block("1-CM",today.setHours(9,45,0,0)),
block("CM",today.setHours(9,50,0,0)),
block("CM-2",today.setHours(10,20,0,0)),
block("2",today.setHours(10,25,0,0)),
block("2-L",today.setHours(12,5,0,0)),
block("Lunch",today.setHours(12,10,0,0)),
block("after",today.setHours(12,45,0,0)),
block("end",today.setHours(23,59,59,0))
];

var scheduleFinal34 = [
block("morning",today.setHours(0,0,0,0)),
block("before",today.setHours(6,25,0,0)),
block("3",today.setHours(8,5,0,0)),
block("3-CM",today.setHours(9,45,0,0)),
block("CM",today.setHours(9,50,0,0)),
block("CM-4",today.setHours(10,20,0,0)),
block("4",today.setHours(10,25,0,0)),
block("4-L",today.setHours(12,5,0,0)),
block("Lunch",today.setHours(12,10,0,0)),
block("after",today.setHours(12,45,0,0)),
block("end",today.setHours(23,59,59,0))
];

var scheduleDelay1 = [
block("morning",today.setHours(0,0,0,0)),
block("before",today.setHours(9,32,0,0)),
block("Lunch",today.setHours(11,12,0,0)),
block("Lunch-3",today.setHours(11,42,0,0)),
block("3",today.setHours(11,46,0,0)),
block("3-4",today.setHours(12,24,0,0)),
block("4",today.setHours(12,28,0,0)),
block("4-1",today.setHours(13,6,0,0)),
block("1",today.setHours(13,10,0,0)),
block("1-2",today.setHours(13,48,0,0)),
block("2",today.setHours(13,52,0,0)),
block("after",today.setHours(14,30,0,0)),
block("end",today.setHours(23,59,59,0))
];

var schoolHolidays = [
myDate(2, 20),
myDate(2, 21),
myDate(2, 22),
myDate(2, 23),
myDate(2, 24),
myDate(4, 14),
myDate(4, 17),
myDate(4, 18),
myDate(4, 19),
myDate(4, 20),
myDate(4, 21),
myDate(5, 29)
];

var lunchMode = "A";
if(localStorage.lunch)
{
  lunchMode = localStorage.lunch;
}
schedule = scheduleA;

function isHoliday() {
  for (i = 0; i < schoolHolidays.length; i++) {
    if (schoolHolidays[i].month == today.getMonth() + 1 && schoolHolidays[i].day == today.getDate()) {
      return true;
    }
  }
  return false;
}

function isWeekend() {
  return today.getDay() == 0 || today.getDay() == 6;
}

function getPeriodIndex() {
    var now = new Date();
   // var day = now.getDay();
    for(index = 0; true; index++){
      if (now > schedule[index].start && now < schedule[index + 1].start) {
        return index;
      }
    } 
}

function getPeriodLength(i) {
  return (schedule[i + 1].start - schedule[i].start) / 60000;  // in minutes
}

drawCRLSTimeButton();

//drawSettingsButton();
//drawBSButton();

setInterval(drawClock, 1000);

function drawClock() {

  drawFace(ctx, radius);
  ctx.drawImage(imageObj, -radius*1.1/2, -1/2 * radius, radius, 1.27 * radius);
  var periodIndex = getPeriodIndex();
  var periodLabel = schedule[periodIndex].label;
  var periodLength = getPeriodLength(periodIndex);

  // when to display a normal clock
  if (periodLabel == "morning" || periodLabel == "after" || isWeekend() || isHoliday()){
      drawNumbersNormal(ctx, radius, 1, 12);
      drawSpecialLabel(ctx, radius, "");
      drawNormalTime(ctx, radius);
      removeLunchButton();
  } else // display school time
  {
      var interval = 1;
      if (periodLength > 20) interval = 5;
      if (periodLength > 60) interval = 10;
      drawNumbersCountDown(ctx, radius, interval, periodLength);
      drawPeriodLabel(ctx, radius, periodLabel);
      drawSpecialLabel(ctx, radius, "");
      drawSchoolTime(ctx, radius, periodIndex);
      drawLunchButton(); // comment out for  all school lunch
  }
}

function drawFace(ctx, radius) {
  var grad;

  // bg of face
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2*Math.PI);
    ctx.fillStyle = '#111111';
    ctx.fill();

  // outside ring
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, '#FFF');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();

  // inner hub
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.07, 0, 2*Math.PI);
  ctx.fillStyle = '#666';
  ctx.fill();
}

// ctx : canvas context
// radius of writable clock face
// incr : increment for numbering
// max : largest number on face (12 oclock position)
function drawNumbersNormal(ctx, radius, incr, max) {
  var ang;
  var num;
  ctx.font = radius*0.20 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = incr; num <= max; num += incr){
    ang = num * 2 * Math.PI / max;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.84);
    ctx.rotate(-ang);
    ctx.fillStyle = '#BBB';
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.84);
    ctx.rotate(-ang);
  }
}

// ctx : canvas context
// radius of writable clock face
// incr : increment for numbering
// max : largest number on face (12 oclock position)
function drawNumbersCountDown(ctx, radius, incr, max) {
  var ang;
  var num;
  ctx.font = radius*0.20 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = max - incr; num >= 0; num -= incr){
    ang = 2 * Math.PI - (num * 2 * Math.PI / max);
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.82);
    ctx.rotate(-ang);
    ctx.fillStyle = '#BBB';
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.82);
    ctx.rotate(-ang);
  }
}

function drawSpecialLabel(ctx, radius, label) {
  var ang;
  ctx.font = radius*0.25 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";

    ang = Math.PI;
    ctx.rotate(ang);
    ctx.translate(0, radius*0.35);
    ctx.rotate(-ang);
    ctx.fillStyle = "#499";
    ctx.fillText(label, 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.35);
    ctx.rotate(-ang);
}

function drawPeriodLabel(ctx, radius, label) {
  var ang;
  ctx.font = radius*0.45 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";

    ang = Math.PI;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.32);
    ctx.rotate(-ang);
    ctx.fillStyle = "#999";
    ctx.fillText(label, 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.32);
    ctx.rotate(-ang);
}

function drawNormalTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();

    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.55, radius*0.06, '#999');
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.83, radius*0.06, 'silver');
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02, 'red');
}

function drawSchoolTime(ctx, radius, index){
    var now = new Date();
    var second = now.getSeconds();

    // minute
    var minute = (now - schedule[index].start)/60000;
    minute = minute/getPeriodLength(index);
    minute = minute * 2 * Math.PI;
    drawHand(ctx, minute, radius*0.83, radius*0.05, 'silver');

    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02, 'red');
}

// ctx : canvas context
// pos : angle out of 360, 90 is east
// length, width : self expalnatory
// color : CSS color ('#FF0000' is red) 
function drawHand(ctx, pos, length, width, color) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

</body>
</html>
dougmcg commented 7 years ago

Right - pasting in code isn't the way this is supposed to work. You can't already do what you need to do to make a copy and add a feature?

dougmcg commented 7 years ago

Okay - I changed member permissions to allow write access for members

maxtkc commented 7 years ago

I believe that this is ready for merging.

maxtkc commented 5 years ago

is this still an issue? This whole project has gotten quite stale... but toasters can sometimes make stale things tasty again.

maxtkc commented 5 years ago

Oh wait... it doesn't work.

maxtkc commented 5 years ago

oops... clicked the wrong button. (: also, it does work, but not after school. It's kinda sketch after school though.

dougmcg commented 5 years ago

I think we're good here