Hugging Face's logo

Spaces:
Rsnarsna
/
Redmind_GPT_API
Sleeping

App Files Community
1
Redmind commited on
Commit
e0ede30
·
verified ·
1 Parent(s): 3b3957e

Update templates/dashboard.html

Browse files
Files changed (1) hide show
  1. templates/dashboard.html +174 -64
templates/dashboard.html CHANGED
@@ -1,37 +1,107 @@
1
- !DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
  <meta charset="UTF-8">
 
5
  <title>Dashboard</title>
6
- <!-- AdminLTE CSS -->
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.1.0/css/adminlte.min.css">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
10
  <style>
11
- html, body {
 
12
  height: 100%;
13
  margin: 0;
14
  display: flex;
15
  flex-direction: column;
 
16
  }
 
17
  .wrapper {
18
- flex: 1; /* This allows the content to grow and push the footer down */
19
  padding: 10px;
20
- margin-left: -35px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  }
22
-
23
  </style>
24
  </head>
25
- <body>
26
-
 
27
  {% include 'sidepane.html' %}
28
 
29
  <div class="wrapper">
30
- <section class="main-header" style="border-bottom: none;border-top: none;">
31
  <div class="container-fluid">
32
  <div id="company-block" class="form-group left-align" style="display: none;">
33
- <label for="company" class="ml-3" style="display: inline-block; margin-right: 10px;">Select the Company Name
34
- to view the details <span class="text-danger">*</span>
35
  </label>
36
  <select type="text" id="company" name="company" class="ml-3 form-control"
37
  style="display: inline-block; width: 20%;" required>
@@ -40,77 +110,107 @@
40
  </div>
41
 
42
  <div class="row">
43
- <div class="col-lg-4 col-6">
44
- <div class="small-box bg-info">
45
- <div class="inner margin-left:10px;">
46
- <h3 id="knowledgeBaseCount">{{table_count_of_each_table.knowledge_base}}</h3>
47
- <h4>KnowledgeBase</h4>
48
- </div>
49
- <div class="icon">
50
- <i class="ion ion-bag"></i>
 
 
 
 
51
  </div>
52
  </div>
53
  </div>
54
-
55
- <div class="col-lg-4 col-6">
56
- <div class="small-box bg-success">
57
- <div class="inner">
58
- <h3 id="dataConnectorsCount">{{table_count_of_each_table.data_connectors}}</h3>
59
- <h4>Data connectors</h4>
60
- </div>
61
- <div class="icon">
62
- <i class="ion ion-stats-bars"></i>
 
 
 
63
  </div>
64
  </div>
65
  </div>
66
-
67
- <div class="col-lg-4 col-6">
68
- <div class="small-box bg-warning">
69
- <div class="inner">
70
- <h3 id="apiConnectorsCount">{{table_count_of_each_table.api_connectors}}</h3>
71
- <h4>API Connectors</h4>
72
- </div>
73
- <div class="icon">
74
- <i class="ion ion-person-add"></i>
 
 
 
 
 
75
  </div>
76
  </div>
77
  </div>
78
-
79
- <div class="col-lg-4 col-6">
80
- <div class="small-box bg-warning">
81
- <div class="inner">
82
- <h3 id="promptTemplatesCount">{{table_count_of_each_table.prompt_templates}}</h3>
83
- <h4>Prompt_Templates</h4>
84
- </div>
85
- <div class="icon">
86
- <i class="ion ion-person-add"></i>
 
 
 
87
  </div>
88
  </div>
89
  </div>
90
-
91
  </div>
92
  </div>
93
  </section>
 
 
 
 
 
94
  </div>
95
 
96
- <input type="hidden" id="userRole" name="userRole" value={{role}}>
97
- <input type="hidden" id="company_id" name="company_id" value={{company_id}}>
98
- <input type="hidden" id="username" name="username" value={{username}}>
99
- <input type="hidden" id="company_name" name="company_name" value={{company_name}}>
100
- <footer>
101
- {% include 'footer.html' %}
102
- </footer>
103
-
104
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>
105
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
106
  <script>
107
- window.addEventListener('pageshow', function (event) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108
  if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
109
  window.location.reload();
110
  }
111
  });
112
 
