forked from dbroqua/MusicTopus
Some changes
This commit is contained in:
parent
99d2507248
commit
a35c8899ac
27 changed files with 200 additions and 48 deletions
|
@ -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>
|
||||
|
|
|
@ -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
16
views/pages/home.ejs
Normal 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>
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue