Category: javascript

I’m working on my personal website called stellarfacts.com, I’ve been building it since September.

I use two different types of banners, image and video banners. They look good on desktop, but on mobile, it centers on the banner, but doesn’t show the entire thing. Is there a way to shrink it, so that the entire video is resized to fit on mobile?

I have media queries too, for min 800px and min 400px sized screens. Here is the code, if there is anything else you need to see, please let me know and I’ll provide it.

(https://i.sstatic.net/4akkKwhL.png)(https://i.sstatic.net/e89OymPv.png)

I’ve tried setting the width as 100% and 100vw, as well with a height set as auto and 100vh. Thinking about how view width works, I believe 100vw is the same as 100%. I don’t use pixels to keep the responsiveness of my website.

I was thinking about using media queries to resize it somehow, or can you make a separate (same video, but 9/16 ratio) videos for these screen sizes and somehow use JavaScript to change the video based on screen size? I’m pretty new to JavaScript, but used it for a responsive navigation bar.

#banner img {
 width:100%;
 height:auto;
}

Appreciate your response in advanced 🙂

I’ve been learning modern JavaScript and I understand that let and const are now the preferred ways to declare variables due to their block scoping and more predictable behavior compared to var.

However, while reading various open-source projects and even some tutorials, I still often encounter the use of var, even in ES6+ codebases. This raises a few questions:

1. Why is var still used in modern code, even when let and const are available?

Is it just legacy code, or are there intentional use cases where var is still preferable?

2. Are there any performance considerations when using var vs let/const?

For example:

• Do JS engines like V8 optimize var better because of its age?
• Is there any measurable performance difference in loops, function declarations, etc.?

Sample Code

function legacyExample() {
  var x = 10;
  if (true) {
    var x = 20;
    console.log(x); // 20
  }
  console.log(x); // 20 again - not block scoped
}

function modernExample() {
  let y = 10;
  if (true) {
    let y = 20;
    console.log(y); // 20
  }
  console.log(y); // 10
}

What I’m Looking For

I’m not looking for just “don’t use var.” Instead, I want to understand:

• Any valid engineering trade-offs for using var
• Real-world situations where var still makes sense
• Migration strategies or gotchas when replacing var with let or const