113
-
114
  document.addEventListener('DOMContentLoaded', function () {
115
  var role1 = document.getElementById("userRole").value;
116
  var company_id1 = document.getElementById("company_id").value;
@@ -123,6 +223,16 @@
123
  sessionStorage.setItem('company_id', company_id1);
124
  sessionStorage.setItem('company_name',company_name1);
125
  sessionStorage.setItem('username',username1);
 
 
 
 
 
 
 
 
 
 
126
  if (!role1) {
127
  var roleFromInput = sessionStorage.getItem('userRole');
128
  sessionStorage.setItem('userRole', roleFromInput);
@@ -140,6 +250,8 @@
140
  document.getElementById('company').addEventListener('change', async function () {
141
  const selectedCompany = this.value;
142
  sessionStorage.setItem("company_name",selectedCompany);
 
 
143
  if (selectedCompany!== "Select") {
144
  try {
145
  const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompany)}`);
@@ -181,7 +293,6 @@
181
  }
182
  });
183
 
184
-
185
  function updateRecordCounts(counts) {
186
  // Update the counts displayed in the dashboard
187
  document.getElementById('knowledgeBaseCount').textContent = counts.knowledge_base || 0;
@@ -197,7 +308,6 @@
197
  document.getElementById('promptTemplatesCount').textContent = 0;
198
  }
199
 
200
-
201
  async function fetchCompanies() {
202
  try {
203
  const response = await fetch('/api/companies');
@@ -230,8 +340,8 @@
230
  document.getElementById('Description').value = "";
231
  }
232
 
233
-
234
  </script>
235
  </body>
236
 
237
- </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" type="text/css" href="../static/assets/css/style.css" />
10
+ <link rel="stylesheet" type="text/css" href="../static/assets/css/dashboard.css" />
11
+ <link rel="stylesheet" type="text/css" href="../static/assets/css/perfect-scrollbar.css" />
12
  <style>
13
+ html,
14
+ body {
15
  height: 100%;
16
  margin: 0;
17
  display: flex;
18
  flex-direction: column;
19
+ font-family: Arial, sans-serif;
20
  }
21
+
22
  .wrapper {
23
+ flex: 1;
24
  padding: 10px;
25
+ margin-left: 100px; /* Default sidebar width */
26
+ transition: margin-left 0.3s ease;
27
+ }
28
+
29
+ .main-header {
30
+ border-bottom: none;
31
+ border-top: none;
32
+ }
33
+
34
+ .card {
35
+ margin-bottom: 15px;
36
+ border-radius: 8px;
37
+ overflow: hidden;
38
+ transition: background-color 0.3s ease;
39
+ }
40
+
41
+ .card-body {
42
+ padding: 15px;
43
+ }
44
+
45
+ .feature-icon {
46
+ display: inline-flex;
47
+ align-items: center;
48
+ justify-content: center;
49
+ width: 50px;
50
+ height: 50px;
51
+ background: rgba(255, 255, 255, 0.1);
52
+ border-radius: 50%;
53
+ }
54
+
55
+ .media-body {
56
+ text-align: right;
57
+ }
58
+
59
+ .fs-30 {
60
+ font-size: 1.875rem;
61
+ }
62
+
63
+ .fs-48 {
64
+ font-size: 3rem;
65
+ }
66
+
67
+ /* Responsive Styles */
68
+ @media (max-width: 992px) {
69
+ .wrapper {
70
+ margin-left: 0;
71
+ }
72
+
73
+ .main-header {
74
+ padding: 15px;
75
+ }
76
+ }
77
+
78
+ @media (max-width: 768px) {
79
+ .feature-icon {
80
+ width: 40px;
81
+ height: 40px;
82
+ }
83
+
84
+ .fs-30 {
85
+ font-size: 1.5rem;
86
+ }
87
+
88
+ .fs-48 {
89
+ font-size: 2.5rem;
90
+ }
91
  }
 
92
  </style>
93
  </head>
94
+
95
+ <body>
96
+ {% set company_name = company_name %}
97
  {% include 'sidepane.html' %}
98
 
99
  <div class="wrapper">
100
+ <section class="main-header">
101
  <div class="container-fluid">
102
  <div id="company-block" class="form-group left-align" style="display: none;">
103
+ <label for="company" class="ml-3" style="display: inline-block; margin-right: 10px;">
104
+ Select the Company Name to view the details <span class="text-danger">*</span>
105
  </label>
106
  <select type="text" id="company" name="company" class="ml-3 form-control"
107
  style="display: inline-block; width: 20%;" required>
 
110
  </div>
111
 
112
  <div class="row">
113
+ <div class="col-xl-6 col-xxl-6 col-sm-6">
114
+ <div class="card bg-primary">
115
+ <div class="card-body">
116
+ <div class="media align-items-center">
117
+ <span class="p-3 mr-3 feature-icon rounded">
118
+ <img src="../static/logos/calendar-silhouette.svg" />
119
+ </span>
120
+ <div class="media-body">
121
+ <p class="fs-30 text-white mb-2">KnowledgeBase</p>
122
+ <span id="knowledgeBaseCount" class="fs-48 text-white font-w600">{{table_count_of_each_table.knowledge_base}}</span>
123
+ </div>
124
+ </div>
125
  </div>
126
  </div>
127
  </div>
128
+ <div class="col-xl-6 col-xxl-6 col-sm-6">
129
+ <div class="card bg-info">
130
+ <div class="card-body">
131
+ <div class="media align-items-center">
132
+ <span class="p-3 mr-3 feature-icon rounded">
133
+ <img src="../static/logos/calendar-silhouette.svg" />
134
+ </span>
135
+ <div class="media-body">
136
+ <p class="fs-30 text-white mb-2">Data connectors</p>
137
+ <span id="dataConnectorsCount" class="fs-48 text-white font-w600">{{table_count_of_each_table.data_connectors}}</span>
138
+ </div>
139
+ </div>
140
  </div>
141
  </div>
142
  </div>
143
+ </div>
144
+ <div class="row">
145
+ <div class="col-xl-6 col-xxl-6 col-sm-6">
146
+ <div class="card bg-success">
147
+ <div class="card-body">
148
+ <div class="media align-items-center">
149
+ <span class="p-3 mr-3 feature-icon rounded">
150
+ <img src="../static/logos/email.svg" />
151
+ </span>
152
+ <div class="media-body">
153
+ <p class="fs-30 text-white mb-2">API Connectors</p>
154
+ <span id="apiConnectorsCount" class="fs-48 text-white font-w600">{{table_count_of_each_table.api_connectors}}</span>
155
+ </div>
156
+ </div>
157
  </div>
158
  </div>
159
  </div>
160
+ <div class="col-xl-6 col-xxl-6 col-sm-6">
161
+ <div class="card bg-secondary">
162
+ <div class="card-body">
163
+ <div class="media align-items-center">
164
+ <span class="p-3 mr-3 feature-icon rounded">
165
+ <img src="../static/logos/dots.svg" />
166
+ </span>
167
+ <div class="media-body">
168
+ <p class="fs-30 text-white mb-2">Prompt_Templates</p>
169
+ <span id="promptTemplatesCount" class="fs-48 text-white font-w600">{{table_count_of_each_table.prompt_templates}}</span>
170
+ </div>
171
+ </div>
172
  </div>
173
  </div>
174
  </div>
 
175
  </div>
176
  </div>
177
  </section>
178
+ <input type="hidden" id="userRole" name="userRole" value={{role}}>
179
+ <input type="hidden" id="company_id" name="company_id" value={{company_id}}>
180
+ <input type="hidden" id="username" name="username" value={{username}}>
181
+ <input type="hidden" id="company_name" name="company_name" value={{company_name}}>
182
+
183
  </div>
184
 
185
+
186
+ {% include 'footer.html' %}
187
+
 
 
 
 
 
188
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>
189
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
190
  <script>
191
+ document.getElementById("add").style.display = "none";
192
+
193
+ // function updateCompanyName(newCompanyName) {
194
+ // sessionStorage.setItem('company_name', newCompanyName);
195
+ // document.getElementById('selectedCompany').innerText = `Company name: ${newCompanyName}`;
196
+ // const sidePaneCompanyName = document.querySelector('.sidebar .company-name');
197
+ // if (sidePaneCompanyName) {
198
+ // sidePaneCompanyName.innerText = newCompanyName;
199
+ // }
200
+ // }
201
+ function updateSidepane(companyName) {
202
+ const sidepaneCompanyElement = document.getElementById('selectedCompany');
203
+ if (sidepaneCompanyElement) {
204
+ sidepaneCompanyElement.innerText = `Company Name: ${companyName}`;
205
+ }
206
+ }
207
+
208
+ window.addEventListener('pageshow', function (event) {
209
  if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
210
  window.location.reload();
211
  }
212
  });
213
 
 
214
  document.addEventListener('DOMContentLoaded', function () {
215
  var role1 = document.getElementById("userRole").value;
216
  var company_id1 = document.getElementById("company_id").value;
 
223
  sessionStorage.setItem('company_id', company_id1);
224
  sessionStorage.setItem('company_name',company_name1);
225
  sessionStorage.setItem('username',username1);
226
+ const companyName = sessionStorage.getItem('company_name');
227
+ if (companyName) {
228
+
229
+ updateSidepane(companyName);
230
+ }
231
+ else{
232
+ document.getElementById(selectedCompany).value="Select a company";
233
+ }
234
+
235
+
236
  if (!role1) {
237
  var roleFromInput = sessionStorage.getItem('userRole');
238
  sessionStorage.setItem('userRole', roleFromInput);
 
250
  document.getElementById('company').addEventListener('change', async function () {
251
  const selectedCompany = this.value;
252
  sessionStorage.setItem("company_name",selectedCompany);
253
+ // Update the sidepane immediately
254
+ updateSidepane(selectedCompany);
255
  if (selectedCompany!== "Select") {
256
  try {
257
  const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompany)}`);
 
293
  }
294
  });
295
 
 
296
  function updateRecordCounts(counts) {
297
  // Update the counts displayed in the dashboard
298
  document.getElementById('knowledgeBaseCount').textContent = counts.knowledge_base || 0;
 
308
  document.getElementById('promptTemplatesCount').textContent = 0;
309
  }
310
 
 
311
  async function fetchCompanies() {
312
  try {
313
  const response = await fetch('/api/companies');
 
340
  document.getElementById('Description').value = "";
341
  }
342
 
 
343
  </script>
344
  </body>
345
 
346
+ </html>
347
+