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

@ -5,7 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - Ma CDThèque <% } %></title>
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
@ -42,23 +49,13 @@
});
}
});
// document.addEventListener('DOMContentLoaded', () => {
// (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
// const $notification = $delete.parentNode;
// $delete.addEventListener('click', () => {
// $notification.parentNode.removeChild($notification);
// });
// });
// });
</script>
</head>
<body class="has-navbar-fixed-top">
<nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
Ma CDThèque
<img src="/logo.png" alt="Ma CDThèque">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
@ -71,10 +68,23 @@
<div id="navbarBasicExample" class="navbar-menu">
<% if ( user ) { %>
<div class="navbar-start">
<a class="navbar-item" href="/ajouter-un-album">
Ajouter un album
</a>
<div class="navbar-item">
<p class="control">
<a class="button is-link" href="/ajouter-un-album">
<span class="icon">
<i class="fa-solid fa-plus"></i>
</span>
<span>
Ajouter un album
</span>
</a>
</p>
</div>
</div>
<% } %>
<div class="navbar-end">
<% if ( user ) { %>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Mon compte
@ -86,10 +96,7 @@
</a>
</div>
</div>
</div>
<% } %>
<div class="navbar-end">
<% } %>
<div class="navbar-item">
<div class="buttons">
<% if ( !user ) { %>
@ -155,5 +162,14 @@
<% } %>
<%- include(viewname) %>
</main>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Ma CDThèque</strong> par <a href="https://www.darkou.fr">Damien Broqua</a>.
Fait avec ❤ à Bordeaux.
Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GNU GPL-3.0-or-later</a>.
</p>
</div>
</footer>
</body>
</html>

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>