datasenseapp / templates /index.html
binaychandra's picture
all code files
cce2a89
<!DOCTYPE html>
<html>
<head>
<title>Laboreconomics_allinone</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">LE_AllinOne</a>
</div>
</nav>
<div class="container mt-4">
<form method="POST">
<div class="row mb-3">
<div class="col">
<select class="form-select" name="Environment" enabled>
<option value="option1">DEV</option>
<option value="option2">UAT</option>
<option value="option3">PROD</option>
</select>
</div>
<div class="col">
<select class="form-select" name="dbtable" enabled>
<option value="workforce">Workforce</option>
<option value="badges">Badges</option>
<option value="learning">Learning</option>
<option value="lat">LAT</option>
<option value="tr">TR</option>
<option value="mct">MCT</option>
<option value="profqual">Profqual</option>
</select>
</div>
<div class="col">
<select class="form-select" name="sl_ssl" enabled>
<option value="option7">Consulting DnA</option>
<option value="option8">Consulting DET</option>
<option value="option9">Assurance DnA</option>
<option value="option9">Assurance Audit</option>
<option value="option9">TAX GCR EMEIA</option>
<option value="option9">EYK Content Delivery</option>
<option value="option9">ES RMS IASS</option>
</select>
</div>
<div class="col form-select" id="reportrange">
<i class="fa fa-calendar" name="daterange_report"></i>&nbsp;
<input type="hidden" name="calendar_value">
<span></span>
</div>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" id="toggleSwitch" onchange="toggleFormElements()">
<label class="form-check-label" for="toggleSwitch">use query</label>
</div>
<div class="row mb-3">
<div class="col">
<textarea class="form-control" name="querybox" rows="1" placeholder="Enter query" disabled></textarea>
</div>
</div>
<div class="row">
<div class="col">
<button type="submit" class="btn btn-primary" enabled>Submit</button>
</div>
</div>
</form>
<br>
{% if show_table %}
<div class="tab" id="tablestab">
<button class="tablinks" onclick="openTab(event, 'content1')" id="tab1">Workforce</button>
<button class="tablinks" onclick="openTab(event, 'content2')">GTE</button>
<button class="tablinks" onclick="openTab(event, 'content3')">Badges</button>
<button class="tablinks" onclick="downloadTableData()" style="position: absolute; top: 0; right: 20px;">
<i class="fas fa-download mr-2"></i> Download All
</button>
</div>
<!-- Content Area -->
<div id="content1" class="content" style="margin-bottom:110px">
<!-- <h2>Content 1</h2>-->
<!-- <p>This is the content for Tab 1.</p>-->
<div class="container" >
<div class="row">
<div class="col-9" style="overflow-x: auto; overflow-y:auto; height:342px; white-space: nowrap;border-top: 3px red">
<div style="border-top: 4px red;">
{{ form_data | safe}}
<!-- Your table content here -->
</div>
</div>
<div class="col-3">
<div class="card bg-light">
<div class="card-body" style="white-space: nowrap;background-color:#c5e0e0;">
<h5 class="card-title">Stats</h5>
<p class="card-text">Table Name: <strong>Table 1</strong></p>
<p class="card-text">Number of Records: <strong>100</strong></p>
<p class="card-text">No of Columns: <strong>24</strong></p>
<p class="card-text">DataTypes: <strong>String</strong></p>
<p class="card-text">Table values: <strong>99</strong></p>
<p class="card-text">Possible: <strong>Yes</strong></p>
<p class="card-text">DataVolume: <strong>Yes</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content2" class="content">
<div class="container" style="overflow-x: auto; white-space: nowrap; margin-top: 20px; ">
{{ form_data | safe }}
</div>
</div>
<div id="content3" class="content">
<div class="container" style="overflow-x: auto; white-space: nowrap; margin-top: 20px; ">
{{ form_data | safe }}
</div>
</div>
<div class="fixed-button">
<div class="container d-flex justify-content-end">
<button class="btn btn-info btn-lg" onclick="redirecttovalidation()">Proceed for validation ></button>
</div>
</div>
{% endif %}
<!-- {% if plot_div %}-->
<!-- <div class="container mt-4">-->
<!-- <h4>Bar Chart:</h4>-->
<!-- {{ plot_div | safe }}-->
<!-- </div>-->
<!-- {% endif %}-->
</div>
<!-- Add Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<!-- <script>-->
<!-- $(document).ready(function() {-->
<!-- $('#dtable').DataTable();-->
<!-- });-->
<!-- </script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Bootstrap Datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- DataTables JavaScript -->
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="{{url_for('static', filename='js/mytest.js')}}"></script>
<!-- <script>
document.getElementById("tab1").click();
</script> -->
</body>
</html>