Hugging Face's logo

Spaces:
AZONESTECHNOLOGIES
/
invoice_db
Sleeping

App Files Community
nithin81 commited on
Commit
0af2901
·
verified ·
1 Parent(s): 8d54669

Update invoice/templates/upload.html

Browse files
Files changed (1) hide show
  1. invoice/templates/upload.html +87 -73
invoice/templates/upload.html CHANGED
@@ -6,6 +6,7 @@
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Document Processor</title>
8
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
 
9
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
10
  </head>
11
  <body>
@@ -93,95 +94,108 @@
93
  <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
94
  <h1 class="mt-3 d-flex justify-content-between align-items-center">
95
  Processed Document Tables
96
- <!-- Save to MongoDB Button -->
97
- <button id="save-to-mongodb" class="btn btn-primary mt-3" style="display: none;">Save to MongoDB</button>
98
-
99
  </h1>
100
  <hr>
101
-
102
- <!-- Loading Animation -->
103
- <div id="loading-animation" style="display: none;" class="text-center">
104
- <div class="spinner-border" role="status">
105
- <span class="visually-hidden">Processing...</span>
106
- </div>
107
- <p>Extracting tables, please wait...</p>
108
- </div>
109
-
110
- <!-- Tables (Hidden initially) -->
111
- <div id="tables-container">
112
- {% if tables|length > 0 %}
113
- {% for table in tables %}
114
- <div class="table-section" id="table{{ forloop.counter0 }}" style="display: none;">
115
- <h3>Table {{ forloop.counter }}</h3>
116
 
117
- <!-- Row and Column delete options -->
118
- <div class="table-actions mb-3">
119
- <!-- Download CSV Button for each table -->
120
- <button class="btn btn-success download-csv" data-table-id="{{ forloop.counter0 }}">Download CSV</button>
121
- <button class="btn btn-danger delete-selected">Delete Selected</button>
 
 
 
 
 
 
 
 
 
 
 
 
122
  </div>
123
-
124
- <table class="table table-bordered">
125
- <thead>
126
- <tr>
127
- {% for column in table.columns %}
128
- <th>
129
- <input type="checkbox" class="select-column" data-column-id="{{ forloop.counter0 }}">
130
- {{ column }}
131
- </th>
132
- {% endfor %}
133
- <th><input type="checkbox" class="select-all-rows"></th> <!-- Checkbox for selecting all rows -->
134
- </tr>
135
- </thead>
136
- <tbody>
137
- {% for row in table.values %}
138
- <tr>
139
- {% for cell in row %}
140
- <td>{{ cell }}</td>
141
- {% endfor %}
142
- <td><input type="checkbox" class="select-row"></td> <!-- Checkbox for selecting this row -->
143
- </tr>
144
- {% endfor %}
145
- </tbody>
146
- </table>
147
- <hr>
148
  </div>
149
- {% endfor %}
150
- {% else %}
151
- <p>No tables found in the document.</p>
152
- {% endif %}
153
- </div>
154
- </main>
155
- </div>
156
- </div>
157
 
158
- <!-- Modal for entering invoice number -->
159
- <div class="modal fade" id="invoiceModal" tabindex="-1" aria-labelledby="invoiceModalLabel" aria-hidden="true">
160
- <div class="modal-dialog">
161
- <div class="modal-content">
162
- <div class="modal-header">
163
- <h5 class="modal-title" id="invoiceModalLabel">Enter Invoice Number</h5>
164
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
165
- </div>
166
- <div class="modal-body">
167
- <form id="invoice-form">
168
- <div class="mb-3">
169
- <label for="invoice-number" class="form-label">Invoice Number</label>
170
- <input type="text" class="form-control" id="invoice-number" name="invoice_number" required>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
171
  </div>
172
- <button type="submit" class="btn btn-primary">Save</button>
173
- </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
174
  </div>
175
- </div>
176
  </div>
177
  </div>
178
 
 
179
  <script src= "{% static 'js/script.js' %}"></script>
180
  <script>
181
- const saveToMongoDBUrl = "{% url 'save_to_mongodb' %}";
 
 
182
  </script>
183
 
184
 
 
185
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
186
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
187
  </body>
 
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Document Processor</title>
8
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <link rel="stylesheet" href="{% static 'css/style.css' %}">
10
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
11
  </head>
12
  <body>
 
94
  <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
95
  <h1 class="mt-3 d-flex justify-content-between align-items-center">
