Redmind commited on
Commit
61f28f3
·
verified ·
1 Parent(s): 98ca5b0

Update templates/dashboard.html

Browse files
Files changed (1) hide show
  1. templates/dashboard.html +270 -270
templates/dashboard.html CHANGED
@@ -1,271 +1,271 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Dashboard</title>
8
- <!-- CSS -->
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
10
- <link rel="stylesheet" type="text/css" href="../static/css/style.css" />
11
- <link rel="stylesheet" type="text/css" href="../static/css/dashboard.css" />
12
- <link rel="stylesheet" type="text/css" href="../static/css/perfect-scrollbar.css" />
13
- <link rel="stylesheet" href="/static/css/Dashboard1.css">
14
- </head>
15
-
16
- <body>
17
- {% set company_name = company_name %}
18
- {% include 'sidepane.html' %}
19
-
20
- <div class="wrapper">
21
- <section class="main-header">
22
- <div class="container-fluid">
23
- <div id="company-block" class="form-group left-align" style="display: none;">
24
- <label for="company" class="ml-3" style="display: inline-block; margin-right: 10px;">
25
- Select the Company Name to view the details <span class="text-danger">*</span>
26
- </label>
27
- <select type="text" id="company" name="company" class="ml-3 form-control"
28
- style="display: inline-block; width: 20%;" required>
29
- <option value="" selected>Select</option>
30
- </select>
31
- </div>
32
-
33
- <div class="row">
34
- <div class="col-md-6">
35
- <div class="card bg-primary">
36
- <div class="card-body">
37
- <div class="media align-items-center">
38
- <span class="p-3 mr-3 feature-icon rounded">
39
- <img src="../static/logos/calendar-silhouette.svg" />
40
- </span>
41
- <div class="media-body">
42
- <p class="fs-30 text-white mb-2">KnowledgeBase</p>
43
- <span id="knowledgeBaseCount"
44
- class="fs-48 text-white font-w600">{{table_count_of_each_table.knowledge_base}}</span>
45
- </div>
46
- </div>
47
- </div>
48
- </div>
49
- </div>
50
- <div class="col-md-6">
51
- <div class="card bg-info">
52
- <div class="card-body">
53
- <div class="media align-items-center">
54
- <span class="p-3 mr-3 feature-icon rounded">
55
- <img src="../static/logos/calendar-silhouette.svg" />
56
- </span>
57
- <div class="media-body">
58
- <p class="fs-30 text-white mb-2">Data connectors</p>
59
- <span id="dataConnectorsCount"
60
- class="fs-48 text-white font-w600">{{table_count_of_each_table.data_connectors}}</span>
61
- </div>
62
- </div>
63
- </div>
64
- </div>
65
- </div>
66
- </div>
67
- <div class="row">
68
- <div class="col-md-6 ">
69
- <div class="card bg-success">
70
- <div class="card-body">
71
- <div class="media align-items-center">
72
- <span class="p-3 mr-3 feature-icon rounded">
73
- <img src="../static/logos/email.svg" />
74
- </span>
75
- <div class="media-body">
76
- <p class="fs-30 text-white mb-2">API Connectors</p>
77
- <span id="apiConnectorsCount"
78
- class="fs-48 text-white font-w600">{{table_count_of_each_table.api_connectors}}</span>
79
- </div>
80
- </div>
81
- </div>
82
- </div>
83
- </div>
84
- <div class="col-md-6 ">
85
- <div class="card bg-secondary">
86
- <div class="card-body">
87
- <div class="media align-items-center">
88
- <span class="p-3 mr-3 feature-icon rounded">
89
- <img src="../static/logos/dots.svg" />
90
- </span>
91
- <div class="media-body">
92
- <p class="fs-30 text-white mb-2">Prompt_Templates</p>
93
- <span id="promptTemplatesCount"
94
- class="fs-48 text-white font-w600">{{table_count_of_each_table.prompt_templates}}</span>
95
- </div>
96
- </div>
97
- </div>
98
- </div>
99
- </div>
100
- </div>
101
- </div>
102
- </section>
103
- <input type="hidden" id="userRole" name="userRole" value={{role}}>
104
- <input type="hidden" id="company_id" name="company_id" value={{company_id}}>
105
- <input type="hidden" id="username" name="username" value={{username}}>
106
- <input type="hidden" id="company_name" name="company_name" value={{company_name}}>
107
-
108
- </div>
109
-
110
-
111
- {% include 'footer.html' %}
112
-
113
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>
114
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
115
- <script>
116
- document.getElementById("add").style.display = "none";
117
-
118
- // function updateCompanyName(newCompanyName) {
119
- // sessionStorage.setItem('company_name', newCompanyName);
120
- // document.getElementById('selectedCompany').innerText = `Company name: ${newCompanyName}`;
121
- // const sidePaneCompanyName = document.querySelector('.sidebar .company-name');
122
- // if (sidePaneCompanyName) {
123
- // sidePaneCompanyName.innerText = newCompanyName;
124
- // }
125
- // }
126
- function updateSidepane(companyName) {
127
- const sidepaneCompanyElement = document.getElementById('selectedCompany');
128
- if (sidepaneCompanyElement) {
129
- sidepaneCompanyElement.innerText = `Company Name: ${companyName}`;
130
- }
131
- }
132
-
133
- window.addEventListener('pageshow', function (event) {
134
- if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
135
- window.location.reload();
136
- }
137
- });
138
-
139
- document.addEventListener('DOMContentLoaded', function () {
140
- var role1 = document.getElementById("userRole").value;
141
- var company_id1 = document.getElementById("company_id").value;
142
- var company_name1 = document.getElementById("company_name").value;
143
- var username1 = document.getElementById("username").value;
144
- console.log("companyid in dasshboard", username1);
145
- sessionStorage.setItem('userRole', role1);
146
- // sessionStorage.setItem('siderole',role1);
147
- // sessionStorage.setItem('sidecompanyId',company_id1);
148
- sessionStorage.setItem('company_id', company_id1);
149
- sessionStorage.setItem('company_name', company_name1);
150
- sessionStorage.setItem('username', username1);
151
- const companyName = sessionStorage.getItem('company_name');
152
- if (companyName) {
153
-
154
- updateSidepane(companyName);
155
- }
156
- else {
157
- document.getElementById(selectedCompany).value = "Select a company";
158
- }
159
-
160
-
161
- if (!role1) {
162
- var roleFromInput = sessionStorage.getItem('userRole');
163
- sessionStorage.setItem('userRole', roleFromInput);
164
- console.log("Role set in sessionStorage:", roleFromInput);
165
- } else {
166
- sessionStorage.setItem('userRole', role1);
167
- console.log("Retrieved user role from input:", role1); // Debugging
168
- }
169
- if (role1 === "superadmin") {
170
- document.getElementById('company-block').style.display = 'block';
171
- fetchCompanies();
172
- }
173
-
174
- });
175
- document.getElementById('company').addEventListener('change', async function () {
176
- const selectedCompany = this.value;
177
- sessionStorage.setItem("company_name", selectedCompany);
178
- // Update the sidepane immediately
179
- updateSidepane(selectedCompany);
180
- if (selectedCompany !== "Select") {
181
- try {
182
- const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompany)}`);
183
- if (!response.ok) {
184
- contentSection.style.display = 'none';
185
- displayErrorMessage("Document details do not exist for this company. Please fill in the details.");
186
- throw new Error('Network response was not ok');
187
- }
188
- const data = await response.json();
189
- console.log('data returned', data);
190
- const companyId = data.company_id;
191
- sessionStorage.setItem("company_id", companyId);
192
- console.log("company id for superadmin", company_id);
193
- //document.getElementById('company_id').value = companyId;
194
-
195
-
196
- if (companyId) {
197
- try {
198
- const countResponse = await fetch(`/api/company_record_count/${companyId}`);
199
- if (!countResponse.ok) {
200
- throw new Error('Network response was not ok');
201
- }
202
- const countData = await countResponse.json();
203
- console.log('Count data:', countData); // Log the response data
204
- updateRecordCounts(countData.table_counts);
205
- } catch (error) {
206
- console.error('Error fetching record counts:', error);
207
- }
208
- } else {
209
- clearRecordCounts();
210
- }
211
- } catch (error) {
212
- console.error('No details for this company ID or data documents:', error);
213
- // displayEmptyTable();
214
-
215
- displayErrorMessage("company details do not exist for this company.");
216
-
217
- }
218
- }
219
- });
220
-
221
- function updateRecordCounts(counts) {
222
- // Update the counts displayed in the dashboard
223
- document.getElementById('knowledgeBaseCount').textContent = counts.knowledge_base || 0;
224
- document.getElementById('dataConnectorsCount').textContent = counts.data_connectors || 0;
225
- document.getElementById('apiConnectorsCount').textContent = counts.api_connectors || 0;
226
- document.getElementById('promptTemplatesCount').textContent = counts.prompt_templates || 0;
227
- }
228
-
229
- function clearRecordCounts() {
230
- document.getElementById('knowledgeBaseCount').textContent = 0;
231
- document.getElementById('dataConnectorsCount').textContent = 0;
232
- document.getElementById('apiConnectorsCount').textContent = 0;
233
- document.getElementById('promptTemplatesCount').textContent = 0;
234
- }
235
-
236
- async function fetchCompanies() {
237
- try {
238
- const response = await fetch('/api/companies');
239
- if (!response.ok) {
240
- throw new Error('Network response was not ok');
241
- }
242
- const data = await response.json();
243
- displayCompanies(data.companies);
244
- } catch (error) {
245
- console.error('Error fetching companies:', error);
246
- }
247
- }
248
-
249
- function displayCompanies(companies) {
250
- const companySelect = document.getElementById('company');
251
- companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
252
- companies.forEach(company => {
253
- const option = document.createElement('option');
254
- option.value = company.name;
255
- option.textContent = company.name;
256
- companySelect.appendChild(option);
257
- });
258
- }
259
- function clearFormFields() {
260
- document.getElementById('APIName').value = "";
261
- document.getElementById('APIEndpoint').value = "";
262
- document.getElementById('Auth_Bearer').value = "";
263
- document.getElementById('Inputjson').value = "";
264
- document.getElementById('OutputJson').value = "";
265
- document.getElementById('Description').value = "";
266
- }
267
-
268
- </script>
269
- </body>
270
-
271
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Dashboard</title>
8
+ <!-- CSS -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
10
+ <link rel="stylesheet" type="text/css" href="../static/css/style.css" />
11
+ <link rel="stylesheet" type="text/css" href="../static/css/dashboard.css" />
12
+ <link rel="stylesheet" type="text/css" href="../static/css/perfect-scrollbar.css" />
13
+ <link rel="stylesheet" href="/static/css/dashboard1.css">
14
+ </head>
15
+
16
+ <body>
17
+ {% set company_name = company_name %}
18
+ {% include 'sidepane.html' %}
19
+
20
+ <div class="wrapper">
21
+ <section class="main-header">
22
+ <div class="container-fluid">
23
+ <div id="company-block" class="form-group left-align" style="display: none;">
24
+ <label for="company" class="ml-3" style="display: inline-block; margin-right: 10px;">
25
+ Select the Company Name to view the details <span class="text-danger">*</span>
26
+ </label>
27
+ <select type="text" id="company" name="company" class="ml-3 form-control"
28
+ style="display: inline-block; width: 20%;" required>
29
+ <option value="" selected>Select</option>
30
+ </select>
31
+ </div>
32
+
33
+ <div class="row">
34
+ <div class="col-md-6">
35
+ <div class="card bg-primary">
36
+ <div class="card-body">
37
+ <div class="media align-items-center">
38
+ <span class="p-3 mr-3 feature-icon rounded">
39
+ <img src="../static/logos/calendar-silhouette.svg" />
40
+ </span>
41
+ <div class="media-body">
42
+ <p class="fs-30 text-white mb-2">KnowledgeBase</p>
43
+ <span id="knowledgeBaseCount"
44
+ class="fs-48 text-white font-w600">{{table_count_of_each_table.knowledge_base}}</span>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ <div class="col-md-6">
51
+ <div class="card bg-info">
52
+ <div class="card-body">
53
+ <div class="media align-items-center">
54
+ <span class="p-3 mr-3 feature-icon rounded">
55
+ <img src="../static/logos/calendar-silhouette.svg" />
56
+ </span>
57
+ <div class="media-body">
58
+ <p class="fs-30 text-white mb-2">Data connectors</p>
59
+ <span id="dataConnectorsCount"
60
+ class="fs-48 text-white font-w600">{{table_count_of_each_table.data_connectors}}</span>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ <div class="row">
68
+ <div class="col-md-6 ">
69
+ <div class="card bg-success">
70
+ <div class="card-body">
71
+ <div class="media align-items-center">
72
+ <span class="p-3 mr-3 feature-icon rounded">
73
+ <img src="../static/logos/email.svg" />
74
+ </span>
75
+ <div class="media-body">
76
+ <p class="fs-30 text-white mb-2">API Connectors</p>
77
+ <span id="apiConnectorsCount"
78
+ class="fs-48 text-white font-w600">{{table_count_of_each_table.api_connectors}}</span>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ <div class="col-md-6 ">
85
+ <div class="card bg-secondary">
86
+ <div class="card-body">
87
+ <div class="media align-items-center">
88
+ <span class="p-3 mr-3 feature-icon rounded">
89
+ <img src="../static/logos/dots.svg" />
90
+ </span>
91
+ <div class="media-body">
92
+ <p class="fs-30 text-white mb-2">Prompt_Templates</p>
93
+ <span id="promptTemplatesCount"
94
+ class="fs-48 text-white font-w600">{{table_count_of_each_table.prompt_templates}}</span>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </section>
103
+ <input type="hidden" id="userRole" name="userRole" value={{role}}>
104
+ <input type="hidden" id="company_id" name="company_id" value={{company_id}}>
105
+ <input type="hidden" id="username" name="username" value={{username}}>
106
+ <input type="hidden" id="company_name" name="company_name" value={{company_name}}>
107
+
108
+ </div>
109
+
110
+
111
+ {% include 'footer.html' %}
112
+
113
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>
114
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
115
+ <script>
116
+ document.getElementById("add").style.display = "none";
117
+
118
+ // function updateCompanyName(newCompanyName) {
119
+ // sessionStorage.setItem('company_name', newCompanyName);
120
+ // document.getElementById('selectedCompany').innerText = `Company name: ${newCompanyName}`;
121
+ // const sidePaneCompanyName = document.querySelector('.sidebar .company-name');
122
+ // if (sidePaneCompanyName) {
123
+ // sidePaneCompanyName.innerText = newCompanyName;
124
+ // }
125
+ // }
126
+ function updateSidepane(companyName) {
127
+ const sidepaneCompanyElement = document.getElementById('selectedCompany');
128
+ if (sidepaneCompanyElement) {
129
+ sidepaneCompanyElement.innerText = `Company Name: ${companyName}`;
130
+ }
131
+ }
132
+
133
+ window.addEventListener('pageshow', function (event) {
134
+ if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
135
+ window.location.reload();
136
+ }
137
+ });
138
+
139
+ document.addEventListener('DOMContentLoaded', function () {
140
+ var role1 = document.getElementById("userRole").value;
141
+ var company_id1 = document.getElementById("company_id").value;
142
+ var company_name1 = document.getElementById("company_name").value;
143
+ var username1 = document.getElementById("username").value;
144
+ console.log("companyid in dasshboard", username1);
145
+ sessionStorage.setItem('userRole', role1);
146
+ // sessionStorage.setItem('siderole',role1);
147
+ // sessionStorage.setItem('sidecompanyId',company_id1);
148
+ sessionStorage.setItem('company_id', company_id1);
149
+ sessionStorage.setItem('company_name', company_name1);
150
+ sessionStorage.setItem('username', username1);
151
+ const companyName = sessionStorage.getItem('company_name');
152
+ if (companyName) {
153
+
154
+ updateSidepane(companyName);
155
+ }
156
+ else {
157
+ document.getElementById(selectedCompany).value = "Select a company";
158
+ }
159
+
160
+
161
+ if (!role1) {
162
+ var roleFromInput = sessionStorage.getItem('userRole');
163
+ sessionStorage.setItem('userRole', roleFromInput);
164
+ console.log("Role set in sessionStorage:", roleFromInput);
165
+ } else {
166
+ sessionStorage.setItem('userRole', role1);
167
+ console.log("Retrieved user role from input:", role1); // Debugging
168
+ }
169
+ if (role1 === "superadmin") {
170
+ document.getElementById('company-block').style.display = 'block';
171
+ fetchCompanies();
172
+ }
173
+
174
+ });
175
+ document.getElementById('company').addEventListener('change', async function () {
176
+ const selectedCompany = this.value;
177
+ sessionStorage.setItem("company_name", selectedCompany);
178
+ // Update the sidepane immediately
179
+ updateSidepane(selectedCompany);
180
+ if (selectedCompany !== "Select") {
181
+ try {
182
+ const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompany)}`);
183
+ if (!response.ok) {
184
+ contentSection.style.display = 'none';
185
+ displayErrorMessage("Document details do not exist for this company. Please fill in the details.");
186
+ throw new Error('Network response was not ok');
187
+ }
188
+ const data = await response.json();
189
+ console.log('data returned', data);
190
+ const companyId = data.company_id;
191
+ sessionStorage.setItem("company_id", companyId);
192
+ console.log("company id for superadmin", company_id);
193
+ //document.getElementById('company_id').value = companyId;
194
+
195
+
196
+ if (companyId) {
197
+ try {
198
+ const countResponse = await fetch(`/api/company_record_count/${companyId}`);
199
+ if (!countResponse.ok) {
200
+ throw new Error('Network response was not ok');
201
+ }
202
+ const countData = await countResponse.json();
203
+ console.log('Count data:', countData); // Log the response data
204
+ updateRecordCounts(countData.table_counts);
205
+ } catch (error) {
206
+ console.error('Error fetching record counts:', error);
207
+ }
208
+ } else {
209
+ clearRecordCounts();
210
+ }
211
+ } catch (error) {
212
+ console.error('No details for this company ID or data documents:', error);
213
+ // displayEmptyTable();
214
+
215
+ displayErrorMessage("company details do not exist for this company.");
216
+
217
+ }
218
+ }
219
+ });
220
+
221
+ function updateRecordCounts(counts) {
222
+ // Update the counts displayed in the dashboard
223
+ document.getElementById('knowledgeBaseCount').textContent = counts.knowledge_base || 0;
224
+ document.getElementById('dataConnectorsCount').textContent = counts.data_connectors || 0;
225
+ document.getElementById('apiConnectorsCount').textContent = counts.api_connectors || 0;
226
+ document.getElementById('promptTemplatesCount').textContent = counts.prompt_templates || 0;
227
+ }
228
+
229
+ function clearRecordCounts() {
230
+ document.getElementById('knowledgeBaseCount').textContent = 0;
231
+ document.getElementById('dataConnectorsCount').textContent = 0;
232
+ document.getElementById('apiConnectorsCount').textContent = 0;
233
+ document.getElementById('promptTemplatesCount').textContent = 0;
234
+ }
235
+
236
+ async function fetchCompanies() {
237
+ try {
238
+ const response = await fetch('/api/companies');
239
+ if (!response.ok) {
240
+ throw new Error('Network response was not ok');
241
+ }
242
+ const data = await response.json();
243
+ displayCompanies(data.companies);
244
+ } catch (error) {
245
+ console.error('Error fetching companies:', error);
246
+ }
247
+ }
248
+
249
+ function displayCompanies(companies) {
250
+ const companySelect = document.getElementById('company');
251
+ companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
252
+ companies.forEach(company => {
253
+ const option = document.createElement('option');
254
+ option.value = company.name;
255
+ option.textContent = company.name;
256
+ companySelect.appendChild(option);
257
+ });
258
+ }
259
+ function clearFormFields() {
260
+ document.getElementById('APIName').value = "";
261
+ document.getElementById('APIEndpoint').value = "";
262
+ document.getElementById('Auth_Bearer').value = "";
263
+ document.getElementById('Inputjson').value = "";
264
+ document.getElementById('OutputJson').value = "";
265
+ document.getElementById('Description').value = "";
266
+ }
267
+
268
+ </script>
269
+ </body>
270
+
271
  </html>