dashboard: improve general design (mostly events related)

This commit is contained in:
nemunaire 2018-12-09 18:35:28 +01:00
parent 83ad6340b2
commit aa3750bb68
11 changed files with 70 additions and 44 deletions

View File

@ -743,14 +743,14 @@ angular.module("FICApp")
$scope.event = Event.get({ eventId: $routeParams.eventId }); $scope.event = Event.get({ eventId: $routeParams.eventId });
$scope.fields = ["kind", "txt", "time"]; $scope.fields = ["kind", "txt", "time"];
$scope.kinds = { $scope.kinds = {
"alert-secondary": "Par défaut", "secondary": "Par défaut",
"alert-primary": "Mise en valeur", "primary": "Mise en valeur",
"alert-info": "Info", "info": "Info",
"alert-warning": "Warning", "warning": "Warning",
"alert-success": "Success", "success": "Success",
"alert-danger": "Danger", "danger": "Danger",
"alert-light": "Clair", "light": "Clair",
"alert-dark": "Foncé", "dark": "Foncé",
}; };
$scope.saveEvent = function() { $scope.saveEvent = function() {

View File

@ -36,7 +36,7 @@ func treatOpeningHint(pathname string, team fic.Team) {
log.Println("[WRN]", err) log.Println("[WRN]", err)
} else if theme, err := fic.GetTheme(exercice.IdTheme); err != nil { } else if theme, err := fic.GetTheme(exercice.IdTheme); err != nil {
log.Println("[WRN]", err) log.Println("[WRN]", err)
} else if _, err := fic.NewEvent(fmt.Sprintf("L'équipe %s a dévoilé un indice pour le <strong>%d<sup>e</sup></strong> défi %s&nbsp;!", team.Name, lvl, theme.Name), "alert-info"); err != nil { } else if _, err := fic.NewEvent(fmt.Sprintf("L'équipe %s a dévoilé un indice pour le <strong>%d<sup>e</sup></strong> défi %s&nbsp;!", team.Name, lvl, theme.Name), "info"); err != nil {
log.Println("[WRN] Unable to create event:", err) log.Println("[WRN] Unable to create event:", err)
} }

View File

@ -39,7 +39,7 @@ func treatRegistration(pathname string, team_id string) {
if err := os.Remove(pathname); err != nil { if err := os.Remove(pathname); err != nil {
log.Println("[WRN]", err) log.Println("[WRN]", err)
} }
if _, err := fic.NewEvent(fmt.Sprintf("Souhaitons bonne chance à l'équipe <strong>%s</strong> qui vient de nous rejoindre&nbsp;!", team.Name), "alert-info"); err != nil { if _, err := fic.NewEvent(fmt.Sprintf("Souhaitons bonne chance à l'équipe <strong>%s</strong> qui vient de nous rejoindre&nbsp;!", team.Name), "info"); err != nil {
log.Println("[WRN] Unable to create event:", err) log.Println("[WRN] Unable to create event:", err)
} }

View File

@ -31,7 +31,7 @@ func treatRename(pathname string, team fic.Team) {
if err := genTeamMyFile(team); err != nil { if err := genTeamMyFile(team); err != nil {
log.Println("my-", team.Id, ".json generation error: ", err) log.Println("my-", team.Id, ".json generation error: ", err)
} }
if _, err := fic.NewEvent(fmt.Sprintf("Souhaitons bonne chance à l'équipe <strong>%s</strong> qui vient de nous rejoindre&nbsp;!", team.Name), "alert-info"); err != nil { if _, err := fic.NewEvent(fmt.Sprintf("Souhaitons bonne chance à l'équipe <strong>%s</strong> qui vient de nous rejoindre&nbsp;!", team.Name), "info"); err != nil {
log.Println("[WRN] Unable to create event:", err) log.Println("[WRN] Unable to create event:", err)
} }
if err := genEventsFile(); err != nil { if err := genEventsFile(); err != nil {

View File

@ -121,7 +121,7 @@ func treatSubmission(pathname string, team fic.Team, exercice_id string) {
// Write event // Write event
if lvl, err := exercice.GetLevel(); err != nil { if lvl, err := exercice.GetLevel(); err != nil {
log.Println(id, "[ERR] Unable to get exercice level:", err) log.Println(id, "[ERR] Unable to get exercice level:", err)
} else if _, err := fic.NewEvent(fmt.Sprintf("L'équipe %s a résolu le <strong>%d<sup>e</sup></strong> défi %s&nbsp;!", team.Name, lvl, theme.Name), "alert-success"); err != nil { } else if _, err := fic.NewEvent(fmt.Sprintf("L'équipe %s a résolu le <strong>%d<sup>e</sup></strong> défi %s&nbsp;!", team.Name, lvl, theme.Name), "success"); err != nil {
log.Println(id, "[WRN] Unable to create event:", err) log.Println(id, "[WRN] Unable to create event:", err)
} }
genTeamAll(team) genTeamAll(team)
@ -132,7 +132,7 @@ func treatSubmission(pathname string, team fic.Team, exercice_id string) {
if tm.Unix() == 0 { if tm.Unix() == 0 {
if lvl, err := exercice.GetLevel(); err != nil { if lvl, err := exercice.GetLevel(); err != nil {
log.Println(id, "[ERR] Unable to get exercice level:", err) log.Println(id, "[ERR] Unable to get exercice level:", err)
} else if _, err := fic.NewEvent(fmt.Sprintf("L'équipe %s tente le <strong>%d<sup>e</sup></strong> défi %s&nbsp;!", team.Name, lvl, theme.Name), "alert-warning"); err != nil { } else if _, err := fic.NewEvent(fmt.Sprintf("L'équipe %s tente le <strong>%d<sup>e</sup></strong> défi %s&nbsp;!", team.Name, lvl, theme.Name), "warning"); err != nil {
log.Println(id, "[WRN] Unable to create event:", err) log.Println(id, "[WRN] Unable to create event:", err)
} }
} }

View File

@ -1 +1 @@
../../../frontend/static/css/bootstrap.min.css ../../../admin/static/css/bootstrap.min.css

View File

@ -25,8 +25,8 @@
<div ng-repeat="(k,s) in scene" class="repeatedd-item" style="margin-bottom: 15px;" ng-cloak> <div ng-repeat="(k,s) in scene" class="repeatedd-item" style="margin-bottom: 15px;" ng-cloak>
<div class="card niceborder" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'teams'"> <div class="card niceborder bg-dark" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'teams'">
<div class="card-body text-light"> <div class="card-body text-light text-indent">
<h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1> <h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1>
<p class="lead text-justify"> <p class="lead text-justify">
Avant de vous installer, venez récupérer votre clef USB auprès Avant de vous installer, venez récupérer votre clef USB auprès
@ -35,7 +35,7 @@
</p> </p>
<p class="lead text-justify"> <p class="lead text-justify">
Une fois connecté au réseau, contactez notre serveur sur&nbsp;: Une fois connecté au réseau, contactez notre serveur sur&nbsp;:
<span style="display: block; font-size: 200%" class="text-center"> <span style="display: block; font-size: 200%; text-indent: 0;" class="text-center">
<a style="font-family: mono" href="https://fic.srs.epita.fr/"><span class="text-info">https://fic.srs.epita.fr/</span></a> <a style="font-family: mono" href="https://fic.srs.epita.fr/"><span class="text-info">https://fic.srs.epita.fr/</span></a>
</span> </span>
</p> </p>
@ -47,13 +47,13 @@
<h3 style="margin:0"><strong ng-bind="s.params.title"></strong></h3> <h3 style="margin:0"><strong ng-bind="s.params.title"></strong></h3>
</div> </div>
<div ng-controller="TimerController" ng-init="s.params.end?init(s.params.end):initStart()"> <div ng-controller="TimerController" ng-init="s.params.end?init(s.params.end):initStart()">
<div class="card-body text-center clock" style="font-size: 450%;" ng-if="duration > 0">{{ duration / 60 | time }} <span class="point">:</span> {{ duration % 60 | time }}</div> <div class="card-body text-center bg-dark text-light clock" style="font-size: 450%;" ng-if="duration > 0">{{ duration / 60 | time }} <span class="point">:</span> {{ duration % 60 | time }}</div>
<div class="card-body text-center" style="font-size: 450%;" ng-if="!duration || duration <= 0">{{ s.params.lead }}</div> <div class="card-body text-center bg-dark text-light" style="font-size: 450%;" ng-if="!duration || duration <= 0">{{ s.params.lead }}</div>
</div> </div>
</div> </div>
<div class="card niceborder" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'public'"> <div class="card niceborder bg-dark" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'public'">
<div class="card-body text-light"> <div class="card-body text-light text-indent">
<h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1> <h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1>
<p class="lead text-justify"> <p class="lead text-justify">
Durant ce challenge, les équipes doivent <strong>remonter des scénarii Durant ce challenge, les équipes doivent <strong>remonter des scénarii
@ -72,7 +72,7 @@
</div> </div>
</div> </div>
<div class="card niceborder" ng-if="s.type == 'message' && !s.params.hide"> <div class="card niceborder bg-dark" ng-if="s.type == 'message' && !s.params.hide">
<div class="card-body text-light"> <div class="card-body text-light">
<h1 ng-if="s.params.title"><strong ng-bind="s.params.title"></strong></h1> <h1 ng-if="s.params.title"><strong ng-bind="s.params.title"></strong></h1>
<p ng-if="s.params.lead" class="lead text-justify" ng-bind="s.params.lead"></p> <p ng-if="s.params.lead" class="lead text-justify" ng-bind="s.params.lead"></p>
@ -92,7 +92,7 @@
<div class="card-body text-light" ng-if="s.params.html" ng-bind-html="s.params.html"></div> <div class="card-body text-light" ng-if="s.params.html" ng-bind-html="s.params.html"></div>
</div> </div>
<div class="card niceborder" ng-if="s.type == 'exercice' && !s.params.hide"> <div class="card niceborder bg-dark" ng-if="s.type == 'exercice' && !s.params.hide">
<div class="card-body text-light"> <div class="card-body text-light">
<p class="lead"> <p class="lead">
<strong>Challenge <em>{{ themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].title }}</em> du thème {{ themes[my.exercices[s.params.exercice].theme_id].name }}</strong> <strong>Challenge <em>{{ themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].title }}</em> du thème {{ themes[my.exercices[s.params.exercice].theme_id].name }}</strong>
@ -111,8 +111,8 @@
</div> </div>
<div ng-if="s.type == 'table' && !s.params.hide"> <div ng-if="s.type == 'table' && !s.params.hide">
<table class="table table-striped table-sm"> <table class="table table-striped table-sm table-dark">
<thead> <thead class="bg-light">
<tr class="text-light"> <tr class="text-light">
<th class="frotated"></th> <th class="frotated"></th>
<th class="rotated" ng-repeat="(tid,th) in themes" ng-if="s.params.themes.indexOf(tid-0) !== -1"><div class="bg-dark"><span>{{ th.name }}</span></div></th> <th class="rotated" ng-repeat="(tid,th) in themes" ng-if="s.params.themes.indexOf(tid-0) !== -1"><div class="bg-dark"><span>{{ th.name }}</span></div></th>
@ -129,7 +129,7 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody class="table-bordered bg-secondary text-dark" ng-if="s.params.kind == 'teams'"> <tbody class="table-bordered" ng-if="s.params.kind == 'teams'">
<tr ng-repeat="team in rank | orderBy: 'rank' | limitTo: s.params.limit: s.params.begin" ng-if="s.params.teams.indexOf(team.id-0) !== -1" ng-controller="TeamController"> <tr ng-repeat="team in rank | orderBy: 'rank' | limitTo: s.params.limit: s.params.begin" ng-if="s.params.teams.indexOf(team.id-0) !== -1" ng-controller="TeamController">
<th class="text-center">{{ team.rank }}<sup ng-if="team.rank == 1">er</sup><sup ng-if="team.rank > 1">e</sup><br><span style="text-overflow: ellipsis; display: inline-block; width: 82px;overflow: hidden;">{{ team.name }}</span></th> <th class="text-center">{{ team.rank }}<sup ng-if="team.rank == 1">er</sup><sup ng-if="team.rank > 1">e</sup><br><span style="text-overflow: ellipsis; display: inline-block; width: 82px;overflow: hidden;">{{ team.name }}</span></th>
<td ng-repeat="(tid,th) in themes" class="text-center" ng-if="mystats && s.params.themes.indexOf(tid-0) !== -1"> <td ng-repeat="(tid,th) in themes" class="text-center" ng-if="mystats && s.params.themes.indexOf(tid-0) !== -1">
@ -154,8 +154,8 @@
</table> </table>
</div> </div>
<div class="card niceborder" ng-if="s.type == 'rank' && !s.params.hide"> <div class="card niceborder bg-dark" ng-if="s.type == 'rank' && !s.params.hide">
<table class="table table-bordered table-striped table-sm"> <table class="table table-bordered table-striped table-sm table-dark">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th class="text-right">Place</th> <th class="text-right">Place</th>
@ -173,12 +173,12 @@
</table> </table>
</div> </div>
<div class="card niceborder" ng-if="s.type == 'carousel' && !s.params.hide"> <div class="card niceborder bg-dark" ng-if="s.type == 'carousel' && !s.params.hide">
<div class="card-header bg-{{ s.params.color }} text-white" ng-if="s.params.title"> <div class="card-header bg-{{ s.params.color }} text-white" ng-if="s.params.title">
<h3 style="margin:0" ng-bind="s.params.title" class="text-dark" ng-if="s.params.color == 'light'"></h3> <h3 style="margin:0" ng-bind="s.params.title" class="text-dark" ng-if="s.params.color == 'light'"></h3>
<h3 style="margin:0" ng-bind="s.params.title" ng-if="s.params.color != 'light'"></h3> <h3 style="margin:0" ng-bind="s.params.title" ng-if="s.params.color != 'light'"></h3>
</div> </div>
<div class="card-body bg-primary"> <div class="card-body bg-dark">
<div class="carousel slide" data-interval="30000" style="height: 270px" autocarousel ng-if="s.params.kind == 'themes'"> <div class="carousel slide" data-interval="30000" style="height: 270px" autocarousel ng-if="s.params.kind == 'themes'">
<ol class="carousel-indicators"> <ol class="carousel-indicators">
@ -216,7 +216,7 @@
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item" ng-repeat="(i,t) in pagesrank" ng-class="{active: $first}"> <div class="carousel-item" ng-repeat="(i,t) in pagesrank" ng-class="{active: $first}">
<div class="carousel-caption"> <div class="carousel-caption">
<table class="table table-bordered table-striped table-sm"> <table class="table table-bordered table-striped table-sm table-dark">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th class="text-right">Place</th> <th class="text-right">Place</th>
@ -271,16 +271,20 @@
<div class="col-4"> <div class="col-4">
<div ng-controller="EventsController" id="eventsList"> <div ng-controller="EventsController" id="eventsList" style="position: fixed">
<div ng-repeat="e in events track by e.id" class="swap-animation" ng-cloak> <div ng-repeat="e in events track by e.id" class="swap-animation" ng-cloak>
<div class="alert" ng-class="e.kind"> <div class="card card-sm niceborder" ng-class="e.kind">
<div class="heading text-muted">{{ e.since | since }}</div> <div class="card-header text-right">
<span ng-bind-html="e.txt"></span> <small class="text-muted">{{ e.since | since }}</small>
</div>
<div class="card-body text-indent text-justify">
<p class="card-text" ng-bind-html="e.txt"></p>
</div>
</div> </div>
</div> </div>
<div class="navbar bg-light" ng-controller="CountdownController" style="box-shadow: 0px -5px 5px 5px #e9ecef; position: fixed; bottom: 109px; right: 0; width: 33vw;" ng-cloak> <div class="bg-light" ng-controller="CountdownController" style="box-shadow: 0px -5px 5px 5px #e9ecef; position: fixed; bottom: 109px; right: 0; width: 33vw;" ng-cloak>
<div class="text-center" ng-if="time.hours === 0 || time.hours" style="margin-top: -5px; width: inherit"> <div class="text-center text-dark" ng-if="time.hours === 0 || time.hours" style="margin-top: -5px; width: inherit">
<div class="clock" ng-class="{expired: time.expired, end: time.end}" style="font-size: 50px"> <div class="clock" ng-class="{expired: time.expired, end: time.end}" style="font-size: 50px">
<span id="hours">{{ time.hours | time }}</span> <span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span> <span class="point">:</span>
@ -299,7 +303,7 @@
</div> </div>
</div> </div>
<div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 110px" class="bg-primary"> <div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 110px" class="bg-dark">
<div class="carousel slide" id="carousel-logos" data-ride="carousel" data-interval="10500"> <div class="carousel slide" id="carousel-logos" data-ride="carousel" data-interval="10500">
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item"> <div class="carousel-item">
@ -352,7 +356,7 @@
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<div class="carousel-caption"> <div class="carousel-caption">
<table class="table table-sm table-striped"> <table class="table table-sm table-striped table-dark">
<tbody> <tbody>
<tr> <tr>
<td>{{ settings.start - 1800000 | date:"HH'&nbsp;h&nbsp;'mm" }}</td> <td>{{ settings.start - 1800000 | date:"HH'&nbsp;h&nbsp;'mm" }}</td>

View File

@ -18,6 +18,7 @@ angular.module("FICApp", ["ngSanitize", "ngAnimate"])
$scope.events.forEach(function(event) { $scope.events.forEach(function(event) {
event.time = Date.parse(event.time); event.time = Date.parse(event.time);
event.since = now - event.time; event.since = now - event.time;
event.kind = ["border-" + event.kind, "alert-" + event.kind];
}); });
}); });
} }

