Home Explore Help
Register Sign In
ByteTrekProjects
/
review-automation-server
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

structed the initial design of user dashboard

Mohidul Islam 4 years ago
parent
bd8e457622
commit
b61ac03330
5 changed files with 176 additions and 154 deletions
Split View Show Diff Stats
  1. 48 1
      dashboard/static/user-dashboard.css
  2. 17 18
      user/templates/_navbar.html
  3. 6 1
      user/templates/user-base.html
  4. 93 133
      user/templates/user-dashboard.html
  5. 12 1
      user/views.py

+ 48 - 1
dashboard/static/user-dashboard.css
View File 

@@ -82,4 +82,51 @@ body {
 
 }
 
 
 .border-top { border-top: 1px solid #e5e5e5; }
 
-.border-bottom { border-bottom: 1px solid #e5e5e5; }
 
+.border-bottom { border-bottom: 1px solid #e5e5e5; }
 
+
 
+.card-body .table td, .table th {
 
+    padding: .5rem;
 
+    vertical-align: top;
 
+    border-top: 0px solid #dee2e6;
 
+    color: white;
 
+    font-size: larger;
 
+    font-family: serif;
 
+    font-weight: bold;
 
+}
 
+.card-title span {
 
+    float: right;
 
+}
 
+.card-body {
 
+    padding: .5rem;
 
+}
 
+
 
+.img-thumbnail {
 
+    padding: 1.5rem;
 
+    background-color: #fff;
 
+    border: 1px solid #dee2e6;
 
+    border-radius: .25rem;
 
+    max-width: 100%;
 
+    height: auto;
 
+}
 
+
 
+.location-detail {
 
+    padding: 1rem;
 
+    font-size: 1rem;
 
+    font-family: revert;
 
+}
 
+
 
+.location-detail p {
 
+    margin-top: .25rem;
 
+    margin-bottom: 0rem;
 
+}
 
+.location-detail i {
 
+    margin-right: .5rem;
 
+}
 
+
 
+.table-info th, tr {
 
+    color: black;
 
+    text-align: center;
 
+    font-size: medium;
 
+    font-family: revert;
 
+    font-weight: unset;
 
+}

+ 17 - 18
user/templates/_navbar.html
View File 

@@ -1,5 +1,16 @@
 
 <nav class="col-md-2 d-none d-md-block bg-light sidebar">
 
   <div class="sidebar-sticky">
 
+
 
+    <div class="location-detail">
 
+      <img class="img-thumbnail" align="center" width="100%" src="https://ercare24.com/wp-content/uploads/2016/07/signature-care-resized-e1462918690585.png">
 
+
 
+      <p><b>SignatureCare Emergency Center</b></p>
 
+      <p><i class="fa fa-map-marker" aria-hidden="true"></i>Mission Bend Sugar Land</p>
 
+      <p><i class="fa fa-envelope" aria-hidden="true"></i>missionbend@ercare24.com</p>
 
+    </div>
 
+
 
+    <hr>
 
+
 
     <ul class="nav flex-column">
 
       <li class="nav-item">
 
         <a class="nav-link active" href="#">
 
@@ -9,26 +20,20 @@
 
       </li>
 
       <li class="nav-item">
 
         <a class="nav-link" href="#">
 
-          <span data-feather="file"></span>
 
-          Orders
 
-        </a>
 
-      </li>
 
-      <li class="nav-item">
 
-        <a class="nav-link" href="#">
 
-          <span data-feather="shopping-cart"></span>
 
-          Products
 
+          <span data-feather="list"></span>
 
+          Review List
 
         </a>
 
       </li>
 
       <li class="nav-item">
 
         <a class="nav-link" href="#">
 
-          <span data-feather="users"></span>
 
-          Customers
 
+          <span data-feather="bar-chart-2"></span>
 
+          Analytics
 
         </a>
 
       </li>
 
       <li class="nav-item">
 
         <a class="nav-link" href="#">
 
-          <span data-feather="bar-chart-2"></span>
 
-          Reports
 
+          <span data-feather="award"></span>
 
+          Staff Leaderboard
 
         </a>
 
       </li>
 
       <li class="nav-item">
 
@@ -64,12 +69,6 @@
 
           Social engagement
 
         </a>
 
       </li>
 
-      <li class="nav-item">
 
-        <a class="nav-link" href="#">
 
-          <span data-feather="file-text"></span>
 
-          Year-end sale
 
-        </a>
 
-      </li>
 
     </ul>
 
   </div>
 
 </nav>

+ 6 - 1
user/templates/user-base.html
View File 

@@ -11,6 +11,8 @@
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
     <!-- Custom styles for this template -->
 
     <link rel="stylesheet" type="text/css" href="{% static 'user-dashboard.css' %}">
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
+
 
   </head>
 
 
   <body>
 
@@ -45,7 +47,9 @@
 
         </main>
 
       </div>
 
     </div>
 
-
 
+        <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap mt-4">
 
+            <span style="color: white;">&copy;2020 Byte Trek Online Reputation Manager. - Developed by Byte Trek Ltd. </span>
 
+        </nav>
 
     <!-- Bootstrap core JavaScript
 
     ================================================== -->
 
     <!-- Placed at the end of the document so the pages load faster -->
 
@@ -57,6 +61,7 @@
 
 
     <!-- Icons -->
 
     <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
 
+
 
     <script>
 
       feather.replace()
 
     </script>

+ 93 - 133
user/templates/user-dashboard.html
View File 

@@ -6,27 +6,54 @@
 
 
   <div class="col-sm-6 col-md-4">
 
       <div class="card text-white bg-secondary mb-3">
 
-      <div class="card-header"><h5 class="card-title">Google</h5></div>
 
+      <div class="card-header"><h5 class="card-title">Google <span><i class="fa fa-google" aria-hidden="true"></i></span></h5></div>
 
         <div class="card-body">
 
-          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 
+          <table class="table">
 
+            <tr>
 
+              <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i>  Total Review</td>
 
+              <td>200</td>
 
+            </tr>
 
+            <tr>
 
+              <td><i class="fa fa-line-chart" aria-hidden="true"></i>  Growth</td>
 
+              <td>-2.4%</td>
 
+            </tr>
 
+          </table>
 
         </div>
 
       </div>
 
   </div>
 
 
   <div class="col-sm-6 col-md-4">
 
       <div class="card text-white bg-danger mb-3">
 
-      <div class="card-header"><h5 class="card-title">Yelp</h5></div>
 
+      <div class="card-header"><h5 class="card-title">Yelp <span><i class="fa fa-yelp" aria-hidden="true"></i></span></h5></div>
 
         <div class="card-body">
 
-          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 
+          <table class="table">
 
+            <tr>
 
+              <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i>  Total Review</td>
 
+              <td>200</td>
 
+            </tr>
 
+            <tr>
 
+              <td><i class="fa fa-line-chart" aria-hidden="true"></i>  Growth</td>
 
+              <td>-2.4%</td>
 
+            </tr>
 
+          </table>
 
         </div>
 
       </div>
 
   </div>
 
 
   <div class="col-sm-6 col-md-4">
 
       <div class="card text-white bg-primary mb-3">
 
-      <div class="card-header"><h5 class="card-title">Facebook</h5></div>
 
+      <div class="card-header"><h5 class="card-title">Facebook <span><i class="fa fa-facebook" aria-hidden="true"></i></span></h5></div>
 
         <div class="card-body">
 
-          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 
+          <table class="table">
 
+            <tr>
 
+              <td><i class="fa fa-pencil-square-o" aria-hidden="true"></i>  Total Review</td>
 
+              <td>200</td>
 
+            </tr>
 
+            <tr>
 
+              <td><i class="fa fa-line-chart" aria-hidden="true"></i>  Growth</td>
 
+              <td>-2.4%</td>
 
+            </tr>
 
+          </table>
 
         </div>
 
       </div>
 
   </div>
 
@@ -34,136 +61,69 @@
 
 </div>
 
 
 <!--    canvas-->
 
-  <canvas class="my-4" id="myChart" width="900" height="350"></canvas>
 
+  <canvas class="my-4" id="myChart" width="900" height="300"></canvas>
 
 
   <h2>Section title</h2>
 
   <div class="table-responsive">
 
-  <table class="table table-striped table-sm">
 
-    <thead>
 
-      <tr>
 
-        <th>#</th>
 
-        <th>Header</th>
 
-        <th>Header</th>
 
-        <th>Header</th>
 
-        <th>Header</th>
 
-      </tr>
 
-    </thead>
 
-    <tbody>
 
-      <tr>
 
-        <td>1,001</td>
 
-        <td>Lorem</td>
 
-        <td>ipsum</td>
 
-        <td>dolor</td>
 
-        <td>sit</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,002</td>
 
-        <td>amet</td>
 
-        <td>consectetur</td>
 
-        <td>adipiscing</td>
 
-        <td>elit</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,003</td>
 
-        <td>Integer</td>
 
-        <td>nec</td>
 
-        <td>odio</td>
 
-        <td>Praesent</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,003</td>
 
-        <td>libero</td>
 
-        <td>Sed</td>
 
-        <td>cursus</td>
 
-        <td>ante</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,004</td>
 
-        <td>dapibus</td>
 
-        <td>diam</td>
 
-        <td>Sed</td>
 
-        <td>nisi</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,005</td>
 
-        <td>Nulla</td>
 
-        <td>quis</td>
 
-        <td>sem</td>
 
-        <td>at</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,006</td>
 
-        <td>nibh</td>
 
-        <td>elementum</td>
 
-        <td>imperdiet</td>
 
-        <td>Duis</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,007</td>
 
-        <td>sagittis</td>
 
-        <td>ipsum</td>
 
-        <td>Praesent</td>
 
-        <td>mauris</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,008</td>
 
-        <td>Fusce</td>
 
-        <td>nec</td>
 
-        <td>tellus</td>
 
-        <td>sed</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,009</td>
 
-        <td>augue</td>
 
-        <td>semper</td>
 
-        <td>porta</td>
 
-        <td>Mauris</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,010</td>
 
-        <td>massa</td>
 
-        <td>Vestibulum</td>
 
-        <td>lacinia</td>
 
-        <td>arcu</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,011</td>
 
-        <td>eget</td>
 
-        <td>nulla</td>
 
-        <td>Class</td>
 
-        <td>aptent</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,012</td>
 
-        <td>taciti</td>
 
-        <td>sociosqu</td>
 
-        <td>ad</td>
 
-        <td>litora</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,013</td>
 
-        <td>torquent</td>
 
-        <td>per</td>
 
-        <td>conubia</td>
 
-        <td>nostra</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,014</td>
 
-        <td>per</td>
 
-        <td>inceptos</td>
 
-        <td>himenaeos</td>
 
-        <td>Curabitur</td>
 
-      </tr>
 
-      <tr>
 
-        <td>1,015</td>
 
-        <td>sodales</td>
 
-        <td>ligula</td>
 
-        <td>in</td>
 
-        <td>libero</td>
 
-      </tr>
 
-    </tbody>
 
-  </table>
 
-</div>
 
+    <table class="table">
 
+      <thead>
 
+        <tr class="table-info">
 
+          <th>Platform</th>
 
+          <th>Total <br>Positive Review</th>
 
+          <th>Positive <br> review Growth</th>
 
+          <th>Total <br>Negative Review</th>
 
+          <th>Negative <br> review Growth</th>
 
+        </tr>
 
+      </thead>
 
+      <tbody>
 
+        <tr>
 
+          <td>Google</td>
 
+          <td>{{ google_pos }}</td>
 
+          {% if google_pos_gr > 0 %}
 
+            <td class="table-success"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ google_pos_gr }}</td>
 
+          {% else %}
 
+            <td class="table-danger"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ google_pos_gr }};</td>
 
