index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Agenda Builder</title>
    <style>
        :root {
            --tablegap: 0.5rem;
        }
        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1rem;
        }
        * {
            box-sizing: border-box;
        }
        * + * {
            margin-top: 1em;
        }
        .row * + * {
            margin-top: 0;
            margin-left: 1em;
        }
        textarea, input, button {
            font-size: inherit;
            font-family: inherit;
        }
        textarea {
            border: 1px solid #000;
            width: 100%;
        }
        table {
            width: 100%;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            border-collapse: collapse;
        }
        tr > * {
            border-top: 1px solid #000;
            border-left: 1px solid #000;
            padding: var(--tablegap);
            text-align: left;
           
        }
        tr > *:first-child {
            white-space: nowrap;
        }
        tr > *:last-child {
            width: 100%;
        }
        tr.done {
            background: #fcfddd;
        }
        
        body.hideDurationCells .durationCell {
            display: none;
        }
        .alert {
            border: 1px solid red;
            padding: 5px;
            background: pink;
        }
        h3 {
            margin: 0 0 5px;
            font-size: 1rem;
            opacity: 0.5;
        }
        details {
            border: 1px solid #000;
            
        }
        details .inner {
                padding: 10px;
            }
        summary {
            padding: 5px;
        }
        .mt-0 {
            margin-top: 0 !important;
        }
        .copyBtn {
            appearance: none;
            padding: 10px;
            background: #f5cffe;
            border: 1px solid #000;
            color: #000;
        }
        .calculatorBtn {
            background: #c5f6b3;
        }
        .infoBtn {
            background: #feedbf;
        }
        .text {
            max-width: 65ch;
            line-height: 1.4;
            
        }
        .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
        .lead {
            font-size: 1.2rem;
            font-weight: bold;
        }
        h2 {
            color: #8b0000;
        }
        .text h3 {
            color: #003687;
            opacity: 1;
        }
        .activityName, .number {
            padding: 0 2px;
        }
        .activityName {
            background: #cbfdeb;
        }
        .number {
            background: #f9d9d9;
        }
        .hide {
            height: 0;
            overflow: hidden;
            margin: 0;
        }
    </style>
    
  </head>
  <body style="margin: 1em;">
    <!-- Copy URL Feature: HTML  -->
    <details>
        <summary class="infoBtn">About Agenda Builder</summary>
        <div class="inner mt-0 text">
            <p class="lead">Agenda Builder turns a list of activities (and the time it takes to do each one) into a schedule.  You can set a time you want your schedule to start or a time when you want it to end.
            </p>
            <h2>Examples</h2>
            <ul>
                <li><a href="?s=y&aa=s&t=2024-04-05T08%3A00&e=&a=Routine%0Awake+up+10%0Aeat+breakfast+20%0Ado+a+little+of+the+thing+I+dread+10%0Ado+something+fun!+40">Morning Routine using a start time</a></li>
                <li><a href="?s=y&aa=e&t=2024-04-05T08%3A00&e=2024-04-05T18%3A00&a=Turkey%0APut+in+stuffing+30%0ARoast+it+360+%0A%0Amash+potatoes%0Aboil+potatoes+40%0Amash+them+30">Dinner preparation routine using an end time</a></li>
            </ul>
            <h2>Features</h2>
            <h3>Privacy-respecting</h3>
            <p>All the data you enter into this form is only saved to the URL and nowhere else.</p>
            <h3>Sharable</h3>
            <p>Planning a group schedule? Share the URL of your schedule to anyone!  When they click the link, the data in the URL will auto-populate the form and display the schedule.</p>
            <h3>Calculates simultaneous agendas</h3>
            <p>Simultaneous agendas are helpful if you want to do something like cook multiple dishes.  Add an end time when you want all your dishes to be done and Agenda Builder will tell you when to do what.</p>


        </div>
      </details>
    <div>
        <button class="copyBtn" type="button" onclick="copyURL()">copy URL to clipboard</button>
        <span id="copyURLAlert"></span>
    </div>
    <form id="f" action="">

    <div class="row">
        <span>Show Form?</span> <label><input name="s" value="y" type="radio" checked>Yes</label>
        <label><input name="s" value="n" type="radio">No</label>
    </div>
    
    
    <div id="formBonus" >
        <!-- <div class="row">
            <span>Display duration column?</span> <label><input name="d" value="y" type="radio" checked>Yes</label>
            <label><input name="d" value="n" type="radio">No</label>
        </div> -->
        <!-- <div class="row">
            <span>Display past activities?</span> <label><input name="p" value="y" type="radio" checked>Yes</label>
            <label><input name="p" value="n" type="radio">No</label>
        </div> -->
        <!-- <div class="row">
            <span>Time format</span> <label><input name="f" value="m" type="radio" checked>Military</label>
            <label><input name="f" value="s" type="radio" />Standard</label>
        </div> -->
        
        <div class="row">
            <span>Align agenda(s) from a...</span> 
            
        </div>
        
        <style>
            .startEndLabelBtns {
                border: 1px solid #000;
                padding: 10px 0px;
                display: inline-block;
                width: 83px;
                text-align: center;
                
            }
            .startEndWrapperes {
                border: 1px solid transparent;
            }
            .startEndLabelBtns + * {
                margin-left: 5px;
                width: 195px;
            }
            .startEndLabelBtns.start {
                background: #aff0fc;
            }
            .startEndLabelBtns.end {
                background: #affced;
            }
            input#aas:checked ~ .startEndWrapperes.start {
                background: #aff0fc;
                border-color: #000;
            }
            input#aas:checked ~ .startEndWrapperes.end input {
                opacity: 0.5;
            }
            input#aae:checked ~ .startEndWrapperes.start input {
                opacity: 0.5;
            }
            input#aas:checked ~ .startEndWrapperes.start .startEndLabelBtns {
                border-color: transparent;
            }
            input#aae:checked ~ .startEndWrapperes.end {
                background: #affced;
                border-color: #000;
            }
            input#aae:checked ~ .startEndWrapperes.end .startEndLabelBtns {
                border-color: transparent;
            }
        </style>
        
        <input checked class="sr-only" id="aas" name="aa" value="s" type="radio" >
        <input class="sr-only" id="aae" name="aa" value="e" type="radio" />
        
        <div class="row startEndWrapperes start">
            <label class="startEndLabelBtns start" for="aas">Start Time</label>
            <input id="t" name="t" type="datetime-local">
        </div>
        
        <div class="row startEndWrapperes end">
            <label  class="startEndLabelBtns end" for="aae">End time</label>
            <input name="e" id="e" type="datetime-local">
        </div>
    
    <div>
        <details>
            <summary class="infoBtn">Agenda(s) formatting</summary>
            <div class="mt-0 inner text">
                <p>Add one or many agenda groups separated by a space.  (Agenda Builder will assume all agenda groups as starting at the specified start time or ending at the specified end time.)</p>
                
                <p>Each agenda group needs to start with a line of text, which Agenda Builder will interpret as the title of the group. </p> 
                
                <p>After writing a title, add lines of text after that line in the format <br /><span class="activityName">[activity name]</span> <span class="number">[number]</span> where <span class="number">[number]</span> is the amount of minutes needed to do the activity.</p>
            </div>
        </details>
        
        
        <label style="display: block;">Agenda(s)
            <textarea id="a" name="a" style=""  ></textarea>
        </label>
        <details>
            <summary class="calculatorBtn">Minutes calculator</summary>
            <div class="inner mt-0">
                <div><label >Days: <input type="number" min="0" id="calculator_days"></label></div>
            <div><label > Hours: <input min="0" type="number" id="calculator_hours"></label></div>
             <div>= <strong id="calculator_minutes">0</strong> minutes</div>
            </div>
          </details>
    </div>
    </div>
    
    
