Some changes

This commit is contained in:
Damien Broqua 2022-02-16 15:42:02 +01:00
parent 99d2507248
commit a35c8899ac
27 changed files with 200 additions and 48 deletions

View file

@ -1,12 +1,6 @@
<div class="container">
<div class="columns is-mobile">
<div class="
column
is-10-mobile is-offset-1-mobile
is-8-tablet is-offset-2-tablet
is-6-desktop is-offset-3-desktop
is-4-widescreen is-offset-4-widescreen
">
<div class="column is-10-mobile is-offset-1-mobile is-8-tablet is-offset-2-tablet is-6-desktop is-offset-3-desktop is-4-widescreen is-offset-4-widescreen">
<form class="box" method="POST">
<div class="has-text-centered">
<img class="mb-4" src="/img/logo.png" alt="DarKou">

16
views/pages/home.ejs Normal file
View file

@ -0,0 +1,16 @@
<section class="section">
<div class="container">
<div class="header"></div>
<h1 class="title">
Ma CDThèque
</h1>
<p class="subtitle">
Retrouvez votre CDThèque partout depuis votre PC ou votre smartphone.
</p>
<p>
Ma CDThèque est un site web permettant de sauvegarder votre liste des CDs ou Vinyles et de la retrouver facilement et n'importe ou !
<br />
Le code source est publiée sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU GPL-3.0-or-later</a>. Le code source est librement accessible sur <a href="https://git.darkou.fr/dbroqua/nodecdtheque">git.darkou.fr</a>.
</p>
</div>
</section>

View file

@ -1,12 +1,6 @@
<div class="container">
<div class="columns is-mobile">
<div class="
column
is-10-mobile is-offset-1-mobile
is-8-tablet is-offset-2-tablet
is-6-desktop is-offset-3-desktop
is-4-widescreen is-offset-4-widescreen
">
<div class="column is-10-mobile is-offset-1-mobile is-8-tablet is-offset-2-tablet is-6-desktop is-offset-3-desktop is-4-widescreen is-offset-4-widescreen">
<form class="box" method="POST">
<div class="has-text-centered">
<img class="mb-4" src="/img/logo.png" alt="DarKou">
@ -38,7 +32,7 @@
</div>
<button class="button is-link">Inscription</button>
</form>
</form>
</div>
</div>
</div>

View file

@ -17,7 +17,7 @@
</label>
<div class="control">
<div class="select is-small">
<select v-model="artist" @change="fetch">
<select v-model="artist" @change="changeFilter">
<option value="">Tous</option>
<%
for (let i = 0; i < page.artists.length; i += 1 ) {
@ -50,7 +50,32 @@
<span>Pays</span>
</span>
</th>
<th>Format</th>
<th>
<div class="field">
<label class="label">
<span class="icon-text">
<span class="icon has-text-info">
<i v-if="sort !== 'formats.name'" class="fa-solid fa-sort" @click="changeSort('formats.name', 'asc')"></i>
<i v-if="sort === 'formats.name' && order === 'desc'" class="fa-solid fa-sort-down" @click="changeSort('formats.name', 'asc')"></i>
<i v-if="sort === 'formats.name' && order === 'asc'" class="fa-solid fa-sort-up" @click="changeSort('formats.name', 'desc')"></i>
</span>
<span>Format</span>
</span>
</label>
<div class="control">
<div class="select is-small">
<select v-model="format" @change="changeFilter">
<option value="">Tous</option>
<%
for (let i = 0; i < page.formats.length; i += 1 ) {
__append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
}
%>
</select>
</div>
</div>
</div>
</th>
<th>Genres</th>
<th>Styles</th>
</tr>
@ -129,6 +154,7 @@
totalPages: 1,
limit: 5,
artist: '',
format: '',
sort: 'artists_sort',
order: 'asc',
}
@ -140,7 +166,15 @@
fetch() {
this.loading = true;
axios.get(`/api/v1/albums?page=${this.page}&limit=${this.limit}&artists_sort=${this.artist}&sort=${this.sort}&order=${this.order}`)
let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
if ( this.artist ) {
url += `&artists_sort=${this.artist}`;
}
if ( this.format ) {
url += `&format=${this.format}`;
}
axios.get(url)
.then( response => {
this.items = response.data.rows;
this.total = response.data.count;
@ -180,6 +214,11 @@
this.fetch();
},
changeFilter() {
this.page = 1;
this.fetch();
}
}
}).mount('#app')
</script>