feedback.html

{%extends 'base.html'%}

{%block head%}

<title>Feedback Page</title>
<link rel="stylesheet" href="static/css/feedback.css">
<!-- <script src="{{ url_for('static', filename='js/feedback.js') }}"></script> -->
<style type="text/css">
    .d-none {
        display: none;
    }

</style>
{%endblock%}

{%block body%}

<div class="forms">
        <!-- <label for="options">Choose an option:</label> -->
        <h1>Choose an option:</h1>
        <select name="options" id="options" onchange="enablePonds(this)">
            <option value="">Please select</option>
            <option value="do">Manual DO input</option>
            <option value="biomass">Manual Biomass input</option>
            <option value="feedback">Feedback</option>
        </select>

        <form id="ponds" class="d-none">
            <label for="pond_num">Pond Number</label>
            <input 
                type="text" 
                id="pond" 
                name="pond" 
                placeholder="The pond number is...">
            
            <label for="do_level">Collected DO level</label>    
            <input
                type="text"
                id="do"
                name="do"
                placeholder="The collected DO percentage is..." >  
                
            <input type="submit" value="Submit">
        </form>

        <form id="tanks" class="d-none">
            <label for="tank_num">Tank Number</label>
            <input 
                type="text" 
                id="tank" 
                name="tank" 
                placeholder="The tank number is...">
            
            <label for="bms_level">Calculated Biomass</label>    
            <input
                type="text"
                id="biomass"
                name="biomass"
                placeholder="The calculated biomass is..." >
            
            <input type="submit" value="Submit">
        </form>

        <form id="feedback" class="d-none">
            <label for="name">Name</label>
            <input 
                type="text" 
                id="name" 
                name="name" 
                placeholder="Your name">
        
            <label for="comment">Comment</label>
            <textarea
                id="comment"
                name="comment"
                placeholder="Write something.." 
                style="height:6%">
            </textarea>  
            <input type="submit" value="Submit"> 
        </form>

</div>

<script type="text/javascript">
    function enablePonds(answer) {
        if (answer.value == "do"){
            document.getElementById('ponds').classList.remove('d-none');
            document.getElementById('tanks').classList.add('d-none');
            document.getElementById('feedback').classList.add('d-none');
        }
        else if (answer.value == "biomass"){
            document.getElementById('tanks').classList.remove('d-none');
            document.getElementById('ponds').classList.add('d-none');
            document.getElementById('feedback').classList.add('d-none');
        }

        else if (answer.value == "feedback"){
            document.getElementById('feedback').classList.remove('d-none');
            document.getElementById('tanks').classList.add('d-none');
            document.getElementById('ponds').classList.add('d-none');
        }
        else{
            document.getElementById('feedback').classList.add('d-none');
            document.getElementById('tanks').classList.add('d-none');
            document.getElementById('ponds').classList.add('d-none');
        }
    }
</script>


{%endblock%}