POC-Java-www/pocwww/templates/config.jinja2

{% from 'pagination.jinja2' import render_pagination %}
{% extends "layout.jinja2" %}

{% block content %}

<div class="content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>Well Configuration</h2>
                <form>
                    <div class="form-group">
                        <label for="wellName">Well Name</label>
                        <input type="text" class="form-control" id="wellName" value="{{config.wellName}}">
                    </div>

                    <div class="form-group">
                        <label for="deltaT">Delta T</label>
                        <input type="number" class="form-control" id="deltaT" value="{{config.deltaT}}" step="0.001" min="0.001" max="0.2">
                    </div>

                    <div class="form-group">
                        <label for="pumpDiameter">Pump Diameter</label>
                        <input type="number" class="form-control" id="pumpDiameter" value="{{config.pumpDiameter}}" step="0.001" min="0.001" max="10">
                    </div>

                    <div class="form-group">
                        <label for="fluidGradient">Fluid Gradient</label>
                        <input type="number" class="form-control" id="fluidGradient" value="{{config.fluidGradient}}" step="0.001" min="0.001" max="2.0">
                    </div>

                    <div class="form-group">
                        <label for="tubingID">Tubing ID</label>
                        <input type="number" class="form-control" id="tubingID" value="{{config.tubingID}}" step="0.001" min="0.001" max="24">
                    </div>

                    <div class="form-group">
                        <label for="tubingOD">Tubing OD</label>
                        <input type="number" class="form-control" id="tubingOD" value="{{config.tubingOD}}" step="0.001" min="0.001" max="24">
                    </div>

                    <div class="form-group">
                        <label for="tubingAnchorDepth">Tubing Anchor Depth</label>
                        <input type="number" class="form-control" id="tubingAnchorDepth" value="{{config.tubingAnchorDepth}}" step="0.001" min="0.001">
                    </div>

                    <div class="form-group">
                        <label for="structuralRating">Structural Rating</label>
                        <input type="number" class="form-control" id="structuralRating" value="{{config.structuralRating}}" step="0.001" min="0.001">
                    </div>

                    <div class="form-group">
                        <label for="stuffingBoxFriction">Stuffing Box Friction</label>
                        <input type="number" class="form-control" id="stuffingBoxFriction" value="{{config.stuffingBoxFriction}}" step="0.5" min="0.0">
                    </div>

                    <div class="form-group">
                        <label for="tubingHeadPressure">Tubing Head Pressure</label>
                        <input type="number" class="form-control" id="tubingHeadPressure" value="{{config.tubingHeadPressure}}" step="0.001" min="0.0">
                    </div>
                    <div class="form-group">
                        <label for="storedBy">Last Stored By</label>
                        <input type="text" class="form-control disabled" id="storedBy" value="{{config.storedBy}}" disabled>
                    </div>
                    <h2>Taper Setup</h2>
                    <div class="table table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Taper</th>
                                    <th>Length</th>
                                    <th>Diameter</th>
                                    <th>Material</th>
                                    <th>Damping Factor</th>
                                </tr>
                            </thead>

                            <tbody>
                                {% for taper in config.tapers %}
                                <tr>
                                    <td class="taper-number">{{loop.index}}</td>
                                    <td><input type="number" class="form-control" id="taper-{{loop.index}}-length" value="{{taper.length}}" /></td>
                                    <td><input type="number" class="form-control" id="taper-{{loop.index}}-diameter" value="{{taper.diameter}}" /></td>
                                    <td><select class="form-control" id="taper-{{loop.index}}-material" value="{{taper.material}}"><option value="steel">Steel</option><option value="fiberglass">Fiberglass</option></select></td>
                                    <!-- <td><input type="text" class="form-control" id="taper-{{loop.index}}-material" value="{{taper.material}}" /></td> -->
                                    <td><input type="number" class="form-control" id="taper-{{loop.index}}-dampingFactor" value="{{taper.dampingFactor}}" /></td>
                                </tr>
                                {% endfor %}
                                <span id="morerows"></span>
                            </tbody>
                        </table>
                        <button id="add-row" class="btn btn-primary"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Taper</button>
                        <hr />

                        <div class="alert alert-success alert-dismissable hidden" id="update-success">
                            <span>
                                <p>Configuration successfully updated!</p>
                            </span>
                        </div>
                        <div class="alert alert-danger alert-dismissable hidden" id="update-failed">
                            <span>
                                <p>Failed to update configuration.</p>
                            </span>
                        </div>
                        <button id="submit" class="btn btn-default">Update Well Configuration</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

    <script>
    $( "#add-row" ).click(function( event ) {
        event.preventDefault();
        var nextTaper = parseInt($(".taper-number").last().text()) + 1;
        if(nextTaper <= 10){
            var taperHTML = '<tr><td class="taper-number">' + nextTaper + '</td><td><input type="number" class="form-control" id="taper-'+ nextTaper + '-length" value="0.0" /></td><td><input type="number" class="form-control" id="taper-' + nextTaper + '-diameter" value="0.0" /></td><td><select class="form-control" id="taper-' + nextTaper + '-material" value=""><option value="steel">Steel</option><option value="fiberglass">Fiberglass</option></select></td><td><input type="number" class="form-control" id="taper-' + nextTaper + '-dampingFactor" value="0.0" /></td></tr>';
            $("tbody").append(taperHTML);
        }
    });

    function configUpdatedSuccessfully(data){
        console.log(data);
        if(data.stored_result){
            $('#update-success').removeClass('hidden');
        } else {
            $('#update-failed').removeClass('hidden');
        }
    }

    $("#submit").click(function(event){
        event.preventDefault();
        $('#update-success').addClass('hidden');
        $('#update-failed').addClass('hidden');
        var newObject = {};
        newObject.wellName = $("#wellName").val();
        newObject.deltaT = parseFloat($("#deltaT").val());
        newObject.pumpDiameter = parseFloat($("#pumpDiameter").val());
        newObject.fluidGradient = parseFloat($("#fluidGradient").val());
        newObject.tubingID = parseFloat($("#tubingID").val());
        newObject.tubingOD = parseFloat($("#tubingOD").val());
        newObject.tubingAnchorDepth = parseFloat($("#tubingAnchorDepth").val());
        newObject.structuralRating = parseFloat($("#structuralRating").val());
        newObject.stuffingBoxFriction = parseFloat($("#stuffingBoxFriction").val());
        newObject.tubingHeadPressure = parseFloat($("#tubingHeadPressure").val());

        var taperList = [];
        var lastTaper = parseInt($(".taper-number").last().text())
        for (var i = 1; i <= lastTaper; i++){
            taperList.push({
                length: parseFloat($("#taper-" + i + "-length").val()),
                diameter: parseFloat($("#taper-" + i + "-diameter").val()),
                material: $("#taper-" + i + "-material").val(),
                dampingFactor: parseFloat($("#taper-" + i + "-dampingFactor").val()),
            })
        }
        newObject.tapers = taperList;




        $.ajax({
            type: "POST",
            dataType: 'json',
            data: JSON.stringify(newObject),
            contentType: "application/json; charset=utf-8",
            url: "/json/updateconfig",
            success: configUpdatedSuccessfully
        });
    })
    </script>
    {% endblock content %}