Minager/minager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update the application design

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2018-10-13 15:35:08 +02:00
parent b56348a8d9
commit dc7d76654c
13 changed files with 172 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -25,4 +25,6 @@
/.nb-gradle/ /.nb-gradle/
.mvn .mvn
**/node_modules **/node_modules
src/main/resources/static
log/spring.log

2
src/main/resources/application.properties
View File

@@ -11,6 +11,6 @@ spring.jpa.properties.hibernate.temp.use_jdbc_metadata_defaults = false
# *********************************************** # ***********************************************
# Application custom parameters # Application custom parameters
# *********************************************** # ***********************************************
minager.version=0.0.1 minager.version=1.0.0
minecraft.server.path=/home/minecraft/server minecraft.server.path=/home/minecraft/server
minecraft.server.shell.name=minecraft-server.sh minecraft.server.shell.name=minecraft-server.sh

6
src/main/ts/src/app/app.component.scss
View File

@@ -11,4 +11,10 @@ main {
font-size: 12px; font-size: 12px;
font-style: italic; font-style: italic;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
@media screen and (max-width: 600px) {
#versionDiv {
margin-top: -14px;
}
} }

31
src/main/ts/src/app/header/header.component.html
View File

@@ -7,22 +7,19 @@
</a> </a>
</logo> </logo>
<links> <links>
<ul class="navbar-nav ml-auto nav-flex-icons" style="margin-left: 0 !important;"> <form class="form-inline waves-light waves-light ml-auto" mdbWavesEffect>
<li class="nav-item"> <a routerLink="/login"
<a routerLink="/login" *ngIf="!isAuthenticated()"
*ngIf="!isAuthenticated()" class="nav-link waves-light"
class="nav-link waves-light" mdbRippleRadius>
mdbRippleRadius> <i class="fa fa-sign-in"></i> Connexion
<i class="fa fa-sign-in"></i> Connexion </a>
</a> <a routerLink="/disconnection"
<a routerLink="/disconnection" *ngIf="isAuthenticated()"
*ngIf="isAuthenticated()" class="nav-link waves-light danger-color-dark"
class="nav-link waves-light danger-color-dark" mdbRippleRadius >
mdbRippleRadius > <i class="fa fa-sign-out"></i> Déconnexion
<i class="fa fa-sign-out"></i> Déconnexion </a>
</a> </form>
</li>
</ul>
</links> </links>
<div style="background-color: blue;">Test</div>
</mdb-navbar> </mdb-navbar>

4
src/main/ts/src/app/header/header.component.ts
View File

