TamperMonkey script for HourGlass adding ability to save/load/delete presets

HourGlass Preset Mod

// ==UserScript==
// @name         HourGlass Preset Mod
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds adding/removing presets for product,project,activity,capitalize,international 
// @author       Cristian Novac
// @match        https://sec.kmbs.us/version2/lab/hourglass/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const defaults=[
        {"name":"DSP meeting","product":1,"project":336,"activity":9,"capitalize":true, "international":false},
        {"name":"DP meeting","product":1,"project":234,"activity":9,"capitalize":false, "international":false}
    ]
    // localStorage.setItem('presets', JSON.stringify(defaults));
    let presets = JSON.parse(localStorage.getItem('presets'));
    console.log("[TM]: presets", presets);

    const productEl = document.querySelector('#product');
    const projectEl = document.querySelector('#project');
    const activityEl = document.querySelector('#activity');

    const capitalYesEl = document.querySelector('#yes-select-button');
    const capitalNoEl = document.querySelector('#no-select-button');
    let isCapital = capitalYesEl.classList.contains('btn-lit')?true:false;

    const internYesEl = document.querySelector('#yes-int-select-button')
    const internNoEl = document.querySelector('#no-int-select-button')
    let isIntern = internYesEl.classList.contains('btn-lit')?true:false;

    const appendToEl = document.querySelectorAll('.status')[0];
    const presetSelectorLabel = document.createElement("label");
    presetSelectorLabel.innerText = "Select preset:";
    appendToEl.appendChild(presetSelectorLabel);

    const presetSelectorEl = document.createElement("select");
    presetSelectorEl.id="presetSelector";
    const defaultOptionEl = document.createElement("option");
    defaultOptionEl.value="";
    defaultOptionEl.selected=true;
    defaultOptionEl.disabled=true;
    defaultOptionEl.text="select preset";
    presetSelectorEl.appendChild(defaultOptionEl);
    appendToEl.appendChild(presetSelectorEl);

    const savePresetBtn = document.createElement('button');
    savePresetBtn.innerText="Save Preset";
    appendToEl.appendChild(savePresetBtn);

    const deletePresetBtn = document.createElement('button');
    deletePresetBtn.innerText="Delete Preset";
    appendToEl.appendChild(deletePresetBtn);

    if(presets){
        presets.forEach(preset=>{
            addOption(preset);
        })
    }


    const handleSavePreset = ()=>{
        const presetName = prompt("Enter Preset Name. Note: If preset with same name is preset it will be replaced", "");
        if(!presetName) return;
        const newPreset = {name: presetName,
                           product: productEl.value,
                           project: projectEl.value,
                           activity: activityEl.value,
                           capitalize: isCapital,
                           international: isIntern}
        let newPresets = (presets===null)?[]:presets.filter(_preset=>_preset.name!==newPreset.name);
        newPresets.push(newPreset);
        addOption(newPreset);
        presets = newPresets;
        localStorage.setItem("presets",JSON.stringify(presets));
        console.log('[TM]: preset saved');
    }

    const handleDeletePreset = ()=>{
        let newPresets = presets.filter(_preset=>_preset.name!==presetSelectorEl.value);
        presets=newPresets;
        const idx = presetSelectorEl.options.selectedIndex;
        if(idx>0){
            presetSelectorEl.options[idx]=null;
        }
        localStorage.setItem("presets",JSON.stringify(presets));
        handlepresetChange();
        console.log('[TM]: preset delete');
    }

    function addOption(preset){
        const optionEl = document.createElement('option');
        optionEl.text = preset.name;
        optionEl.name = preset.name;
        optionEl.value = preset.name;
        optionEl.product = preset.product;
        optionEl.project = preset.project;
        optionEl.activity = preset.activity;
        optionEl.capitalize = preset.capitalize;
        optionEl.international = preset.international;
        presetSelectorEl.appendChild(optionEl);
    }

    const handlepresetChange=()=>{
        const _selectedEl = presetSelectorEl.selectedOptions[0];
        productEl.value = _selectedEl.product;
        productEl.dispatchEvent(new Event('change', { 'bubbles': true }))
        setTimeout(()=>{projectEl.value = _selectedEl.project},100);
        projectEl.dispatchEvent(new Event('change', { 'bubbles': true }))
        setTimeout(()=>{activityEl.value = _selectedEl.activity},100);

        console.log(_selectedEl.product, _selectedEl.project, _selectedEl.activity);
        if(_selectedEl.capitalize){
            console.log('capitalized');
            isCapital = true;
            capitalYesEl.click();
        }else{
            console.log('not capitalized');
            isCapital=false;
            capitalNoEl.click();
        }
        if(_selectedEl.international){
            console.log('international');
            isIntern=true;
            internYesEl.click();
        }else{
            console.log('not international');
            isIntern=false;
            internNoEl.click();
        }
    }
    const handleCapitalizeChange=(e)=>{
        isCapital = capitalYesEl.classList.contains('btn-lit')?true:false;

    }
    const handleInternationalChange=(e)=>{
        isIntern = internYesEl.classList.contains('btn-lit')?true:false;
    }

    presetSelectorEl.addEventListener("change",handlepresetChange);
    capitalYesEl.addEventListener("click", handleCapitalizeChange);
    capitalNoEl.addEventListener("click", handleCapitalizeChange);
    internYesEl.addEventListener("click", handleInternationalChange);
    internNoEl.addEventListener("click", handleInternationalChange);
    savePresetBtn.addEventListener('click',handleSavePreset);
    deletePresetBtn.addEventListener('click',handleDeletePreset);
})();