</form>
<div>
    
        
    </div>
<div id="outputHtml"></div>


<script type="text/javascript">

// # Initial variables
const urlBase = window.location.protocol  + "//" + window.location.host + window.location.pathname  + "?";
const form = document.querySelector('form');
var formDataString;

// # minutes calculator
const calculator_days = document.getElementById('calculator_days');
const calculator_hours = document.getElementById('calculator_hours');
const calculator_minutes = document.getElementById('calculator_minutes');
function triggerMinutesCalculator() {
    let minutes = calculator_days.value * 60 * 24 + calculator_hours.value * 60;
    calculator_minutes.innerHTML = minutes;
}
calculator_days.addEventListener("keyup", triggerMinutesCalculator, false);
calculator_hours.addEventListener("keyup", triggerMinutesCalculator, false);


// # Simple Functions
function minutesToMilliseconds(minutes) {
    return minutes*60000;
}

// # Form and URL Functions
var updateFormFromURL = function() {
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.forEach((value, key) => {
        var input = document.querySelector('[name="'+key+'"]');
        var inputType = input.type;
        if(inputType == 'checkbox') {
            if(value == 'on') {

                input.checked = true;
            }
        }
        else if(inputType == 'radio') {
            document.querySelector('[name="'+key+'"][value="'+value+'"]').checked = true;
        }
        else {
            document.querySelector('[name="'+key+'"]').value = value;
        }
    });
}

var updateURLFromForm = function(event) {
    formDataString = new URLSearchParams(new FormData(form)).toString();
    window.history.replaceState( {} , '', urlBase + formDataString);
}

// # Copy URL Feature: Javascript
const copyTextElement = document.getElementById('copyURLAlert');
var copyURL = function() {
    let url = document.location.href

    navigator.clipboard.writeText(url).then(function() {
        copyTextElement.innerHTML = 'Copied!';
    }, function() {
        copyTextElement.innerHTML = 'Error';
    });
    setTimeout(function(){copyTextElement.innerHTML = '';}, 1000);
}


// # input to toggle visibility of content
    const formBonus = document.getElementById('formBonus');
    const showFormInput = document.querySelectorAll('[name="s"][value="n"]')[0];
    var showHideForm = function() {
        if(showFormInput.checked) {
            formBonus.classList.add("hide");
        }
        else {
            formBonus.classList.remove("hide");
        }
    }
    
    
// # duration column visibility

// var showDurationCol = function() {
//     var showDurationColVal = document.querySelector('[name="d"]:checked').value;
//     if(showDurationColVal == 'n') {
//         document.body.className += ' hideDurationCells';
//     }
//     else {
//         document.body.className = '';
//     }
// }


// todo: update these on keyup/change
// activity units
// var activityUnits = document.querySelector('[name="u"]:checked').value;

// excluded activities number
// var excludedActivitiesNum = document.querySelector('[name="ex"]').value;


// constants
const startTimeInput = document.getElementById('t');
const endTimeInput = document.getElementById('e');
const textarea = document.getElementById('a');
const agendaAlignmentInputEndtime = document.querySelector('[name="aa"][value="e"]');


function getActivityArray() {
    const textareaTxt = textarea.value;
    var allGroupsArr = [];
    var textGroups = textareaTxt.split(/\n\n/);
    for (let index = 0; index < textGroups.length; index++) {
        var allActivitiesArr = [];
        var textGroup = textGroups[index];
        var textLines = textGroup.split(/\r?\n/);
        textLines = textLines.filter((n) => n.length > 1);
        var activityGroupName = textLines.shift();
        
        for (let i = 0; i <= textLines.length; i++) {
            
            var activityArr = [];
            
            var activityText;
            var activityDuration;
            activityArr.push(activityGroupName);

            if(i == textLines.length) {
                activityText = 'Done';
                activityDuration = 0;
            }
            else {
                var textLine = textLines[i];
                textLine = textLine.trim();
                var lastSpaceIndex = textLine.lastIndexOf(' ');
                activityText = textLine.substring(0, lastSpaceIndex);
                activityDuration = Number(textLine.substring(lastSpaceIndex).trim());
            }
            activityArr.push(activityText);
            activityArr.push(activityDuration);
            
            allActivitiesArr.push(activityArr);
        }
        allGroupsArr.push(allActivitiesArr);
    }
    
    return allGroupsArr;
}
function getTimeStampFromDateTimeLocalValue(val) {
    return val;
}


var roundedExcessCounter = 0;
function getActivityDurationInMinutes(number) {
    if(activityUnits == 'm') {
        return number;
    }
    else {
        // convert ratio to minutes
        var ratio = number/totalActivityMinutes;
        var preciseMinutes = roundUpToDecimal(ratio*startTimeEndTimeTotalMinutes, 5);
        var roundedMinutes = Math.round(preciseMinutes);
        roundedExcessCounter += (preciseMinutes - roundedMinutes);
        if(roundedExcessCounter >= 1) {
            roundedMinutes += 1;
            roundedExcessCounter -= 1;
        }
        return roundedMinutes;
    }
}

function getTotalActivityMinutesFromArray(array) {
    var totalActivityMinutesArr = [];
    for (let index = 0; index < array.length; index++) {
        var totalActivityMinutes = 0;
        const activityGroup = array[index];
        for (let index = 0; index < activityGroup.length; index++) {
            totalActivityMinutes += activityGroup[index][2];
        }
        totalActivityMinutesArr.push(totalActivityMinutes);
    }
    
    return totalActivityMinutesArr;
}


const outputHtmlElem = document.getElementById('outputHtml');
    
var startTime, endDate, endTime;    

    
// # end
// console.log(getActivityArray());


function timestampToTime(timestamp) {
    // console.log(date2.toLocaleDateString());
// console.log(date2.toLocaleString());
    let dateTimeArr = [];
    let date = new Date(timestamp);
    dateTimeArr.push(date.toLocaleString(false, {dateStyle: 'full'}));
    dateTimeArr.push(date.toLocaleString(false, {timeStyle: 'short'}));
    return dateTimeArr;
}

function activityArrayMinutesToTimestamps(activityGroupsArr, totalTimesArr, direction = false) {
    var finalArray = [];
    for (let index = 0; index < activityGroupsArr.length; index++) {
        const activityGroup = activityGroupsArr[index];
        const activityGroupTotalTime = totalTimesArr[index];
        var timeStampCounter;

        if(direction == 'backwards') {
            timeStampCounter = endTime - minutesToMilliseconds(activityGroupTotalTime);
        }
        else {
            timeStampCounter = startTime;
        }
        var newArr = [];
        
        for (let index = 0; index < activityGroup.length; index++) {
            var item = activityGroup[index];
            // item.push(timestampToTime(timeStampCounter));
            item.push(timeStampCounter);
            timeStampCounter += minutesToMilliseconds(item[2]);
            newArr.push(item);
        }
        // newArr.push(timeStampCounter);
        finalArray.push(newArr);
    }
    return finalArray;
    
    
}


function sortByTimestamps( a, b ) {
  if ( a[3] < b[3] ){
    return -1;
  }
  if ( a[3] > b[3] ){
    return 1;
  }
  return 0;
}


function flattenAndSortFinalActivityGroups(finalActivityGroups) {
    var flatArr = [];
    for (let index = 0; index < finalActivityGroups.length; index++) {
        const group = finalActivityGroups[index];
        for (let index = 0; index < group.length; index++) {
            const activity = group[index];
            flatArr.push(activity);
        }
    }
    flatArr.sort( sortByTimestamps );
    return flatArr;
}

// console.log(activityArrayMinutesToTimestamps(getActivityArray(), totalActivityMinutesArray));
// console.log(activityArrayMinutesToTimestamps(getActivityArray(), totalActivityMinutesArray, 'backwards'));

// marky
function createElement(tag, text) {
    return '<' + tag + '>' + text + '</' + tag + '>';
}
function createTableRow(array, classText = '') {
    html = '<tr class="' + classText + '">';
    for (let index = 0; index < array.length; index++) {
        const item = array[index];
        html += '<td>' + item + '</td>';
    }
    html += '</tr>';
    return html;
}
function trClass(duration) {
    if(duration == 0) {
        return 'done';
    }
    return '';
}

const htmlTableStart = '<table><thead><tr><th>Time</th><th>Activity</th><tbody>';
const htmlTableEnd = '</tbody></table>';
function dataToHtml(array) {
    var curDay = '';
    var html = '';
    for (let index = 0; index < array.length; index++) {
        let item = array[index];
        let daytime = timestampToTime(item[3]);
        let day = daytime[0];
        let time = daytime[1];
        let duration = item[2];
        let firstTd = createElement('h3', item[0]);
        firstTd += createElement('strong', item[1]);
        if(duration != 0) {
            firstTd += ' ('+ duration +' minutes)';
        }
        
        console.log(daytime);
        if(curDay != day) {
            if(curDay != '') {
                html += htmlTableEnd;
            }
            curDay = day;
            html += createElement('h2', curDay);
            html += htmlTableStart;
            
        }
        html += createTableRow([time, firstTd], trClass(duration));
    }
    html += htmlTableEnd;
    outputHtmlElem.innerHTML = html;
}


var updateOutput = function() {
        showHideForm();
        var startDate = new Date(startTimeInput.value);
startTime = startDate.getTime();
endDate = new Date(endTimeInput.value);
endTime = endDate.getTime();

var activityArray = getActivityArray();

const totalActivityMinutesArray = getTotalActivityMinutesFromArray(activityArray);

// marky
let agendaAlignment = '';
if(agendaAlignmentInputEndtime.checked) {
    agendaAlignment = 'backwards';
}

dataToHtml(flattenAndSortFinalActivityGroups(activityArrayMinutesToTimestamps(getActivityArray(), totalActivityMinutesArray, agendaAlignment)));
    }

var updateAll = function() {
    updateURLFromForm();
    updateOutput();
}    
    
// ## triggering previously defined functions...
updateFormFromURL();
updateOutput();
form.addEventListener("keyup", updateAll, false);
form.addEventListener("change", updateAll, false);

// console.log(outputData(finalFlatActivitiesForwards));
// console.log(finalFlatActivitiesBackwards);


// console.log(date2.toLocaleDateString());
// console.log(date2.toLocaleString());

// # textarea auto-resizing
// taken from here: https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + "px";
}

</script>
  </body>
</html>