Acksop/SAND-framework
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity

update for compatibility ie11

Browse source
This commit is contained in:
Emmanuel ROY 2021-06-16 11:35:03 +02:00
commit 58f6adb7ba
132 changed files with 26633 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

108
console/skel/page-vuejs.blade.php
View file

@ -7,43 +7,44 @@
@endsection
@section('content')
<h1>%%PAGE%% - VUE.js Controlleur</h1>
<br/><br/><br/>
<div id="app">
<div>
<input v-model="searchText" placeholder="Search...">
</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>
<div>
<h2>
@{{ item.title }}
</h2>
</div>
</div>
<div>
<p>
@{{ item.description.slice(0, 300) + "..." }}
</p>
</div>
<div>
<span>Year : @{{ item.release_date }}</span>
<span>Director : @{{ item.director }}</span>
<span>Producer : @{{ item.producer }}</span>
</div>
</a>
</div>
<h1>ghibli - VUE.js Controlleur</h1>
<br/><br/><br/>
<div id="app">
<div>
<input v-model="searchText" placeholder="Search...">
</div>
<div v-if="is_loading" id="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>
<div>
<h2>
@{{ item.title }}
</h2>
</div>
</div>
<div>
<p>
@{{ item.description.slice(0, 300) + "..." }}
</p>
</div>
<div>
<span>Year : @{{ item.release_date }}</span>
<span>Director : @{{ item.director }}</span>
<span>Producer : @{{ item.producer }}</span>
</div>
</a>
</div>
</div>
@endsection
@section('bottom-javascript')
@parent
<script>
@if(\MVC\Classe\Browser::get() !== 'Internet Explorer')
const vue = new Vue({
el: '#app',
data: {
@ -53,11 +54,11 @@
},
mounted() {
axios
.get('https://ghibliapi.herokuapp.com/films')
.then(response => {
this.items = response.data;
.get('https://ghibliapi.herokuapp.com/films')
.then(response => {
this.items = response.data;
this.is_loading = false
})
})
.catch(error => console.log(error))
},
computed : {
@ -78,5 +79,42 @@
}
}
});
@else
const vue = new Vue({
el: '#app',
data: {
items: [],
searchText: '',
is_loading: true,
},
mounted: function() {
axios
.get('https://ghibliapi.herokuapp.com/films')
.then(function(response) {
this.items = response.data;
this.is_loading = false;
document.getElementById('is-loading').style.display = 'none';
})
.catch(function(error) {console.log(error)})
},
computed: {
itemsSearched : function(){
var self = this;
if( this.searchText == ''){
return this.items;
}
return this.items.filter(function(item){
// https://www.reddit.com/r/vuejs/comments/62kfae/how_do_i_create_very_simple_instant_search_filter/
// Must be of string type
return item.title.toLowerCase().indexOf(self.searchText) >= 0 ||
item.producer.toLowerCase().indexOf(self.searchText) >= 0 ||
item.director.toLowerCase().indexOf(self.searchText) >= 0 ||
item.release_date.toString().indexOf(self.searchText) >= 0;
});
}
}
});
@endif
</script>
@endsection