@@ -10,6 +10,10 @@ import { environment } from '../../environments/environment';
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
a, a:visited {
color: white;
}
`] `]
}) })
export class HeaderComponent { export class HeaderComponent {

67
src/main/ts/src/app/login/login.component.html
View File

@@ -1,22 +1,47 @@
<div> <div class="card col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<label for="email">Adresse mail</label> <div class="card-body">
<input <h4 class="card-title">Connexion</h4>
id="email" <form id="form" (ngSubmit)="submitLogin()" #loginForm="ngForm">
name="email" <div class="md-form">
type="email" <i class="fa fa-envelope prefix grey-text"></i>
[(ngModel)]="model.email" /> <input mdbActive
</div> id="email"
<div> name="email"
<label for="password">Mot de passe</label> type="email"
<input class="form-control"
id="password" [(ngModel)]="model.email"
name="password" #email="ngModel"
type="password" data-error="Veuillez saisir une adresse email valide"
[(ngModel)]="model.password" /> data-sucess=""
</div> required />
<button (click)="submitLogin()">Suivant</button> <label for="email">Email</label>
<div id="errorMsg" class="card red lighten-2 text-center z-depth-2"> </div>
<div class="card-body"> <div class="md-form">
<p class="white-text mb-0">{{loginError}}</p> <i class="fa fa-lock prefix grey-text"></i>
</div> <input mdbActive
id="password"
name="password"
type="password"
class="form-control"
[(ngModel)]="model.password"
#password="ngModel"
data-error="Veuillez saisir votre mot de passe"
data-sucess=""
required />
<label for="password">Password</label>
</div>
<div id="errorMsg" class="card red lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">{{loginError}}</p>
</div>
</div>
<div class="col submitFormArea">
<button class="float-right waves-effect waves-light indigo btn"
type="submit"
[disabled]="!loginForm.form.valid">
Suivant
</button>
</div>
</form>
</div>
</div> </div>

112
src/main/ts/src/app/server/server.component.html
View File

@@ -1,47 +1,69 @@
<div> <div class="row">
Status du serveur : <div class="col-xl-8 offset-xl-2">
<span *ngIf="!serverStartedChecked" class="badge badge-warning"> <div class="card">
Vérification <div class="card-body">
</span> <h1 class="card-title">Serveur Minecraft</h1>
<span *ngIf="serverStartedChecked" class="badge" <div>
[ngClass]="serverStarted ? 'badge-success' : 'badge-danger'"> Status du serveur :
{{serverStarted ? 'Démarré' : 'Éteint'}} <span *ngIf="!serverStartedChecked" class="badge badge-warning">
</span> Vérification
</div> </span>
<div *ngIf="isAuthenticated()"> <span *ngIf="serverStartedChecked" class="badge"
<button mdbBtn [ngClass]="serverStarted ? 'badge-success' : 'badge-danger'">
*ngIf="serverStarted" {{serverStarted ? 'Démarré' : 'Éteint'}}
type="button" </span>
class="waves-light indigo btn-rounded" </div>
[disabled]="restarting" <div>
(click)="restartServer()" Adresse du serveur de jeu :
mdbWavesEffect> <span id="serverAddress"
<i class="fa fa-refresh"></i>&nbsp; class="badge light-blue"
Redémarrer (click)="copyToClipBoard()"
</button> mdbTooltip="Cliquez pour copier l'adresse"
<button mdbBtn placement="top">
type="button" {{serverAddress}}
class="waves-light btn-rounded" </span>
[ngClass]="serverStarted ? 'red' : 'green'" <span id="copiedMsg" style="display: none" class="badge badge-pill indigo">
[disabled]="restarting" Copié !
(click)="startOrStopServer()" </span>
mdbWavesEffect> </div>
<i class="fa" [ngClass]="serverStarted ? 'fa-stop-circle' : 'fa-play-circle'"></i>&nbsp; <div style="text-align:center; margin-top: 15px;" *ngIf="isAuthenticated()">
{{serverStarted ? 'Éteindre' : 'Démarrer'}} <button mdbBtn
</button> *ngIf="serverStarted"
</div> type="button"
<div id="errorMsg" class="msg card red lighten-2 text-center z-depth-2"> class="waves-light indigo btn-rounded"
<div class="card-body"> [disabled]="restarting"
<p class="white-text mb-0">{{errorMsg}}</p> (click)="restartServer()"
</div> mdbWavesEffect>
</div> <i class="fa fa-refresh"></i>&nbsp;
<div id="warnMsg" class="msg card orange lighten-2 text-center z-depth-2"> Redémarrer
<div class="card-body"> </button>
<p class="white-text mb-0">{{warnMsg}}</p> <button mdbBtn
</div> type="button"
</div> class="waves-light btn-rounded"
<div id="successMsg" class="msg card green lighten-2 text-center z-depth-2"> [ngClass]="serverStarted ? 'red' : 'green'"
<div class="card-body"> [disabled]="restarting"
<p class="white-text mb-0">{{successMsg}}</p> (click)="startOrStopServer()"
mdbWavesEffect>
<i class="fa" [ngClass]="serverStarted ? 'fa-stop-circle' : 'fa-play-circle'"></i>&nbsp;
{{serverStarted ? 'Éteindre' : 'Démarrer'}}
</button>
<div id="errorMsg" class="msg card red lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">{{errorMsg}}</p>
</div>
</div>
<div id="warnMsg" class="msg card orange lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">{{warnMsg}}</p>
</div>
</div>
<div id="successMsg" class="msg card green lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">{{successMsg}}</p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>

22
src/main/ts/src/app/server/server.component.ts
View File

@@ -12,9 +12,14 @@ import { AuthService } from '../core/services/auth.service';
transition: max-height 0.5s ease-out; transition: max-height 0.5s ease-out;
margin: 0; margin: 0;
} }
#serverAddress {
margin-top: 25px;
cursor: pointer;
}
`] `]
}) })
export class ServerComponent implements OnInit { export class ServerComponent implements OnInit {
serverAddress = '176.188.217.1:54311';
serverStartedChecked = false; serverStartedChecked = false;
serverStarted = false; serverStarted = false;
errorMsg; errorMsg;
@@ -82,4 +87,21 @@ export class ServerComponent implements OnInit {
}, 550); }, 550);
}, 3000); }, 3000);
} }
copyToClipBoard(): void {
document.addEventListener('copy', (e: ClipboardEvent) => {
e.clipboardData.setData('text/plain', (this.serverAddress));
e.preventDefault();
document.removeEventListener('copy', null);
this.showCopiedMsg();
});
document.execCommand('copy');
}
showCopiedMsg(): void {
document.getElementById('copiedMsg').style.display = '';
setTimeout(() => {
document.getElementById('copiedMsg').style.display = 'none';
}, 1500);
}
} }

BIN
src/main/ts/src/assets/images/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

2
src/main/ts/src/environments/environment.integ.ts
View File

@@ -5,7 +5,7 @@
export const environment = { export const environment = {
production: false, production: false,
apiUrl: 'http://176.188.217.1:54447', apiUrl: 'http://176.188.217.1:54447',
appVersion: '0.0.1', appVersion: '1.0.1',
title: 'INTÉGRATION' title: 'INTÉGRATION'
}; };

2
src/main/ts/src/environments/environment.prod.ts
View File

@@ -1,6 +1,6 @@
export const environment = { export const environment = {
production: true, production: true,
apiUrl: 'https://176.188.217.1:54446', apiUrl: 'https://176.188.217.1:54446',
appVersion: '0.0.1', appVersion: '1.0.1',
title: '' title: ''
}; };

2
src/main/ts/src/environments/environment.ts
View File

@@ -5,7 +5,7 @@
export const environment = { export const environment = {
production: false, production: false,
apiUrl: 'http://localhost:8080', apiUrl: 'http://localhost:8080',
appVersion: '0.0.1', appVersion: '1.0.1',
title: 'LOCAL' title: 'LOCAL'
}; };

7
src/main/ts/src/styles.scss
View File

@@ -12,8 +12,13 @@ body {
flex-direction: column; flex-direction: column;
justify-content:space-between; justify-content:space-between;
min-height: 100%; min-height: 100%;
background-image: url("./assets/images/background.png");
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} }
.btn-rounded { .btn {
border-radius: 10em; border-radius: 10em;
} }