Skip to content

Commit

Permalink
Fill Project Dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@misterkevinski
misterkevinski committed Oct 18, 2018
1 parent 4d94de3 commit 32cc29b
Show file tree
Hide file tree
Showing 10 changed files with 242 additions and 32 deletions.
44 changes: 30 additions & 14 deletions mambas/server/components/css/custom.css
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,46 @@
/* Colors */
.card .card-header-success .card-icon, .card .card-header-success .card-text, .card .card-header-success:not(.card-header-icon):not(.card-header-text), .card.bg-success, .card.card-rotate.bg-success .front, .card.card-rotate.bg-success .back {
background: linear-gradient(60deg, #B4E69E, #88D597);
/* COLOR INFO ------------------------------------------------------------------------ */
.card .card-header-info .card-icon, .card .card-header-info .card-text, .card .card-header-info:not(.card-header-icon):not(.card-header-text), .card.bg-info, .card.card-rotate.bg-info .front, .card.card-rotate.bg-info .back {
background: linear-gradient(60deg, #93D8E4, #63CAC6);
}

.card .card-header-info .card-icon, .card .card-header-info .card-text, .card .card-header-info:not(.card-header-icon):not(.card-header-text), .card.bg-info, .card.card-rotate.bg-info .front, .card.card-rotate.bg-info .back {
.btn.btn-info {
background: linear-gradient(60deg, #93D8E4, #63CAC6);
}

.card .card-header-rose .card-icon, .card .card-header-rose .card-text, .card .card-header-rose:not(.card-header-icon):not(.card-header-text), .card.bg-rose, .card.card-rotate.bg-rose .front, .card.card-rotate.bg-rose .back {
background: linear-gradient(60deg, #FF695F, #FF878D);
.text-info {
color: #63CAC6 !important;
}

.btn.btn-info {
.sidebar[data-color="azure"] li.active > a {
background: linear-gradient(60deg, #93D8E4, #63CAC6);
}

/* COLOR SUCCESS --------------------------------------------------------------------- */

.card .card-header-success .card-icon, .card .card-header-success .card-text, .card .card-header-success:not(.card-header-icon):not(.card-header-text), .card.bg-success, .card.card-rotate.bg-success .front, .card.card-rotate.bg-success .back {
background: linear-gradient(60deg, #B4E69E, #88D597);
}

.text-success {
color: #88D597 !important;
}

/* COLOR ERROR ----------------------------------------------------------------------- */

.card .card-header-rose .card-icon, .card .card-header-rose .card-text, .card .card-header-rose:not(.card-header-icon):not(.card-header-text), .card.bg-rose, .card.card-rotate.bg-rose .front, .card.card-rotate.bg-rose .back {
background: linear-gradient(60deg, #de516f, #FF695F);
}

.btn.btn-error {
background: linear-gradient(60deg, #FF695F, #FF878D);
background: linear-gradient(60deg, #FF878D, #FF695F);
}

.sidebar[data-color="azure"] li.active > a {
background: linear-gradient(60deg, #93D8E4, #63CAC6);
.text-rose {
color: #FF695F !important;
}

.main-panel .header {
margin-bottom: 0;
}

@media (max-width: 991px) {
Expand Down Expand Up @@ -132,10 +152,6 @@
font-size: 24px;
}

.btn.btn-just-icon .material-icons.icon-favorite {
color: #63CAC6;
}

.morris-hover.morris-default-style {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border: 0;
Expand Down
49 changes: 44 additions & 5 deletions mambas/server/components/html/dashboard.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,50 @@
% include(header_path)

<div class="content">
<div class="container-fluid">
<div class="header text-center">
<h3 class="title">Mambas Dashboard</h3>
</div>
</div>
<div class="container-fluid">
<div class="header text-center">
<h3 class="title">{{ title }}</h3>
</div>

<div class="row">
<div class="col-md-4 col-sm-12">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="material-icons">apps</i>
</div>
<p class="card-category">Total Projects</p>
<h3 class="card-title">{{ number_projects }}</h3>
</div>
<br>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="fa fa-spinner"></i>
</div>
<p class="card-category">Running Sessions</p>
<h3 class="card-title">{{ number_running_sessions }}</h3>
</div>
<br>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="material-icons">favorite</i>
</div>
<p class="card-category">Favorite Sessions</p>
<h3 class="card-title">{{ number_projects }}</h3>
</div>
<br>
</div>
</div>
</div>
</div>
</div>

% include(footer_path)
4 changes: 2 additions & 2 deletions mambas/server/components/html/header.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Mambas</title>
<title>Mambas | {{ title }}</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
Expand Down Expand Up @@ -131,7 +131,7 @@
<input type="checkbox" class="mark-session" data-id-project="{{ id_project }}" data-id-session="{{ id_session }}" {{ attr }}>
<span class="icons">
<i rel="tooltip" class="material-icons" title="Mark as favorite">favorite_border</i>
<i rel="tooltip" class="material-icons icon-favorite" title="Unmark as favorite">favorite</i>
<i rel="tooltip" class="material-icons text-info" title="Unmark as favorite">favorite</i>
</span>
</button>
% elif icon['type'] == 'delete_session':
Expand Down
94 changes: 94 additions & 0 deletions mambas/server/components/html/project_dashboard.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

<div class="content">
<div class="container-fluid">
<div class="header text-center">
<h3 class="title">{{ title }}</h3>
</div>

<h4>Loss & Accuracy</h4>

<div class="row">
<div class="col-md-6 col-sm-12">
<div class="card card-chart">
Expand Down Expand Up @@ -58,6 +64,94 @@ <h4 class="card-title">Accuracy
</div>
</div>
</div>

<h4>Sessions</h4>

<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-icon card-header-info">
<div class="card-icon">
<i class="material-icons">view_list</i>
</div>
<h4 class="card-title ">Last Sessions</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>Status</th>
<th>Start date</th>
<th>Duration</th>
<th>Loss</th>
<th>Accuracy</th>
<th></th>
</tr>
</thead>
<tbody>
% for session in list_last_sessions:
% id, index, start_date = session['id'], session['index'], session['start_date']
% is_active = session['is_active']
% is_favorite, id_project = session['is_favorite'], session['id_project']
% name = session['name']
<tr class="clickable-row" data-href="sessions/{{ id }}">
<th class="text-center">{{ index }}</th>
<td>
% if is_active:
<i class="fa fa-spinner spin text-info" rel="tooltip" title="Running"></i>
% else:
<i class="material-icons text-success" rel="tooltip" title="Finished">check</i>
% end
</td>
<td>{{ start_date }}</td>
<td>
% if 'duration' in session.keys():
% duration = session['duration']
{{ duration }}
% else:
-
% end
</td>
<td>
% if 'loss' in session.keys():
% loss = session['loss']
{{ loss }}
% else:
-
% end
</td>
<td>
% if 'acc' in session.keys():
% acc = session['acc']
{{ acc }}
% else:
-
% end
</td>
<td class="text-right">
<button type="button" class="btn btn-link btn-just-icon btn-toggle">
% attr = 'checked' if is_favorite else ''
<input type="checkbox" class="mark-session" data-id-project="{{ id_project }}" data-id-session="{{ id }}" {{ attr }}>
<span class="icons">
<i rel="tooltip" class="material-icons" title="Mark as favorite">favorite_border</i>
<i rel="tooltip" class="material-icons text-info" title="Unmark as favorite">favorite</i>
</span>
</button>
<button type="button" rel="tooltip" class="btn btn-link btn-just-icon" title="Delete Session {{ name }}" onclick="mambas.deleteSession('{{ name }}', '{{ id_project }}', '{{ id }}')">
<i class="material-icons">delete</i>
</button>
</td>
</tr>
% end
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Expand Down
15 changes: 10 additions & 5 deletions mambas/server/components/html/project_sessions.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@

<div class="content">
<div class="container-fluid">
<div class="header text-center">
<h3 class="title">{{ title }}</h3>
</div>
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="material-icons">view_list</i>
</div>
<p class="card-category">Total sessions</p>
<p class="card-category">Total Sessions</p>
<h3 class="card-title">{{ number_sessions }}</h3>
</div>
<br>
Expand All @@ -19,9 +22,9 @@ <h3 class="card-title">{{ number_sessions }}</h3>
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="fa fa-spinner"></i>
<i class="fa fa-spinner"></i>
</div>
<p class="card-category">Running sessions</p>
<p class="card-category">Running Sessions</p>
<h3 class="card-title">{{ number_running_sessions }}</h3>
</div>
<br>
Expand All @@ -33,14 +36,16 @@ <h3 class="card-title">{{ number_running_sessions }}</h3>
<div class="card-icon">
<i class="material-icons">favorite</i>
</div>
<p class="card-category">Favorite sessions</p>
<p class="card-category">Favorite Sessions</p>
<h3 class="card-title">{{ number_favorite_sessions }}</h3>
</div>
<br>
</div>
</div>
</div>

<h4>All Sessions</h4>

<div class="row">
<div class="col-md-12">
<div class="card card-plain">
Expand Down Expand Up @@ -104,7 +109,7 @@ <h3 class="card-title">{{ number_favorite_sessions }}</h3>
<input type="checkbox" class="mark-session" data-id-project="{{ id_project }}" data-id-session="{{ id }}" {{ attr }}>
<span class="icons">
<i rel="tooltip" class="material-icons" title="Mark as favorite">favorite_border</i>
<i rel="tooltip" class="material-icons icon-favorite" title="Unmark as favorite">favorite</i>
<i rel="tooltip" class="material-icons text-info" title="Unmark as favorite">favorite</i>
</span>
</button>
<button type="button" rel="tooltip" class="btn btn-link btn-just-icon" title="Delete Session {{ name }}" onclick="mambas.deleteSession('{{ name }}', '{{ id_project }}', '{{ id }}')">
Expand Down
5 changes: 4 additions & 1 deletion mambas/server/components/html/session.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

<div class="content">
<div class="container-fluid">
<div class="header text-center">
<h3 class="title">{{ title }}</h3>
</div>
<!-- Dashboard tiles -->
<div class="row">
<div class="col-md-4 col-sm-12">
Expand Down Expand Up @@ -58,7 +61,7 @@ <h3 class="card-title">-</h3>
</div>
<!-- End dashboard tiles -->

<h3>Metrics</h3>
<h4>Metrics</h4>

<!-- Loss graph -->
% if 'loss' in graphs.keys():
Expand Down
16 changes: 16 additions & 0 deletions mambas/server/database.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,22 @@ def get_sessions_for_project(self, id_project):
sessions.append(models.Session(id_session, session_index, dt_start, dt_end, is_active, is_favorite, host, id_project))
return sessions

def get_all_sessions(self):
query = "SELECT id_session, session_index, dt_start, dt_end, is_active, is_favorite, host, id_project FROM sessions"
rows = self.query(query).fetchall()
sessions = []
for row in rows:
id_session = row[0]
session_index = row[1]
dt_start = datetime.datetime.strptime(row[2], "%Y-%m-%d %H:%M:%S") if row[2] is not None else None
dt_end = datetime.datetime.strptime(row[3], "%Y-%m-%d %H:%M:%S") if row[3] is not None else None
is_active = row[4]
is_favorite = row[5]
host = row[6]
id_project = row[7]
sessions.append(models.Session(id_session, session_index, dt_start, dt_end, is_active, is_favorite, host, id_project))
return sessions

def set_session_inactive(self, id_session):
query = "UPDATE sessions SET is_active = 0 WHERE id_session = ?"
vars = [id_session]
Expand Down

1 comment on commit 32cc29b

@misterkevinski
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fill Project Dashboard (running sessions, best session etc.)

Please sign in to comment.