Build a Daylight Drift Tool in Less Than 20 Minutes

Goal

Prerequisites

Overview

1. Create the wireframe

   To start with, lets create a simple UI in Appsmith. We will use the Tabs widget to let us switch between the "Input" screen and the "Output"screen. Don't worry to much about theming now, we can adjust that later. 

   Protip: use the mobile screen size to make the app mobile responsive OOTB.

   Add the Tabs widget, call tab 1 "Input" and tab 2 "Output". Later, we will hide the tabs to make it more applike, but keep them visible for now to make it easy to edit.

   

2. Create the input form

   Now, lets create the input form in the first tab. This should provide some basic options:

   • Datefield - next daylight savings change
   • Select - bedtime
   • Select - awake time

   Datefield - next change

   Add the datefield widget and configure. I suggest just using a date format, and choosing the next default date. Call this field switchDate.

   Select - bedtime & awake time

   Add two select widgets for bedtime and waking time. Call these fields bedTime and wakeTime. Don't worry about the values yet - we will take care of that in the next step. At this point your basic app should look like this:

   

    

3. JS - provide default options for time select

   Ok - now, lets generate the time select options using some simple Javascript. We could write these by hand, but what a pain that would be. Plus, this lets us make it easier to modify the time output from hour to minute or even second. For now, we will keep it simple. Looking at the select widget, we can see that the format we need is an array of items each with a value & label (or code & name in the default).

   To keep it flexible, we will create a function that lets pass in two parameters - the time of day (am/pm) and the number of increments per hour. Go ahead and create a new JSObject called selectConfig with the following code:

   export default {
   /**
    * Generates a list of times based on provided timeOfDay and increments.
    * 
    * @param {string} [timeOfDay] - The part of the day, can be either 'am' or 'pm'.
    * @param {number} [increments] - Number of increments per hour. 
    *         For instance, 1 for hourly, 2 for every 30 minutes, 4 for every 15 minutes, etc.
    * 
    * @returns {Array} An array of time objects formatted for the select widget
    * 
    */
     generateTimes(timeOfDay = 'am', increments = 2) {
       let results = [];
       let incrementValue = 60 / increments;
   
       for (let hour = 1; hour <= 12; hour++) {
           for (let increment = 0; increment < 60; increment += incrementValue) {
               let time = hour + ":" + String(increment).padStart(2, '0');
               let value = hour + increment / 60;
               let label = time + " " + timeOfDay;
               results.push({ "value": value, "label" : label });
           }
       }
       return results;
     }
     
   }

   Update the select widgets

   Now, all we have to do is set the time select widgets to use this method:

   • For "Source data", click the JS button so you can enter the inline JS method like this: {{selectConfig.generateTimes('pm', 2)}}
   • For "Label", choose "label"
   • For "Value, choose "value"
   • For "Default selected value", enter the integer for the value with curly brackets (since its not a string) like {{ 10.5 }}
   • Repeat this process for the wake time, but use "am" instead and a different default value

   Note: this is assuming that you will go to bed before midnight and wake up before noon. If you need to change it, feel free. Your app, your rules.

   Now you should have some nicely formatted select lists! Best of all, you can easily modify them if needed

   

4. Create the output UI

   Input is done, so lets move on to the output. Click on the "Output" tab. Lets just do some simple text fields to show the input data, and a table with the required outputs for each day

   Text fields for inputs

   Add the text fields and use the selected values from the first tab:

   • Textfield called switchDateOutput - value =  Switch date : {{ switchDate.formattedDate}}
   • Textfield called bedtimeOutput - value =  Bedtime : {{bedTime.selectedOptionLabel}}
   • Textfield called waketimeOutput - value =  Wake time : {{wakeTime.selectedOptionLabel}}

   Table for results

   Add a table widget called timeDriftTable. Don't worry about configuring the table yet - we will create the Javascript to calculate the results and then bind them to the table in the next step.

   

    

