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

2
.gitignore vendored
View File

@@ -26,3 +26,5 @@
.mvn
**/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
# ***********************************************
minager.version=0.0.1
minager.version=1.0.0
minecraft.server.path=/home/minecraft/server
minecraft.server.shell.name=minecraft-server.sh

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

@@ -12,3 +12,9 @@ main {
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);
}
@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>
</logo>
<links>
<ul class="navbar-nav ml-auto nav-flex-icons" style="margin-left: 0 !important;">
<li class="nav-item">
<a routerLink="/login"
*ngIf="!isAuthenticated()"
class="nav-link waves-light"
mdbRippleRadius>
<i class="fa fa-sign-in"></i> Connexion
</a>
<a routerLink="/disconnection"
*ngIf="isAuthenticated()"
class="nav-link waves-light danger-color-dark"
mdbRippleRadius >
<i class="fa fa-sign-out"></i> Déconnexion
</a>
</li>
</ul>
<form class="form-inline waves-light waves-light ml-auto" mdbWavesEffect>
<a routerLink="/login"
*ngIf="!isAuthenticated()"
class="nav-link waves-light"
mdbRippleRadius>
<i class="fa fa-sign-in"></i> Connexion
</a>
<a routerLink="/disconnection"
*ngIf="isAuthenticated()"
class="nav-link waves-light danger-color-dark"
mdbRippleRadius >
<i class="fa fa-sign-out"></i> Déconnexion
</a>
</form>
</links>
<div style="background-color: blue;">Test</div>
</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;
height: 50px;
}
a, a:visited {
color: white;
}
`]
})
export class HeaderComponent {

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

@@ -1,22 +1,47 @@
<div>
<label for="email">Adresse mail</label>
<input
id="email"
name="email"
type="email"
[(ngModel)]="model.email" />
</div>
<div>
<label for="password">Mot de passe</label>
<input
id="password"
name="password"
type="password"
[(ngModel)]="model.password" />
</div>
<button (click)="submitLogin()">Suivant</button>
<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 class="card col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div class="card-body">
<h4 class="card-title">Connexion</h4>
<form id="form" (ngSubmit)="submitLogin()" #loginForm="ngForm">
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input mdbActive
id="email"
name="email"
type="email"
class="form-control"
[(ngModel)]="model.email"
#email="ngModel"
data-error="Veuillez saisir une adresse email valide"
data-sucess=""
required />
<label for="email">Email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<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>

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

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

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;
margin: 0;
}
#serverAddress {
margin-top: 25px;
cursor: pointer;
}
`]
})
export class ServerComponent implements OnInit {
serverAddress = '176.188.217.1:54311';
serverStartedChecked = false;
serverStarted = false;
errorMsg;
@@ -82,4 +87,21 @@ export class ServerComponent implements OnInit {
}, 550);
}, 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 = {
production: false,
apiUrl: 'http://176.188.217.1:54447',
appVersion: '0.0.1',
appVersion: '1.0.1',
title: 'INTÉGRATION'
};

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

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

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

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

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

@@ -12,8 +12,13 @@ body {
flex-direction: column;
justify-content:space-between;
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;
}