testdrive/indicators.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Indicators Test</title>
</head>
<style>

    body {
        background-color: lavender;
        margin: 0;
        padding: 4em;
        font-size: 1.25em;
        font-family: -apple-system, Helvetica, 
            'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
            'Open Sans', 'Helvetica Neue', sans-serif;
    }

    input[type="checkbox"] {
        background-color: lavender;
        border: 1px solid #ddd;
        font-size: 1.2em;
    }

    #IndGrid {
        grid-template-columns: 1fr 1fr;
        display: grid;
    }

    @media screen AND (max-width: 720px) {
        body {
            padding: 1.5em;
        }
    }
</style>
<body>  

    <h1>Indicators List</h1>
    <p>
        This is to test JS automagically creating checkboxes of indicicators and getting user input.
    </p>
    <div id="IndGrid">
        <p>
            Name
        </p>
        <p>
            Checkbox
        </p>
    </div>
    <input type="button" value="Go" onclick="boxes_pressed()">
</body>
<script>
    let indicicators = {
        "studies": [
            "ACCD@tv-basicstudies",
            "studyADR@tv-basicstudies",
            "AROON@tv-basicstudies",
            "ATR@tv-basicstudies",
            "AwesomeOscillator@tv-basicstudies",
            "BB@tv-basicstudies",
            "BollingerBandsR@tv-basicstudies",
            "BollingerBandsWidth@tv-basicstudies",
            "CMF@tv-basicstudies",
            "ChaikinOscillator@tv-basicstudies",
            "chandeMO@tv-basicstudies",
            "ChoppinessIndex@tv-basicstudies",
            "CCI@tv-basicstudies",
            "CRSI@tv-basicstudies",
            "CorrelationCoefficient@tv-basicstudies",
            "DetrendedPriceOscillator@tv-basicstudies",
            "DM@tv-basicstudies",
            "DONCH@tv-basicstudies",
            "DoubleEMA@tv-basicstudies",
            "EaseOfMovement@tv-basicstudies",
            "EFI@tv-basicstudies",
            "ENV@tv-basicstudies",
            "FisherTransform@tv-basicstudies",
            "HV@tv-basicstudies",
            "hullMA@tv-basicstudies",
            "IchimokuCloud@tv-basicstudies",
            "KLTNR@tv-basicstudies",
            "KST@tv-basicstudies",
            "LinearRegression@tv-basicstudies",
            "MACD@tv-basicstudies",
            "MOM@tv-basicstudies",
            "MF@tv-basicstudies",
            "MoonPhases@tv-basicstudies",
            "MASimple@tv-basicstudies",
            "MAExp@tv-basicstudies",
            "MAWeighted@tv-basicstudies",
            "OBV@tv-basicstudies",
            "PSAR@tv-basicstudies",
            "PivotPointsHighLow@tv-basicstudies",
            "PivotPointsStandard@tv-basicstudies",
            "PriceOsc@tv-basicstudies",
            "PriceVolumeTrend@tv-basicstudies",
            "ROC@tv-basicstudies",
            "RSI@tv-basicstudies",
            "VigorIndex@tv-basicstudies",
            "VolatilityIndex@tv-basicstudies",
            "SMIErgodicIndicator@tv-basicstudies",
            "SMIErgodicOscillator@tv-basicstudies",
            "Stochastic@tv-basicstudies",
            "StochasticRSI@tv-basicstudies",
            "TripleEMA@tv-basicstudies",
            "Trix@tv-basicstudies",
            "UltimateOsc@tv-basicstudies",
            "VSTOP@tv-basicstudies",
            "Volume@tv-basicstudies",
            "VWAP@tv-basicstudies",
            "MAVolumeWeighted@tv-basicstudies",
            "WilliamR@tv-basicstudies",
            "WilliamsAlligator@tv-basicstudies",
            "WilliamsFractal@tv-basicstudies",
            "ZigZag@tv-basicstudies"
        ]
    }
</script>
<script>
    let number = 1;
    
    
    // make html stuff functions 
    function box_create(name = "") {
        let box = document.createElement("input")
        box.type = "checkbox"
        box.id = name
        return box
    }
    function p_create(text = "null") {
        if(text == "null") throw "Did not give function 'p_create' parameter 'text'"

        // create p tag directly (with doc.createEl) save to var.
        let p = document.createElement("p")

        // set p tag's text
        p.innerText = text
        return p
    }
    
    
    // process our data
    function process_indicators(names = indicicators.studies) {

        // makes an empty list to store the short indicators
        let shorter_names = []

        // loops over the long indicators
        names.forEach(ind_name => {
            
            // removes extra stuff and saves to a variable
            let new_name = ind_name.replace("@tv-basicstudies", "")

            // adds the new name to the list
            shorter_names.push(new_name)
        })
        return shorter_names
    }
    
    
    // root function
    function add_inds_to_page() {


        // get the processed array of our data
        let indicator_names = process_indicators()

        // loop over the data y add to the html dom body grid
        indicator_names.forEach(name => {

            // places indicator into a p tag 
            // then adds it to the html dom grid
            let name_element = p_create(name)
            IndGrid.appendChild(name_element)

            let checkbox = box_create(name)
            IndGrid.appendChild(checkbox)
        })

        // add p element to the IndGrid div grid in body
        IndGrid.appendChild(p_tag)

    }

    function boxes_pressed() {
        box_ids = process_indicators()
        checked_list = []
        box_ids.forEach(name => {
            if (!window[name].checked) return

            checked_list.push(window[name].id + "@tv-basicstudies")
        })
        console.log(checked_list)
        return checked_list
    }

    function start() {

        // first fn to call
        add_inds_to_page()

        // that's it
    }

    // calls the function as soon as you load the page
    // (after all the content y things load)
    start()
</script>
</script>

</html>