Hugging Face's logo

Spaces:
binaychandra
/
datasenseapp
Running

App Files Community
datasenseapp
File size: 5,171 Bytes 
cce2a89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f3d8a77
cce2a89
 
 
 
 
 
 
3465bfc
cce2a89
f3d8a77
cce2a89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fcc6ca2
 
 
 
 
 
 
 
 
 
 
08f529a
152735e
 
 
 
 
 
 
 
 
 
 
cce2a89
152735e
 
 
 
 
cce2a89
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
{% extends 'lay_side.html' %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/data_style.css') }}">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap5.min.css">
    
{% endblock %}

{% block content %}
<div class="container" style="margin-bottom: 75px;">
    
    <!-- First Row: Label, Dropdown, and Download Button -->
    <div class="row" style="background-color:rgb(135, 167, 167); padding-top: 10px; padding-bottom: 10px; margin-left: 0px; margin-right: 0px;">
      <div class="col-md-2" style="margin-left: 15px;">
        <!-- Label for the dropdown -->
        <label for="table-dropdown" style="margin-top: 5px; font-weight: 600;">Table Name : </label>
      </div>
      <div class="col-md-6">
        <!-- Dropdown for table selection -->
        <select id="table-dropdown" class="form-control" style="margin-left: -85px; width: auto; max-width: 100%;">
          {% for tbl_name, _ in table_htmls.items() %}
            <option value="{{ loop.index }}">{{ tbl_name | upper }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3 d-flex justify-content-end align-items-center" style="margin-left: 70px;">
        <!-- Download Button -->
        <p>{{ tempdisplay }}</p>
        <button class="btn btn-light" onclick="downloadTableData()">
          <i class="fas fa-download mr-2"></i> Download
        </button>
      </div>
    </div>

    <!-- Second Row: Table Contents -->
    <div class="tab" id="tablestab" style="padding: 10px 10px 10px;">
      {% for _, table_html in table_htmls.items() %}
        <div class="tabcontent" id="content{{ loop.index }}">
          {{ table_html | safe }} <!-- The "safe" filter is used to render the HTML content as-is -->
        </div>
      {% endfor %}
    </div>
  </div>

    <div class="fixed-button">
      <!-- <div class="col-md-3 d-flex justify-content-end align-items-center" style="margin-left: 70px;"> -->
        <div class="container d-flex justify-content-end align-items-center" style="margin-left: 50px;">
            <button class="btn btn-warning" onclick="redirecttovalidation()">Proceed for validation <i class="fas fa-arrow-right"></i></button>
        </div>
    </div>
    <div id="content">
      {% include 'chatfile8.html' %}
    </div>
</div>
{% endblock %}

{% block javascript %}
    <!-- Add any additional JavaScript specific to data.html here -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="{{ url_for('static', filename='js/data_script.js') }}"></script>
    
    <script>
        $(document).ready(function () {
          console.log("Print hello")
            {% for tbl_name, _ in table_htmls.items() %}
            $('#dtable_{{ tbl_name }}').DataTable({
                scrollX: true
            });
            {% endfor %}
            // document.getElementById("tab1").click();
        });
    </script>
    <script>
        // JavaScript code to handle the dropdown change event and show the corresponding content div
        $(document).ready(function () {
          // Show the initial selected table content on page load
          showSelectedTableContent();
      
          // Handle dropdown change event
          $('#table-dropdown').on('change', function () {
            showSelectedTableContent();
          });
      
          // Function to show the selected table content
          function showSelectedTableContent() {
            const selectedTableIndex = $('#table-dropdown').val();
            $('.tabcontent').hide();
            $('#content' + selectedTableIndex).show();
          }
        });
      
        // Function to handle the table data download
        function downloadTableData() {
          // Get the selected table name from the dropdown
          const selectedTableIndex = $('#table-dropdown').val();
          
          // Map the selected index back to the table name
          const tableName = $("#table-dropdown option:selected").text().toLowerCase(); // Assuming the table name is stored in lowercase as CSV filename

          // Build the URL for the download endpoint
          const downloadUrl = `/download/${tableName}`;

          // Redirect the browser to the download URL to trigger the download
          window.location.href = downloadUrl;
        }
      
    </script>
    <script>
        var req_tables = {{ req_tables | safe }};
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            console.log("Entered")
            var dropdown = document.getElementById("table-dropdown");
            console.log("The value is , ", dropdown.value)
            var hiddenField = document.getElementById("hiddenField");

            dropdown.addEventListener("change", function() {
                hiddenField.value = dropdown.value;
            });
        });
    </script>
{% endblock %}