index.html Revision:   Date: 
<!--
/*
 * This file is part of the Cloud Services Integration Platform (CSIP),
 * a Model-as-a-Service framework, API and application suite.
 *
 * 2012-2017, OMSLab, Colorado State University.
 *
 * OMSLab licenses this file to you under the MIT license.
 * See the LICENSE file in the project root for more information.
 */
-->

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery-ui-1.12.1/jquery-ui.js"></script>
<script src="js/jtree/jstree.js"></script>

<script src="js/contextMenu/dist/jquery.contextMenu.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script-->
<script src="js/rotationbuilder.js"></script>
<script src="js/fileSaver/fileSaver.js"></script>

<link rel="stylesheet" href="css/jquery-ui/jquery-ui.css">
<link rel="stylesheet" href="js/contextMenu/dist/jquery.contextMenu.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />


<script>
$( function() 
{

});
</script>
  
</head>
<body>
<div class="rotationBuilder">
    <table id="manTable" class="">
        <thead>
            <tr>
                <th id='dragCol'></th>
                <th id='dateCol'>Date</th>
                <th id='opCol'>Operation</th>
                <th id='cropCol'>Crop</th>
                <th id='resCol'>Residue</th>
                <th id='resAmtCol'>Residue Amount</th>
                <th id='yieldCol'>Yield</th>
                <th id='yieldUnitCol'>Yield Unit</th>
                <th id='delCol'></th>
            </tr>
        </thead>
        <tbody id="managementRows">
        <tr>
                <td class='dragHandle'></td>
                <td><input size=10 class="datepicker"></td>
                <td><input class="opInput"></td>
                <td><input class="cropInput"></td> 
                <td><input class="resInput"></td> 
                <td><input size=8 class="resAmtInput"></td>
                <td><input size=8 class="yieldInput"></td>
                <td><input size=8 class="yieldUnitInput"></td>
                <td><button class="del_button">x</button></td>
        </tr>
        </tbody>
    </table>
    <div class="addRow">
      <span class="addRowButton">+</span>
      <span class="saveButton">Save</span>
      <span class="loadButton">Load</span>
    </div>

</div>
    <div id='operationsjsTree' style="display:none; text-align:left;">
    </div>
    
    <div id='cropsjsTree' style="display:none; text-align:left;">
    </div>
    
    <div id='resjsTree' style="display:none; text-align:left;">
    </div>
    
    
    
    <script id="rowTemplate" type="text/template">
        <tr>
                <td class="dragHandle"></td>
                <td><input size=10 class="datepicker"></td>
                <td><input class="opInput"></td>
                <td><input class="cropInput"></td> 
                <td><input class="resInput"></td> 
                <td><input size=8 class="resAmtInput"></td>
                <td><input size=8 class="yieldInput"></td>
                <td><input size=8 class="yieldUnitInput"></td>
                <td><button class="del_button">x</button></td>
        </tr>
    </script>
	
	<div id="dialog-confirm" style="display:none;" title="Remove row?">
		<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>This row will be permanently deleted and cannot be recovered. Are you sure?</p>
	</div>
</body>
</html>