+          {% endif %}
 
+          <td>{{ google_neg }}</td>
 
+          {% if google_neg_gr < 0 %}
 
+            <td class="table-success"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ google_pos_gr }}</td>
 
+          {% else %}
 
+            <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ google_pos_gr }};</td>
 
+          {% endif %}
 
+        </tr>
 
+        <tr>
 
+          <td>Yelp</td>
 
+          <td>{{ yelp_pos }}</td>
 
+          {% if yelp_pos_gr > 0 %}
 
+            <td class="table-success"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ yelp_pos_gr }}</td>
 
+          {% else %}
 
+            <td class="table-danger"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ yelp_pos_gr }};</td>
 
+          {% endif %}
 
+          <td>{{ yelp_neg }}</td>
 
+          {% if yelp_neg_gr < 0 %}
 
+            <td class="table-success"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ yelp_pos_gr }}</td>
 
+          {% else %}
 
+            <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ yelp_pos_gr }};</td>
 
+          {% endif %}
 
+        </tr>
 
+        <tr>
 
+          <td>Facebook</td>
 
+          <td>{{ facebook_pos }}</td>
 
+          {% if facebook_pos_gr > 0 %}
 
+            <td class="table-success"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ facebook_pos_gr }}</td>
 
+          {% else %}
 