I have read and tried several JavaScript code examples, especially in various modern open source repositories. I tried replacing var with let or const, and expected no difference. But it turns out that in some cases especially inside loops or if blocks, the behavior of `variables changes due to differences in scoping.

At first I thought var was no longer relevant, but in fact it is still often used. I want to understand why, before I do a major refactor or enable the no-var rule in ESLint.

USER_COMMENT=null ANDROID_VERSION=9 APP_VERSION_NAME=5.0.249.1002172 BRAND=OPPO PHONE MODEL=CPH2083 CUSTOM_DATA= STACK_TRACE=java.lang.NullPointerException: Attempt to invoke virtual method ‘java.lang.String android.net.Uri.toString()’ on a null object reference at com.alightcreative.app.motion.activities.SaveToStorageActivity.ox9(Unknown Source:28) at com.alightcreative.app.motion.activities.SaveToStorageActivity.xxc(Unknown Source:1) at com.alightcreative.app.motion.activities.OwX.run(Unknown Source:10) at android.os.Handler.handleCallback(Handler.java:873) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:233) at android.app.ActivityThread.main(ActivityThread.java:7225) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:499) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:962)

I am trying to evaluate a dynamic expression using dynamic function, which should result in a object array. However, the result comes out as a string. What am I missing?

Sample fiddle: https://jsfiddle.net/ydubey/u6x8zkes/19/

Code:

const value = {
  items: [
    {
      name: 'a'
    },
    {
      name: 'b'
    }
  ]
};
const expression = '`${op.items}`';
const fn = new Function('op', 'return ' + expression + ';');
const result = fn(value);
console.log('value', value);
console.log('expression', expression);
console.log('result', result);
console.log('type', typeof result);

Thanks

I am currently making an ASP.net project with Razor Pages and I want to add React into it. Currently, I have a wwwroot/jsx directory that contains a React component called paymentOptions.jsx. My goal is to transpile the .jsx file into a .js file with wwwroot/js as the output directory so that I can render the component on my Razor Page.

Here is my React Component:

// paymentOptions.jsx
import { createRoot } from 'react-dom/client';

class PaymentOptions extends React.Component {
    render() {
        return ( 
            <div>
                <h1>You got it! Congratulations!</h1>
            </div>
        );
    }
}

const domNode = document.getElementById('payment-options');
const root = createRoot(domNode);

Here is my Razor Page:

<!--Pages/Order.cshtml-->
@page
@model RogersPizza.Pages.OrderModel
@{
    Layout = "Shared/_Layout.cshtml";
}
@section title {
    <title>Order</title>    
}
@section scripts {
    
}
@section siteMenu {
    <div name="Site Menu">
        <table width="100%">
            <tr>
                <th><a href="Index">Rogers Pizza</a></th>
                <th><a href="Menu">Menu</a></th>
                <th>Order</th>
                <th><a href="About">About</a></th>
                <th><a href="Contact">Contact</a></th>
                <th><a href="Employees">Employees</a></th>
            </tr>
        </table>
    </div>
    
}

@section body {
    <div name="Order UI"></div>
        <form>
        <label align="center">Choose your pizza</label>
        <select name="pizzas" id="pizzas" align="center" required>
            @foreach(var item in Model.Pizzas)
            {
                <option>@Html.DisplayFor(modelItem => item.Name)</option>
            }
        </select>
<!--React Script goes here-->
        <div id= "payment-options">
            <script type="text/babel" src="/wwwroot/js/paymentOptions.js"></script>
        </div>
        <input type="submit" value="Place Order" />
        </form>        
    </div>
}

I tried to use the command npx @babel /wwwroot/jsx/paymentOptions.jsx --out-file /wwwroot/js/paymentOptions.js, but I get the following error messages:

npm error code ENOENT
npm error syscall open
npm error path D:wwwrootjsxpaymentOptions.jsxpackage.json
npm error errno -4058
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'D:wwwrootjsxpaymentOptions.jsxpackage.json'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: *redacted*

I think I am not typing the directory correctly, but why is the command not working currently? Is this a valid approach to rendering React components in Razor Pages and do you have any other thoughts regarding my approach or implementation?

I am using Formik and Yup for my project. Usually, when using an input, it gives a string value even if the input type is number. However, when using Formik, I am getting a number, and during validation, leading zeroes are stripped if they are at the beginning of the value.

I have a big BackBone + ReactJs application that renders a list of assets, each asset is a Backbone model, and the whole array of rendered assets and other variables used in the view get stored inside the state of a React component, let’s call it main-component

This React component manages the data and then gives it as props to another child component, and that child component renders a react BaseTable component.

The thing is i have a custom hook that helps with the communication between react and backbone, this is the hook’s code:

  import { useEffect, useState } from 'react';
    import _ from 'lodash';
    
    const useSyncedData = ({
        source,
        mapState = (data) => ({ ...data }),
        listenTo = 'update refresh',
        useDebounce = true,
        onMount = () => {},
        onUnmount = () => {},
        onTrigger = () => {},
    }) => {
        const [localData, setLocalData] = useState(mapState(source));
        let isListening = true;
    
        let updateState = () => {
            if (isListening) {
                setLocalData(mapState(source));
                onTrigger();
            }
        };
    
        if (useDebounce) {
            updateState = _.debounce(updateState);
        }
    
        useEffect(() => {
            const eventList = Array.isArray(listenTo) ? listenTo.join(' ') : listenTo;
            source.on(eventList, updateState);
            onMount();
    
            return () => {
                isListening = false;
                source.off(eventList, updateState);
                onUnmount();
            };
        }, [source]);
    
        return localData;
    };
    
    export default useSyncedData;

This hook is called 3-4 times in the main-component each one for a different render, but when i do the action than mounts/unmounts the main-component i get this error:

I tried to conditionally do the setState using a useRef variable but i still get this error, is there any way to avoid memory leaks when storing large ammounts of Backbone models inside a react component state?

I’m working on a React project and encountered a build error when trying to define props using an interface. And here is the error I’m getting:

Parsing ecmascript source code failed
./src/components/Phone.jsx (9:1)
Parsing ecmascript source code failed
interface PhoneProps extends HTMLAttributes<HTMLDivElement>{
          ^^^^^^^^^
Expression expected

I’m not sure why this happens. I’m trying to use an interface to define props for my component. Could someone help me understand what’s wrong and how to fix it?

I want to be able to define props using an interface and have the component compile without errors.

I have a JS which worked for years under Win10 and Win11 and contains these lines:

        var nsNodes = xmlDoc.selectNodes("//*/namespace::*");
var tmp="";
var nsNames=new Array();
var nsValues=new Array();
var nsInf=new Array();
for(var objNs = new Enumerator(nsNodes); !objNs.atEnd(); objNs.moveNext()) {
  var nAkt=objNs.item().Name+"="+objNs.item().Value;
  if (tmp.indexOf(nAkt) < 0) {
    tmp+=nAkt+"rn";
    var nTmp=objNs.item().Name.split(":");
......

Now on one PC after the other – depending on there current Windows update – the Script stops to work with the message

Die Eigenschaft “split” eines undefinierten oder Nullverweises kann nicht abgerufen werden. (xmlDoc.selectNodes(namespaces))
Try to translate: Property “split” of an undefined or null value can not be called ..

Now I found that “xmlDoc.Selectnodes” is called from .net-framework:
javascript selectNodes on parsed xml

So I suppose that the current update of .net-framework causes this problem.

Anyone here who can verify or falsify my theory?
Have a fine weekend!

I’m trying to make a site that will track what books you have read by having the user enter a code found at the back of the book.

<?php 
//this is the your_account.php page, where the user enters the code
include_once '../private/common/initialization.php';
$page_title = 'My Account';
include_once 'common/top.php';
if(!isset($_SESSION['username'])):
?>
<meta http-equiv="refresh" content="0;sign_in.php">
<?php 
else:
?>
<table>
    <thead>
        <tr>
            <th>Books read</th>
            <th>Games played</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><?php //echo $_SESSION['books']; ?></td>
            <td><?php //echo $_SESSION['games']; ?></td>
        </tr>
    </tbody>
</table>
<h4>Enter a book code to record a book that you have read</h4>
<p>
    This form will work for all books. Check the back of the book you've read to see the code.
</p>
 <form id="code_form" action="http://localhost/Official%20Lasereyes%20Website/public/handlers/user_handler.php" method="post">
    <div class="form-wrapper">
        <div class="control-wrapper">
            <label for="enter-code">Enter Code:</label>
            <input id="enter-code" class="form-control" name="enter-code" type="text" aria-label="Enter the code found at the back of the book." required />
            <span id="username-error" class="error error-message"></span>
        </div>
        <div class="control-wrapper">
            <lable for="book">Book:</lable><br>
            <select id="book" name="book">
                <option>Conquest</option>
                <option>unnamed</option>
                <option>book3</option>
                <option>book4</option>
            </select>
        </div>
        <button id="enter-code-button" class="ui-button btn-form" type="submit">Check code</button>
        <span id="form-error" class="error error-message form-error-message"></span>
        <span id="form-message" class="form-message"></span>
        <input type="hidden" id="user-verb" name="user-verb" value="enter_code">
        <input type="hidden" id="token" name="token" value="<?php echo $_SESSION['token']; ?>">
        <input type="hidden" id="username" name="username" value="<?php echo $_SESSION['username']; ?>">
    </div>
</form>
<?php
endif;
include_once 'common/sidebar.php';
include_once 'common/bottom.php';
?>

<?php
    //this is the user_handler.php page, the page that processes the the user input.
    // Initialize the app
    include_once '../../private/common/initialization.php';

    // Include the User class
    include_once '../../private/classes/user_class.php';
    
    // Initialize the results
    $server_results['status'] = 'success';
    $server_results['control'] = '';
    $server_results['message'] = '';
    
    // Make sure a user verb was passed
    if (!isset($_POST['user-verb'])) {
        $server_results['status'] = 'error';
        $server_results['control'] = 'form';
        $server_results['message'] = 'Error: No user verb specified!';
    }
    // Make sure a token value was passed
    elseif (!isset($_POST['token'])) {
        $server_results['status'] = 'error';
        $server_results['control'] = 'form';
        $server_results['message'] = 'Error: Invalid user session!';
    }
    // Make sure the token is legit
    elseif ($_SESSION['token'] !== $_POST['token']) {
        $server_results['status'] = 'error';
        $server_results['control'] = 'form';
        $server_results['message'] = 'Timeout Error! Please refresh the page and try again.';
    }
    // If we get this far, all is well, so go for it
    else {
        
        // Create a new User object
        $user = new User($mysqli);
        
        // Pass the user verb to the appropriate method
        switch ($_POST['user-verb']) {
            
            // Sign up a new user
            case 'sign-up-user':
                $server_results = json_decode($user->createUser());
                break;

            // Sign in an existing user
            case 'sign-in-user':
                $server_results = json_decode($user->signInUser());
                break;

            // Send a request to reset a user's password
            case 'send-password-reset':
                $server_results = json_decode($user->sendPasswordReset());
                break;

            // Reset a user's password
            case 'reset-password':
                $server_results = json_decode($user->resetPassword());
                break;

            // Get the user's distance unit
            case 'get-distance-unit':
                $server_results = json_decode($user->getDistanceUnit());
                break;

            // Update distance unit
            case 'update-unit':
                $server_results = json_decode($user->updateDistanceUnit());
                break;

            // Delete a user
            case 'delete-user':
                $server_results = json_decode($user->deleteUser());
                break;
            case 'enter_code':
                $server_results = json_decode($user->checkCode());
                break;

            default:
                $server_results['status'] = 'error';
                $server_results['control'] = 'token';
                $server_results['message'] = 'Error: Unknown user verb!';
        }
    }
    // Create and then output the JSON data
    $JSON_data = json_encode($server_results, JSON_HEX_APOS | JSON_HEX_QUOT);
    echo $JSON_data;
?>

//this is part of the user_class.php page, which will preform the function to check the code entered by the user.
public function checkCode(){
        $server_results['status'] = 'success';
        $code = $_POST['enter-code'];
        $book = $_POST['book'];
        $username = $_POST['username'];
        $sql = 'SELECT item, book_code
                FROM items
                    WHERE item=?';
        $stmt = $this->_mysqli->prepare($sql);
        $stmt->bind_param("s", $book);
        $stmt->execute();
        $result = $stmt->get_result();
        $row = $result->fetch_all(MYSQLI_ASSOC);
        if ($this->_mysqli->errno !== 0) {
            $server_results['status'] = 'error';
            $server_results['control'] = 'form';
            $server_results['message'] = 'MySQLi error #: ' . $this->_mysqli->errno . ': ' . $this->_mysqli->error;
        } else {
            if($code === $row[0]['book_code']){
                $sql = "UPDATE users SET Books_read=? WHERE username=?";
                $stmt = $this->_mysqli->prepare($sql);
                $stmt->bind_param("ss", $username, $book);
                $stmt->execute();
                $result = $stmt->get_result();
                if ($this->_mysqli->errno !== 0) {
                    $server_results['status'] = 'error';
                    $server_results['control'] = 'form';
                    $server_results['message'] = 'MySQLi error #: ' . $this->_mysqli->errno . ': ' . $this->_mysqli->error;
                }
            } else {
                $server_results['status'] = 'error';
                $server_results['control'] = 'form';
                $server_results['message'] = 'Sorry, that was not the right code. Try again.';
            }
        }
        $JSON_data = json_encode($server_results, JSON_HEX_APOS | JSON_HEX_QUOT);
        return $JSON_data;
    }
}
?>

//this is part of the user.js file, which sends the data to the server and 
//processes the data returned by user_handler.php.
$('#code').submit(function(e){
    e.preventDefault();
    
    // Clear and hide all the message spans ($ = "ends with")
    $('span[id$="error"').html('').css('display', 'none');
    $('#form-message').html('').css('display', 'none');

    // Get the form data and convert it to a POST-able format
    formData = $(this).serializeArray();
    
    // Submit the data to the handler
    $.post('handlers/user_handler.php', formData, function(data) {
 
        // Convert the JSON string to a JavaScript object
        let result = JSON.parse(data);
        
        if(result.status === 'error') {
            // Display the error
            $('#' + result.control + '-error').html(result.message).css('display', 'inline-block');
        } else {
            $('#form-message').html(result.message).css('display', 'inline-block');
        }
    });
});

It all seems to have gone well, but I get redirected to the user_handler.php page, and got the following text displayed:

.

The code was supposed to display the text on the your_account.php page, and not have the brackets( { } ) and the qoutation marks( “” ). Even stranger, I checked the database and realized that the Books_read column wasn’t updated, even though the results were success. I tried adding window.location into users.js, like so:

} else {
   $('#form-message').html(result.message).css('display', 'inline-block');
   window.location = 'your_account.php';
}

It’s still not working. Am I going crazy, or is something wrong with my code?

I’m confused on how to use const with import and a module script type.

My original code works; it reads the URL pairs in the lookuptable OK.

But I need to move all of the URL pairs in lookuptable to a remote file, since it is 200K. That’s what I am trying to do with the current code.

In the current code, the remote file lookuptable.js loads fine and shows loaded in Dev Tools; there are no CORS errors. But the code skips over the lookuptable and shows no errors.

But how do I use const to import lookuptable and get it to work?

Working original:

    <script>
    const lookuptable = {
      "http://example.com/redirect-test/":"http://example2.com/redirect-test2/",
    };
    
        let CurrentUrlwindow = window.location.href;
        const getRedirectUrl = () => {
        let newUrl = lookuptable[window.location.href];
        if (!newUrl) {
        newUrl = "https://example2.com" + window.location.pathname;
        }
        return newUrl;
    };
    
    document.addEventListener("DOMContentLoaded", (event) => {
    const url = getRedirectUrl();
    const linkText = "Click here to go to the new site";
    const element = document.getElementById("link"); 
    element.title = "Click here to go to the new site";
    const anchor = document.createElement('a');
    anchor.setAttribute('href', url);
    anchor.textContent = linkText;
    document.getElementById('link').appendChild(anchor); 
    
});
    
    </script>

Current code:

 <script type="module">
    import {lookuptable} from 'https://abcd.pages.dev/lookuptable.js';
    
    // const lookuptable =   ??
    
        let CurrentUrlwindow = window.location.href;
        const getRedirectUrl = () => {
        let newUrl = lookuptable[window.location.href];
            if (!newUrl) {
            newUrl = "https://example2.com" + window.location.pathname;
            }
      return newUrl;
    };
    
document.addEventListener("DOMContentLoaded", (event) => {
    const url = getRedirectUrl();
    const linkText = "Click here to go to the new site";
    const element = document.getElementById("link"); 
    element.title = "Click here to go to the new site";
    const anchor = document.createElement('a');
    anchor.setAttribute('href', url);
    anchor.textContent = linkText;
    document.getElementById('link').appendChild(anchor); 
    
});
    
    </script>

lookuptable.js:

export const lookuptable = {
"http://example.com/redirect-test/":"http://example2.com/redirect-test2/",
// more
};

HTML

<div id="link"></div>

I recently get a job as a frappe/ERPnext developer. I just want to know this job role has future scope in india. Please give me your opinions here!

When starting server for my Hanami 2.2 web app, I am seeing following JS-related warnings:

20:21:42 assets.1 | [my_app] ▲ [WARNING] The CommonJS "module" variable is treated as a global variable in an ECMAScript module and may not work as expected [commonjs-variable-in-esm]
20:21:42 assets.1 | [my_app] 
20:21:42 assets.1 | [my_app]     app/assets/js/jquery.min.js:2:85:
20:21:42 assets.1 | [my_app]       2 │ ...ject"==typeof module.exports?module.exports=e.document?t(e,!0):f...
20:21:42 assets.1 | [my_app]         ╵                                 ~~~~~~
20:21:42 assets.1 | [my_app] 
20:21:42 assets.1 | [my_app]   This file is considered to be an ECMAScript module because the enclosing "package.json" file sets the type of this file to "module":
20:21:42 assets.1 | [my_app] 
20:21:42 assets.1 | [my_app]     package.json:4:10:
20:21:42 assets.1 | [my_app]       4 │   "type": "module",
20:21:42 assets.1 | [my_app]         ╵           ~~~~~~~~
20:21:42 assets.1 | [my_app] 
20:21:42 assets.1 | [my_app]   Node's package format requires that CommonJS files in a "type": "module" package use the ".cjs" file extension.
20:21:42 assets.1 | [my_app] 

Node version: v18.19.1

NPM version: 9.2.0

What does that mean and how to get rid of the warnings?

My package.json looks like following

{
  "name": "my_app",
  "private": true,
  "type": "module",
  "dependencies": {
    "esbuild-sass-plugin": "^3.3.1",
    "hanami-assets": "^2.2.1"
  }
}

My app/assets/js/app.js looks like following

import "../css/app.css";
import "./jquery.min.js"
import "./test.js"

I tried renaming the file jquery.min.js to jquery.min.cjs but then I see error that jQuery is not found. So I reverted the change.

I am using Gridstack in Angular.

My issue is that when I add a static widget to the Gridstack layout, the draggable.handle option works as expected.

However, when I dynamically add another widget, the draggable.handle setting does not work.

You can see this in the example:

Static - Drag here -: This widget can only be moved by dragging the header, as intended.

Dynamic - Drag here -: This widget can be dragged from anywhere, which is not the desired behavior.

I have already checked related question (Allow Gridstack draggable only to a specific area of the item)

I have tried the following example:

gridstack-draggable

reference : https://gridstackjs.com, https://gridstackjs.com/demo/title_drag.html

I am trying to create timeslot for my availability by providing each days working hours in numeric range. i provide some specific days availability in list of date range form. also providing blocked days as list of dates and booked date ranges as list of date ranges. i am also passing meeting duration, minute interval, month offset. and 2 time zones one is source time zone and another is target time zone. all i want to create a list of dates after removing all the booked datetimes and blocked days from source time zone to target time zone using luxon library.

like if i provide 540-720 as a numeric range with time interval of 30 minutes and duration of 30 mins with month offset as 0 (for current month) as a monday availability, it will return me list of dates for all the Monday of upcoming month like below

Jun 16, 2025 9:00 pm, Jun 16, 2025 9:30 pm, Jun 16, 2025 10:30 pm, Jun 16, 2025 11:00 pm,Jun 16, 2025 11:30 pm, Jun 16, 2025 12:00 pm.. here we dont have date Jun 16, 2025 10:00 pm as that time is booked.

In below code instance.publishState will return values from my bubble.io plugin to bubble.io app. Below code is converting my numeric ranges into list of dates when i provide Australia/Adelaide as timezone to my system’s current timezone but not to targetted timezone. you can see the actual working on calendly’s calendar link of event for the reference.

function(instance, properties, context) {
    if (null !== properties.sunday_pattern ? sunRanges = properties.sunday_pattern.get(0, properties.sunday_pattern.length()) : sunRanges = [],
    null !== properties.monday_pattern ? monRanges = properties.monday_pattern.get(0, properties.monday_pattern.length()) : monRanges = [],
    null !== properties.tuesday_pattern ? tueRanges = properties.tuesday_pattern.get(0, properties.tuesday_pattern.length()) : tueRanges = [],
    null !== properties.wednesday_pattern ? wedRanges = properties.wednesday_pattern.get(0, properties.wednesday_pattern.length()) : wedRanges = [],
    null !== properties.thursday_pattern ? thuRanges = properties.thursday_pattern.get(0, properties.thursday_pattern.length()) : thuRanges = [],
    null !== properties.friday_pattern ? friRanges = properties.friday_pattern.get(0, properties.friday_pattern.length()) : friRanges = [],
    null !== properties.saturday_pattern ? satRanges = properties.saturday_pattern.get(0, properties.saturday_pattern.length()) : satRanges = [],
    null !== properties.available_date_ranges ? availRanges = properties.available_date_ranges.get(0, properties.available_date_ranges.length()) : availRanges = [],
    null !== properties.blocked_date_ranges ? blockedDays = properties.blocked_date_ranges.get(0, properties.blocked_date_ranges.length()) : blockedDays = [],
    null !== properties.booked_date_ranges ? bookedDays = properties.booked_date_ranges.get(0, properties.booked_date_ranges.length()) : bookedDays = [],
    "Calendar Month" == properties.typeAvail)
        var localCalStart = luxon.DateTime.now().setZone(properties.time_zone).plus({
            months: properties.offset
        }), monthStart = localCalStart.startOf("month"), endMonthCal = localCalStart.endOf("month").plus({
            days: 1
        }), startFilter, setStart = startFilter = monthStart.minus({
            days: 1
        }), setEnd = endMonthCal;
    if ("Between These Dates" == properties.typeAvail)
        var setStart = luxon.DateTime.fromMillis(properties.set_start.getTime())
          , setEnd = luxon.DateTime.fromMillis(properties.set_end.getTime())
          , startFilter = setStart.setZone(properties.time_zone).minus({
            days: 1
        })
          , monthStart = setStart.setZone(properties.time_zone)
          , endMonthCal = setEnd.setZone(properties.time_zone).plus({
            days: 1
        });
    var sundayLuxonDates = [];
    if (sunRanges.length > 0)
        for (var sunday = monthStart.startOf("week").plus({
            days: 6
        }); sunday <= endMonthCal; )
            sunday >= startFilter && sundayLuxonDates.push(sunday),
            sunday = sunday.plus({
                weeks: 1
            });
    var mondayLuxonDates = [];
    if (monRanges.length > 0)
        for (var monday = monthStart.startOf("week"); monday <= endMonthCal; )
            monday >= startFilter && mondayLuxonDates.push(monday),
            monday = monday.plus({
                weeks: 1
            });
    var tuesdayLuxonDates = [];
    if (tueRanges.length > 0)
        for (var tuesday = monthStart.startOf("week").plus({
            days: 1
        }); tuesday <= endMonthCal; )
            tuesday >= startFilter && tuesdayLuxonDates.push(tuesday),
            tuesday = tuesday.plus({
                weeks: 1
            });
    var wednesdayLuxonDates = [];
    if (wedRanges.length > 0)
        for (var wednesday = monthStart.startOf("week").plus({
            days: 2
        }); wednesday <= endMonthCal; )
            wednesday >= startFilter && wednesdayLuxonDates.push(wednesday),
            wednesday = wednesday.plus({
                weeks: 1
            });
    var thursdayLuxonDates = [];
    if (thuRanges.length > 0)
        for (var thursday = monthStart.startOf("week").plus({
            days: 3
        }); thursday <= endMonthCal; )
            thursday >= monthStart && thursdayLuxonDates.push(thursday),
            thursday = thursday.plus({
                weeks: 1
            });
    var fridayLuxonDates = [];
    if (friRanges.length > 0)
        for (var friday = monthStart.startOf("week").plus({
            days: 4
        }); friday <= endMonthCal; )
            friday >= monthStart && fridayLuxonDates.push(friday),
            friday = friday.plus({
                weeks: 1
            });
    var saturdayLuxonDates = [];
    if (satRanges.length > 0)
        for (var saturday = monthStart.startOf("week").plus({
            days: 5
        }); saturday <= endMonthCal; )
            saturday >= monthStart && saturdayLuxonDates.push(saturday),
            saturday = saturday.plus({
                weeks: 1
            });
    var minuteInterval = properties.minute_interval;
    if (null == minuteInterval || minuteInterval <= 0)
        return console.log("Please enter a Minute Interval value. Must be a number value greater than zero"),
        !1;
    var availTimeSlots = []
      , blockedLuxonDates = []
      , bookingLength = properties.booking_duration;
    if (null == bookingLength || bookingLength <= 0)
        return console.log("Please enter a Booking Duration value. Must be a number value greater than zero"),
        !1;
    for (var x = 0; x < availRanges.length; x++) {
        blockedLuxonDates.push(luxon.DateTime.fromMillis(availRanges[x][0].getTime()).setZone(properties.time_zone));
        for (var i = 0; i <= availRanges[x][1].getTime() - availRanges[x][0].getTime() - 6e4 * bookingLength; i += 6e4 * minuteInterval)
            availTimeSlots.push(availRanges[x][0].getTime() + i)
    }
    for (var x = 0; x < blockedDays.length; x++)
        blockedLuxonDates.push(luxon.DateTime.fromMillis(blockedDays[x].getTime()).setZone(properties.time_zone));
    for (var x = 0; x < blockedLuxonDates.length; x++)
        for (var i = 0; i < sundayLuxonDates.length; i++)
            sundayLuxonDates[i].hasSame(blockedLuxonDates[x], "day") && sundayLuxonDates.splice([i], 1);
    for (var x = 0; x < blockedLuxonDates.length; x++)
        for (var i = 0; i < mondayLuxonDates.length; i++)
            mondayLuxonDates[i].hasSame(blockedLuxonDates[x], "day") && mondayLuxonDates.splice([i], 1);
    for (var x = 0; x < blockedLuxonDates.length; x++)
        for (var i = 0; i < tuesdayLuxonDates.length; i++)
            tuesdayLuxonDates[i].hasSame(blockedLuxonDates[x], "day") && tuesdayLuxonDates.splice([i], 1);
    for (var x = 0; x < blockedLuxonDates.length; x++)
        for (var i = 0; i < wednesdayLuxonDates.length; i++)
            wednesdayLuxonDates[i].hasSame(blockedLuxonDates[x], "day") && wednesdayLuxonDates.splice([i], 1);
    for (var x = 0; x < blockedLuxonDates.length; x++)
        for (var i = 0; i < thursdayLuxonDates.length; i++)
            thursdayLuxonDates[i].hasSame(blockedLuxonDates[x], "day") && thursdayLuxonDates.splice([i], 1);
    for (var x = 0; x < blockedLuxonDates.length; x++)
        for (var i = 0; i < fridayLuxonDates.length; i++)
            fridayLuxonDates[i].hasSame(blockedLuxonDates[x], "day") && fridayLuxonDates.splice([i], 1);
    for (var x = 0; x < blockedLuxonDates.length; x++)
        for (var i = 0; i < saturdayLuxonDates.length; i++)
            saturdayLuxonDates[i].hasSame(blockedLuxonDates[x], "day") && saturdayLuxonDates.splice([i], 1);
    for (var sunTimeSlots = [], sunLuxonIntervals = [], x = 0; x < sunRanges.length; x++)
        for (var i = 0; i < sundayLuxonDates.length; i++)
            sunLuxonIntervals.push(luxon.Interval.fromDateTimes(luxon.DateTime.fromObject({
                year: sundayLuxonDates[i].year,
                month: sundayLuxonDates[i].month,
                day: sundayLuxonDates[i].day,
                hour: Math.floor(sunRanges[x][0] / 60),
                minute: sunRanges[x][0] % 60
            }, {
                zone: properties.time_zone
            }), luxon.DateTime.fromObject({
                year: sundayLuxonDates[i].year,
                month: sundayLuxonDates[i].month,
                day: sundayLuxonDates[i].day,
                hour: Math.floor(sunRanges[x][1] / 60),
                minute: sunRanges[x][1] % 60
            }, {
                zone: properties.time_zone
            })));
    for (var x = 0; x < sunLuxonIntervals.length; x++)
        for (var i = 0; i <= sunLuxonIntervals[x].length("minutes") - bookingLength; i += minuteInterval)
            sunLuxonIntervals[x].start.plus({
                minutes: i
            }) >= setStart && sunLuxonIntervals[x].start.plus({
                minutes: i
            }) <= setEnd && sunTimeSlots.push(sunLuxonIntervals[x].start.plus({
                minutes: i
            }).toMillis());
    for (var monTimeSlots = [], monLuxonIntervals = [], x = 0; x < monRanges.length; x++)
        for (var i = 0; i < mondayLuxonDates.length; i++)
            monLuxonIntervals.push(luxon.Interval.fromDateTimes(luxon.DateTime.fromObject({
                year: mondayLuxonDates[i].year,
                month: mondayLuxonDates[i].month,
                day: mondayLuxonDates[i].day,
                hour: Math.floor(monRanges[x][0] / 60),
                minute: monRanges[x][0] % 60
            }, {
                zone: properties.time_zone
            }), luxon.DateTime.fromObject({
                year: mondayLuxonDates[i].year,
                month: mondayLuxonDates[i].month,
                day: mondayLuxonDates[i].day,
                hour: Math.floor(monRanges[x][1] / 60),
                minute: monRanges[x][1] % 60
            }, {
                zone: properties.time_zone
            })));
    for (var x = 0; x < monLuxonIntervals.length; x++)
        for (var i = 0; i <= monLuxonIntervals[x].length("minutes") - bookingLength; i += minuteInterval)
            monLuxonIntervals[x].start.plus({
                minutes: i
            }) >= setStart && monLuxonIntervals[x].start.plus({
                minutes: i
            }) <= setEnd && monTimeSlots.push(monLuxonIntervals[x].start.plus({
                minutes: i
            }).toMillis());
    for (var tueTimeSlots = [], tueLuxonIntervals = [], x = 0; x < tueRanges.length; x++)
        for (var i = 0; i < tuesdayLuxonDates.length; i++)
            tueLuxonIntervals.push(luxon.Interval.fromDateTimes(luxon.DateTime.fromObject({
                year: tuesdayLuxonDates[i].year,
                month: tuesdayLuxonDates[i].month,
                day: tuesdayLuxonDates[i].day,
                hour: Math.floor(tueRanges[x][0] / 60),
                minute: tueRanges[x][0] % 60
            }, {
                zone: properties.time_zone
            }), luxon.DateTime.fromObject({
                year: tuesdayLuxonDates[i].year,
                month: tuesdayLuxonDates[i].month,
                day: tuesdayLuxonDates[i].day,
                hour: Math.floor(tueRanges[x][1] / 60),
                minute: tueRanges[x][1] % 60
            }, {
                zone: properties.time_zone
            })));
    for (var x = 0; x < tueLuxonIntervals.length; x++)
        for (var i = 0; i <= tueLuxonIntervals[x].length("minutes") - bookingLength; i += minuteInterval)
            tueLuxonIntervals[x].start.plus({
                minutes: i
            }) >= setStart && tueLuxonIntervals[x].start.plus({
                minutes: i
            }) <= setEnd && tueTimeSlots.push(tueLuxonIntervals[x].start.plus({
                minutes: i
            }).toMillis());
    for (var wedTimeSlots = [], wedLuxonIntervals = [], x = 0; x < wedRanges.length; x++)
        for (var i = 0; i < wednesdayLuxonDates.length; i++)
            wedLuxonIntervals.push(luxon.Interval.fromDateTimes(luxon.DateTime.fromObject({
                year: wednesdayLuxonDates[i].year,
                month: wednesdayLuxonDates[i].month,
                day: wednesdayLuxonDates[i].day,
                hour: Math.floor(wedRanges[x][0] / 60),
                minute: wedRanges[x][0] % 60
            }, {
                zone: properties.time_zone
            }), luxon.DateTime.fromObject({
                year: wednesdayLuxonDates[i].year,
                month: wednesdayLuxonDates[i].month,
                day: wednesdayLuxonDates[i].day,
                hour: Math.floor(wedRanges[x][1] / 60),
                minute: wedRanges[x][1] % 60
            }, {
                zone: properties.time_zone
            })));
    for (var x = 0; x < wedLuxonIntervals.length; x++)
        for (var i = 0; i <= wedLuxonIntervals[x].length("minutes") - bookingLength; i += minuteInterval)
            wedLuxonIntervals[x].start.plus({
                minutes: i
            }) >= setStart && wedLuxonIntervals[x].start.plus({
                minutes: i
            }) <= setEnd && wedTimeSlots.push(wedLuxonIntervals[x].start.plus({
                minutes: i
            }).toMillis());
    for (var thuTimeSlots = [], thuLuxonIntervals = [], x = 0; x < thuRanges.length; x++)
        for (var i = 0; i < thursdayLuxonDates.length; i++)
            thuLuxonIntervals.push(luxon.Interval.fromDateTimes(luxon.DateTime.fromObject({
                year: thursdayLuxonDates[i].year,
                month: thursdayLuxonDates[i].month,
                day: thursdayLuxonDates[i].day,
                hour: Math.floor(thuRanges[x][0] / 60),
                minute: thuRanges[x][0] % 60
            }, {
                zone: properties.time_zone
            }), luxon.DateTime.fromObject({
                year: thursdayLuxonDates[i].year,
                month: thursdayLuxonDates[i].month,
                day: thursdayLuxonDates[i].day,
                hour: Math.floor(thuRanges[x][1] / 60),
                minute: thuRanges[x][1] % 60
            }, {
                zone: properties.time_zone
            })));
    for (var x = 0; x < thuLuxonIntervals.length; x++)
        for (var i = 0; i <= thuLuxonIntervals[x].length("minutes") - bookingLength; i += minuteInterval)
            thuLuxonIntervals[x].start.plus({
                minutes: i
            }) >= setStart && thuLuxonIntervals[x].start.plus({
                minutes: i
            }) <= setEnd && thuTimeSlots.push(thuLuxonIntervals[x].start.plus({
                minutes: i
            }).toMillis());
    for (var friTimeSlots = [], friLuxonIntervals = [], x = 0; x < friRanges.length; x++)
        for (var i = 0; i < fridayLuxonDates.length; i++)
            friLuxonIntervals.push(luxon.Interval.fromDateTimes(luxon.DateTime.fromObject({
                year: fridayLuxonDates[i].year,
                month: fridayLuxonDates[i].month,
                day: fridayLuxonDates[i].day,
                hour: Math.floor(friRanges[x][0] / 60),
                minute: friRanges[x][0] % 60
            }, {
                zone: properties.time_zone
            }), luxon.DateTime.fromObject({
                year: fridayLuxonDates[i].year,
                month: fridayLuxonDates[i].month,
                day: fridayLuxonDates[i].day,
                hour: Math.floor(friRanges[x][1] / 60),
                minute: friRanges[x][1] % 60
            }, {
                zone: properties.time_zone
            })));
    for (var x = 0; x < friLuxonIntervals.length; x++)
        for (var i = 0; i <= friLuxonIntervals[x].length("minutes") - bookingLength; i += minuteInterval)
            friLuxonIntervals[x].start.plus({
                minutes: i
            }) >= setStart && friLuxonIntervals[x].start.plus({
                minutes: i
            }) <= setEnd && friTimeSlots.push(friLuxonIntervals[x].start.plus({
                minutes: i
            }).toMillis());
    for (var satTimeSlots = [], satLuxonIntervals = [], x = 0; x < satRanges.length; x++)
        for (var i = 0; i < saturdayLuxonDates.length; i++)
            satLuxonIntervals.push(luxon.Interval.fromDateTimes(luxon.DateTime.fromObject({
                year: saturdayLuxonDates[i].year,
                month: saturdayLuxonDates[i].month,
                day: saturdayLuxonDates[i].day,
                hour: Math.floor(satRanges[x][0] / 60),
                minute: satRanges[x][0] % 60
            }, {
                zone: properties.time_zone
            }), luxon.DateTime.fromObject({
                year: saturdayLuxonDates[i].year,
                month: saturdayLuxonDates[i].month,
                day: saturdayLuxonDates[i].day,
                hour: Math.floor(satRanges[x][1] / 60),
                minute: satRanges[x][1] % 60
            }, {
                zone: properties.time_zone
            })));
    for (var x = 0; x < satLuxonIntervals.length; x++)
        for (var i = 0; i <= satLuxonIntervals[x].length("minutes") - bookingLength; i += minuteInterval)
            satLuxonIntervals[x].start.plus({
                minutes: i
            }) >= setStart && satLuxonIntervals[x].start.plus({
                minutes: i
            }) <= setEnd && satTimeSlots.push(satLuxonIntervals[x].start.plus({
                minutes: i
            }).toMillis());
    for (var allAvailTimeSlots = availTimeSlots.concat(sunTimeSlots, monTimeSlots, tueTimeSlots, wedTimeSlots, thuTimeSlots, friTimeSlots, satTimeSlots), bookedLuxonIntervals = [], i = 0; i < bookedDays.length; i++)
        bookedLuxonIntervals.push(luxon.Interval.fromDateTimes(luxon.DateTime.fromMillis(bookedDays[i][0].getTime()).setZone(properties.time_zone).minus({
            minutes: bookingLength - 1
        }), luxon.DateTime.fromMillis(bookedDays[i][1].getTime()).setZone(properties.time_zone)));
    for (var i = 0; i < bookedLuxonIntervals.length; i++)
        for (var x = allAvailTimeSlots.length - 1; x >= 0; x--)
            bookedLuxonIntervals[i].contains(luxon.DateTime.fromMillis(allAvailTimeSlots[x])) && allAvailTimeSlots.splice([x], 1);
    instance.publishState("available_date_times", allAvailTimeSlots),
    instance.publishState("is_loaded", "done")
    
}