Multi-Sensor/POCloud/html-templates/Calibration.html

<div class="row">
    <div class="col-xs-10 col-xs-offset-1">
        <form>
            <div class="form-group">
                <label for="number-of-ponds">Number of Ponds</label>
                <input class="form-control"
                    id="number-of-ponds"
                    type="number"
                    step="1"
                    value="<%= channels["plcpond.cfgnumberofponds"].value %>" />
                <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="1"
                    data-channelId="<%= channels["plcpond.cfgnumberofponds"].channelId %>"
                    data-techname="<%=channels["plcpond.cfgnumberofponds"].techName %>"
                    data-name="<%= channels["plcpond.cfgnumberofponds"].name%>"
                    data-nodechannelcurrentId="<%= channels["plcpond.cfgnumberofponds"].nodechannelcurrentId %>"
                    id="<%= channels["plcpond.cfgnumberofponds"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </div>
        </form>
    </div>
</div>

<div class="row">
    <div class="col-xs-6">
        <h2>Pond 1 Calibration</h2>
        <table id="calibration-data-table-1" class="table">
            <thead>
                <tr>
                    <th>Level (Ft.)</th>
                    <th>Volume</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <div class="col-xs-6">
        <h2>Pond 2 Calibration</h2>
        <table id="calibration-data-table-2" class="table">
            <thead>
                <tr>
                    <th>Level (Ft.)</th>
                    <th>Volume</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<div class="row">
    <div class="col-xs-6">
        <h2>Pond 3 Calibration</h2>
        <table id="calibration-data-table-3" class="table">
            <thead>
                <tr>
                    <th>Level (Ft.)</th>
                    <th>Volume</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <div class="col-xs-6">
        <h2>Pond 4 Calibration</h2>
        <table id="calibration-data-table-4" class="table">
            <thead>
                <tr>
                    <th>Level (Ft.)</th>
                    <th>Volume</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>


<div class="row pad15">
    <div class="col-md-12 entry-top-level" id="new-entry">
        <h2>Add a new Calibration Point</h2>
        <form>
            <div class="form-group">
                <label for="pond-select">Pond Number</label>
                <select class="form-control" id="pond-select">
                    <option value=1 >1</option>
                    <option value=2 >2</option>
                    <option value=3 >3</option>
                    <option value=4 >4</option>
                </select>
            </div>
            <div class="form-group">
                <label for="height-box">Height</label>
                <input class="form-control height_box"
                    id="height-box"
                    type="number"
                    step="any"
                    value="0">
            </div>

            <div class="form-group">
                <label for="volume-box">Volume</label>
                <input class="form-control volume_box"
                    id="volume-box"
                    type="number"
                    step="any"
                    value="0">
            </div>

            <a href="#"
            data-confirm-message="Are you sure you want to do this?"
            data-refreshpause="1"
            data-command=""
            data-staticsend="{'pond':0, 'height':0.0, 'volume':0.0}"
            data-channelId="<%= channels["plcpond.addcalibrationpoint"].channelId %>"
            data-techname="<%=channels["plcpond.addcalibrationpoint"].techName %>"
            data-name="<%= channels["plcpond.addcalibrationpoint"].name%>"
            data-nodechannelcurrentId="<%= channels["plcpond.addcalibrationpoint"].nodechannelcurrentId %>"
            id="<%= channels["plcpond.addcalibrationpoint"].channelId %>"
            class="btn btn-large btn-theme animated setstatic material-icons">send</a>
        </form>
    </div>
</div>

<script type="text/javascript">
    String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.replace(new RegExp(search, 'g'), replacement);
    };

    var configRaw = [""];
    configRaw.push("<%= channels["plcpond.pond1calibration"].value %>");
    configRaw.push("<%= channels["plcpond.pond2calibration"].value %>");
    configRaw.push("<%= channels["plcpond.pond3calibration"].value %>");
    configRaw.push("<%= channels["plcpond.pond4calibration"].value %>");

    for (var j = 1; j<=4; j++){
        var configData = JSON.parse(configRaw[j].replaceAll("'", '"'));
        console.log(configData);
        var tableRows = [];
        for (var i = 0; i < configData.length; i++){
            var thisHtml = "<tr><td>" + configData[i].height + "</td><td>" + configData[i].volume + '</td><td><a href="#" data-confirm-message="Are you sure you want to do this?" data-refreshpause="1" data-command="" data-staticsend="{\'pond\': '+ j +', \'point\': '+ i +'}" data-channelId="<%= channels["plcpond.deletecalibrationpoint"].channelId %>" data-techname="<%=channels["plcpond.deletecalibrationpoint"].techName %>" data-name="<%= channels["plcpond.deletecalibrationpoint"].name%>" data-nodechannelcurrentId="<%= channels["plcpond.deletecalibrationpoint"].nodechannelcurrentId %>" id="<%= channels["plcpond.deletecalibrationpoint"].channelId %>" class="btn btn-large btn-theme animated setstatic">Delete</a></tr>';
            tableRows.push(thisHtml);
        }
        $("#calibration-data-table-"+ j +" > tbody").html(tableRows);
    }


    $("#height-box").change(function(){
        var currentNewPoint = JSON.parse($("#<%= channels["plcpond.addcalibrationpoint"].channelId %>").attr('data-staticsend').replaceAll("'", '"'));
        currentNewPoint['height'] = $("#height-box").val();
        $("#<%= channels["plcpond.addcalibrationpoint"].channelId %>").attr('data-staticsend', JSON.stringify(currentNewPoint).replaceAll('"', "'"));
    })

    $("#volume-box").change(function(){
        var currentNewPoint = JSON.parse($("#<%= channels["plcpond.addcalibrationpoint"].channelId %>").attr('data-staticsend').replaceAll("'", '"'));
        currentNewPoint['volume'] = $("#volume-box").val();
        $("#<%= channels["plcpond.addcalibrationpoint"].channelId %>").attr('data-staticsend', JSON.stringify(currentNewPoint).replaceAll('"', "'"));
    })

    $("#pond-select").change(function(){
        var currentNewPoint = JSON.parse($("#<%= channels["plcpond.addcalibrationpoint"].channelId %>").attr('data-staticsend').replaceAll("'", '"'));
        currentNewPoint['pond'] = $("#pond-select").val();
        $("#<%= channels["plcpond.addcalibrationpoint"].channelId %>").attr('data-staticsend', JSON.stringify(currentNewPoint).replaceAll('"', "'"));
    })

    $("#number-of-ponds").change(function(){
        $("#<%= channels["plcpond.cfgnumberofponds"].channelId %>").attr('data-staticsend', $("#number-of-ponds").val());
    })

</script>