View File

@ -158,7 +158,7 @@ a:hover .teamname {
#eventsList { #eventsList {
overflow:hidden; overflow:hidden;
max-height: 100vh max-height: 90vh;
} }
.swap-animation .alert { .swap-animation .alert {
@ -166,8 +166,8 @@ a:hover .teamname {
} }
.swap-animation { .swap-animation {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
max-height: 25vh; max-height: 30vh;
transition: max-height 1.5s linear,opacity 1.0s linear,transform 0.5s linear; transition: max-height 1.0s linear,opacity 1.0s linear,transform 0.5s linear;
} }
.swap-animation.ng-enter { .swap-animation.ng-enter {
transform: translateY(-25vh); transform: translateY(-25vh);
@ -274,3 +274,24 @@ blockquote {
padding-right: 2em; padding-right: 2em;
max-width: 100%; max-width: 100%;
} }
#eventsList .card {
border-left-color: rgba(0,0,0,.125) !important;
border-right-color: rgba(0,0,0,.125) !important;
border-top-color: rgba(0,0,0,.125) !important;
}
.bg-public .card-body {
padding:1rem;
padding-bottom:0;
}
.card-sm .card-header, .card-sm .card-footer {
padding: 0.2rem 0.75rem;
}
.card-sm .card-body {
padding: 0.4rem 0.75rem;
}
.card-sm .card-body.text-indent p {
text-indent: 0.4rem;
}

View File

@ -17,7 +17,7 @@
<div class="card-columns"> <div class="card-columns">
<div class="card niceborder excard" ng-repeat="(k,theme) in themes" ng-click="goTheme()"> <div class="card niceborder excard" ng-repeat="(k,theme) in themes" ng-click="goTheme()">
<div class="card-img-top theme-card" ng-show="theme.image" style="background-image: url({{ theme.image }})"></div> <div class="card-img-top theme-card" ng-show="theme.image" style="background-image: url({{ theme.image }})"></div>
<div class="card-body"> <div class="card-body text-indent">
<h5 class="card-title clearfix"> <h5 class="card-title clearfix">
<a ng-href="/{{ theme.urlid }}">{{ theme.name }}</a> <a ng-href="/{{ theme.urlid }}">{{ theme.name }}</a>
<a ng-href="/tags/{{tag}}" class="badge badge-pill badge-secondary ml-1 float-right">#tag</a> <a ng-href="/tags/{{tag}}" class="badge badge-pill badge-secondary ml-1 float-right">#tag</a>

View File

@ -60,7 +60,7 @@ func DBCreate() error {
CREATE TABLE IF NOT EXISTS events( CREATE TABLE IF NOT EXISTS events(
id_event INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT, id_event INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT,
txt VARCHAR(255) NOT NULL, txt VARCHAR(255) NOT NULL,
kind ENUM('alert-primary', 'alert-secondary', 'alert-success', 'alert-danger', 'alert-warning', 'alert-info', 'alert-light', 'alert-dark') NOT NULL, kind ENUM('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark') NOT NULL,
time TIMESTAMP NOT NULL time TIMESTAMP NOT NULL
) DEFAULT CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci; ) DEFAULT CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;
`); err != nil { `); err != nil {