+            <td class="table-danger"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ facebook_pos_gr }};</td>
 
+          {% endif %}
 
+          <td>{{ facebook_neg }}</td>
 
+          {% if facebook_neg_gr < 0 %}
 
+            <td class="table-success"><i class="fa fa-arrow-circle-o-down mr-2" aria-hidden="true"></i>{{ facebook_pos_gr }}</td>
 
+          {% else %}
 
+            <td class="table-danger"><i class="fa fa-arrow-circle-o-up mr-2" aria-hidden="true"></i>{{ facebook_pos_gr }};</td>
 
+          {% endif %}
 
+        </tr>
 
+      </tbody>
 
+    </table>
 
+  </div>
 
 
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

+ 12 - 1
user/views.py
View File 

@@ -31,6 +31,17 @@ class RegistrationView(View):
 
 class LocationAnalytics(View):
 
     def get(self, requests, *args, **kwargs):
 
         context = {
 
-            'labels': ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
 
+            'google_pos': 400,
 
+            'google_neg': 60,
 
+            'google_pos_gr': -5,
 
+            'google_neg_gr': -3,
 
+            'yelp_pos': 323,
 
+            'yelp_neg': 32,
 
+            'yelp_pos_gr': -2.4,
 
+            'yelp_neg_gr': 4,
 
+            'facebook_pos': 430,
 
+            'facebook_neg': 40,
 
+            'facebook_pos_gr': 2.5,
 
+            'facebook_neg_gr': -2.3,
 
         }
 
         return render(requests, 'user-dashboard.html', context=context)