96
  Processed Document Tables
 
 
 
97
  </h1>
98
  <hr>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
 
100
+ <!-- Tabs for Report and Mapping Rule -->
101
+ <ul class="nav nav-tabs" id="documentTabs" role="tablist">
102
+ <li class="nav-item" role="presentation">
103
+ <a class="nav-link active" id="report-tab" data-bs-toggle="tab" href="#report" role="tab" aria-controls="report" aria-selected="true">Report</a>
104
+ </li>
105
+ <li class="nav-item" role="presentation">
106
+ <a class="nav-link" id="mapping-rule-tab" data-bs-toggle="tab" href="#mapping-rule" role="tab" aria-controls="mapping-rule" aria-selected="false">Mapping Rule</a>
107
+ </li>
108
+ </ul>
109
+
110
+ <div class="tab-content mt-3" id="documentTabsContent">
111
+ <!-- Report Tab Content (This is the current functionality) -->
112
+ <div class="tab-pane fade show active" id="report" role="tabpanel" aria-labelledby="report-tab">
113
+ <!-- Loading Animation -->
114
+ <div id="loading-animation" style="display: none;" class="text-center">
115
+ <div class="spinner-border" role="status">
116
+ <span class="visually-hidden">Processing...</span>
117
  </div>
118
+ <p>Extracting tables, please wait...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </div>
 
 
 
 
 
 
 
 
120
 
121
+ <!-- Tables (Hidden initially) -->
122
+ <div id="tables-container">
123
+ {% if tables|length > 0 %}
124
+ {% for table in tables %}
125
+ <div class="table-section" id="table{{ forloop.counter0 }}" style="display: none;">
126
+ <h3>Table {{ forloop.counter }}</h3>
127
+
128
+ <!-- Row and Column delete options -->
129
+ <div class="table-actions mb-3">
130
+ <!-- Download CSV Button for each table -->
131
+ <button class="btn btn-success download-csv" data-table-id="{{ forloop.counter0 }}">Download CSV</button>
132
+ <button class="btn btn-danger delete-selected">Delete Selected</button>
133
+ </div>
134
+
135
+ <table class="table table-bordered">
136
+ <thead>
137
+ <tr>
138
+ {% for column in table.columns %}
139
+ <th>
140
+ <input type="checkbox" class="select-column" data-column-id="{{ forloop.counter0 }}">
141
+ {{ column }}
142
+ </th>
143
+ {% endfor %}
144
+ <th><input type="checkbox" class="select-all-rows"></th> <!-- Checkbox for selecting all rows -->
145
+ </tr>
146
+ </thead>
147
+ <tbody>
148
+ {% for row in table.values %}
149
+ <tr>
150
+ {% for cell in row %}
151
+ <td>{{ cell }}</td>
152
+ {% endfor %}
153
+ <td><input type="checkbox" class="select-row"></td> <!-- Checkbox for selecting this row -->
154
+ </tr>
155
+ {% endfor %}
156
+ </tbody>
157
+ </table>
158
+ <hr>
159
+ </div>
160
+ {% endfor %}
161
+ {% else %}
162
+ <p>No tables found in the document.</p>
163
+ {% endif %}
164
  </div>
165
+ </div>
166
+
167
+ <!-- Mapping Rule Tab Content -->
168
+ <div class="tab-pane fade" id="mapping-rule" role="tabpanel" aria-labelledby="mapping-rule-tab">
169
+ <h3>Mapping Rule Operations</h3>
170
+ <table class="table table-bordered" id="mapping-rule-table">
171
+ <thead>
172
+ <tr>
173
+ <th>Source</th>
174
+ <th>Target (MongoDB Fields)</th>
175
+ </tr>
176
+ </thead>
177
+ <tbody id="mapping-body">
178
+ <!-- Rows will be inserted dynamically using JS -->
179
+ </tbody>
180
+ </table>
181
+ <button id="save-mapping" class="btn btn-primary">Save Mapping</button>
182
+ </div>
183
+
184
  </div>
185
+ </main>
186
  </div>
187
  </div>
188
 
189
+
190
  <script src= "{% static 'js/script.js' %}"></script>
191
  <script>
192
+ const remove_file = "{% url 'remove_file' %}";
193
+ const fetch_db = "{% url 'get_invoice_fields' %}";
194
+ const insert_to_db = "{% url 'insert_to_db' %}";
195
  </script>
196
 
197
 
198
+
199
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
200
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
201
  </body>