5. Calculate the results

   Now the fun part. We need to calculate the results based on all of the information we have available. Luckily, its pretty simple to do:

   1. Calculate the number of days between the current date and the switchDate.
   2. Determine if we are "springing forward" or "falling back" based on the month of switchDate.
   3. Calculate the time drift per day based on the number of days.
   4. Adjust bedtime and waketime accordingly, rounding to the nearest increment.
   5. Output an array of objects with each date, adjusted bedtime, and waketime.

   One thing to note is that our default time output will be in decimal form - so, "11.5" will equal "11:30". Lets go ahead and create that method first so we can use it in our main calculation method:

    /**
      * Converts a time in decimal format to a regular time format.
      * 
      * @param {number} decimal - Time represented as a decimal.
      * @returns {string} The formatted time, e.g., "10:30" for 10.5
      */
     decimalToTime(decimal) {
        let hours = Math.floor(decimal);
       let minutes = Math.round((decimal - hours) * 60);
   
       // Ensure minutes and hours are 2 digits, padding with zeros if necessary
       hours = String(hours).padStart(2, '0');
       minutes = String(minutes).padStart(2, '0');
   
       return hours + ':' + minutes;
     }

   Great! Now that we have that, we can generate the results. Note that instead of passing through the switchDate, bedtime, and waketime parameters to the function, instead we can use the ones stored in the app. This makes everything cleaner and simpler! This is one of the reasons its a good idea to name your widgets well.

   	/**
      * Computes a plan for adjusting to Daylight Saving Time by shifting bedtime and waketime.
      * 
      * @param {number} increment - Number of increments per hour.
      * @returns {Array} An array of time adjustment with the date, day, bedtime, and waketime.
      */ 
     getTimeDriftPlan(increment=6) {
   		let currentDate = new Date();
   		let switchDateObj = new Date(switchDate.selectedDate);
   
   		// Calculate the number of days till switchDate
   		let diffTime = Math.abs(switchDateObj - currentDate);
   		let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
   
   		// Determine direction of drift based on month
   		let driftDirection = switchDateObj.getMonth() < 6 ? 1 : -1;
   
   		// Calculate daily drift
   		let dailyDrift = (1 / diffDays) * driftDirection;
   
   		// Initialize result array
   		let result = [];
   
           // Loop through each of the days between now and the switchover, and calculate the drift.
   		for (let i = 0; i <= diffDays; i++) {
   
   			// Determine the date and day.
   			let dateObj = new Date(currentDate);
   			dateObj.setDate(currentDate.getDate() + i);
   			let dateString = dateObj.toISOString().slice(0, 10); // Format YYYY-MM-DD
   			let locale = 'en-US';
   			let day = dateObj.toLocaleDateString(locale, {weekday: 'long'});
   
   			// Apply the drift for this day and round to the nearest increment.
   			let adjustedBedtime = bedTime.selectedOptionValue + (dailyDrift * (i + 1));
   			let adjustedWaketime = wakeTime.selectedOptionValue + (dailyDrift * (i + 1));
   			let roundedBedtime = Math.round(adjustedBedtime * increment) / increment;
   			let roundedWaketime = Math.round(adjustedWaketime * increment) / increment;
   
   			// If this is the last item, then make sure to set the waeup time properly.
   			if (diffDays === i) {
   				roundedWaketime = wakeTime.selectedOptionValue;
   			}
   
               // Add this day's info to the results for the table.
   			result.push({
   				date: dateString,
   				day: day,
   				bedtime: this.decimalToTime(roundedBedtime) + " PM",
   				waketime: this.decimalToTime(roundedWaketime) + " AM"
   			});
   		}
   
   		return result;
   	}

   We can test the results in the Javascript IDE to confirm things work well. Its great! 

6. Add buttons and display results

   At this point, we are nearly done. We want this to be applike, so we need to do a few things:

   1. Create our controller code.
   2. Hide the tabs and set the default to the mutable variable.
   3. Add a "Submit" button on the input tab. When clicked, this should run the calculations and switch to the output tab.
   4. Add a "Reset" button on the output tab. When clicked, this should empty the calculations and swtich to the input tab.
   5. Bind the results of the calculations to the table.
   6. Apply final theming and adjustments.

   Create JS controller

   To make it easy to manage the tabs and adjustments, lets create a new JSObject called appController. This will provide the basic controls we need for the functioning of the app. This is super simple code (note that we are outputting the whole object code here):

   export default {
   	// Variable holds the current value for the default tab
   	defaultTab: 'Input',
   
   	/**
   	 * Submits the input form data, generates the results, and changes to the output tab.
   	 */
   	submit() {
   		output.getTimeDriftPlan();
   		this.defaultTab = 'Output';
   	},
   
   	/**
   	 * Empties the results, and changes to the input tab.
   	 */
   	reset() {
   		this.defaultTab = 'Input';
   	}
   }

   Hide tabs

   Ok, so now we can hide the tabs, and set the default tab to {{ appController.defaultTab }}. Now, as we change that variable, it will navigate the tabs for us. Pretty neat, huh?

   

   Add submit/reset buttons

   You will notice above that we already added the submit button to the input tab. All we need to do is change the "onClick" config to use the submit method on the appController. I won't show that here, but I think you are clever enough to figure it out.

   Now, you can click on the submit button, and it will take you to the output tab! From here, you can add a reset button and change it's "onClick" config to use the reset method on the appController.

   Bind the table data

   The only thing left to do is to bind the data to the table. This is very easy, and very satisfying. We just need to click the JS button on the Table data, and set it to {{output.getTimeDriftPlan.data}}. Go ahead and adjust the table columns, the table height, and other settings as you see fit. It should look something like this:

   

   The table widget provides a download option OOTB, so you can get an easy export without any extra work. I do love it when smart tools make my life easier.

7. Customize

   At this point, you can customize the app however you like. For example, I added a background container with a CSS gradient for the color. I also added a modal with information, and another option to choose the output increment.

   

   Protip: you can use CSS in the background color fields if you click the JS button. You can also create a function to dynamically change the colors!

Conclusion

Additional Resources