update: added Environment session Object

This commit is contained in:
Emmanuel ROY 2021-05-11 13:46:34 +02:00
parent 99e7c9544c
commit d4ae501192
3 changed files with 105 additions and 2 deletions

View file

@ -0,0 +1,41 @@
<?php
namespace MVC\Object;
class Environment
{
public static function getColorMenuFromEnv()
{
switch(ENV){
case 'TEST':
return 'red';
break;
case 'PREPROD':
return 'blue';
break;
case 'PROD':
return 'black';
break;
default:
return 'green';
}
}
public static function getTextEnvironment()
{
switch(ENV){
case 'TEST':
return '<li style="background-color: '.self::getColorMenuFromEnv().'"><b>TESTING ENVIRONMENT</b><li>';
break;
case 'PREPROD':
return '<li style="background-color: '.self::getColorMenuFromEnv().'"><b>PREPROD ENVIRONMENT</b><li>';
break;
case 'PROD':
return '';
break;
default:
return '<li style="background-color: '.self::getColorMenuFromEnv().'"><b>DEVEL ENVIRONMENT</b><li>';
}
}
}

View file

@ -12,7 +12,10 @@
<div id="app">
<div>
<input v-model="searchText" placeholder="Search...">
</div>
</div>
<div v-if="is_loading">
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>
<div v-if="items" >
<a href="#" v-for="item in itemsSearched" :key="item.id">
<div>
@ -45,13 +48,15 @@
el: '#app',
data: {
items: [],
searchText: ''
searchText: '',
is_loading: true,
},
mounted() {
axios
.get('https://ghibliapi.herokuapp.com/films')
.then(response => {
this.items = response.data;
this.is_loading = false
})
.catch(error => console.log(error))
},

View file

@ -162,4 +162,61 @@ li.actual > a {
}
#access-denied > .container{
padding-top: 10%;
}
/** LOADING */
/** https://loading.io/css/ */
.lds-ellipsis {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ellipsis div {
position: absolute;
top: 27px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #ddd;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 6px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 6px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 26px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 45px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(19px, 0);
}
}