michael/MusicTopus
1
0
Fork 0
forked from dbroqua/MusicTopus
Code Pull requests Activity

Some changes in structure + add album

Browse source
This commit is contained in:
Damien Broqua 2022-02-15 11:03:20 +01:00
parent 3ebdc9c06a
commit f08e70eb7c
36 changed files with 883 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

144
views/pages/ajouter-un-album/form.ejs Normal file
View file

@ -0,0 +1,144 @@
<div class="container-fluid" id="app">
<form class="bg-white rounded shadow-5-strong p-5" method="POST" @submit="add">
<div class="row">
<div class="col-12 col-sm-3 p-2 text-center">
<img src="<%= page.values.thumb %>" alt="Miniature" />
<hr />
<img v-for="image in album.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
<hr />
<ol>
<li v-for="track in album.tracklist">{{ track.title }} ({{track.duration}})</li>
</ol>
</div>
<div class="col-12 col-sm-9 p-2">
<div class="row">
<div class="col-12 p-2">
<div class="form-outline mb-4">
<input type="text" id="title" name="title" class="form-control" v-model="album.title" disabled />
<label class="form-label" for="artists">Titre</label>
</div>
<div class="form-outline mb-4" v-for="artist in album.artists">
<input type="text" id="artists" name="artists" class="form-control" v-model="artist.name" disabled />
<label class="form-label" for="artists">Artiste</label>
</div>
</div>
<hr />
<div class="col-12 col-sm-6 p-2" v-for="genre in album.genres">
<div class="form-outline mb-4">
<input type="text" id="genres" name="genres" class="form-control" v-model="genre" disabled />
<label class="form-label" for="company">Genre</label>
</div>
</div>
<div class="col-12 col-sm-6 p-2" v-for="style in album.styles">
<div class="form-outline mb-4">
<input type="text" id="style" name="style" class="form-control" v-model="style" disabled />
<label class="form-label" for="company">Style</label>
</div>
</div>
<hr />
<div class="col-12 col-sm-6 p-2">
<div class="form-outline mb-4">
<input type="text" id="year" name="year" class="form-control" v-model="album.year" disabled />
<label class="form-label" for="year">Année</label>
</div>
</div>
<div class="col-12 col-sm-6 p-2">
<div class="form-outline mb-4">
<input type="text" id="released" name="released" class="form-control" v-model="album.released" disabled />
<label class="form-label" for="released">Date de sortie</label>
</div>
</div>
<hr />
<div class="col-12 col-sm-6 p-2">
<div class="form-outline mb-4">
<input type="text" id="country" name="country" class="form-control" v-model="album.country" disabled />
<label class="form-label" for="country">Pays</label>
</div>
</div>
<hr />
<div class="col-12 col-sm-6 p-2">
<ol>
<li v-for="identifier in album.identifiers">
{{identifier.value}} ({{identifier.type}})
</li>
</ol>
</div>
<hr />
<div class="col-12 p-2">
<div class="form-outline mb-4">
<textarea id="notes" id="notes" name="notes" class="form-control" v-model="album.notes" disabled></textarea>
<label class="form-label" for="country">Notes</label>
</div>
</div>
<hr />
<div class="col-12 col-sm-6 p-2" v-for="format in album.formats">
<div class="form-outline mb-4">
<input type="text" id="format" name="format" class="form-control" v-model="format.name" disabled />
<label class="form-label" for="format">Format</label>
</div>
</div>
<hr />
<div class="col-12 col-sm-6 p-2" v-for="label in album.labels">
<div class="form-outline mb-4">
<input type="text" id="label" name="label" class="form-control" v-model="label.name" disabled />
<label class="form-label" for="label">Label</label>
</div>
</div>
<hr />
<div class="col-12 col-sm-6 p-2" v-for="company in album.companies">
<div class="form-outline mb-4">
<input type="text" id="company" name="company" class="form-control" v-model="company.name" disabled />
<label class="form-label" for="company">Société</label>
</div>
</div>
<hr />
<div class="col-12 col-sm-6 p-2">
<ol>
<li v-for="video in album.videos">
<a :href="video.uri" target="_blank">{{video.title}}</a>
</li>
</ol>
</div>
<hr />
<div class="col-12 col-sm-6 p-2">
<ol>
<li v-for="extraartist in album.extraartists">
{{extraartist.name}} ({{extraartist.role}})
</li>
</ol>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Ajouter</button>
</form>
</div>
<script>
const defaultValues = <%- JSON.stringify(page.values) %>;
Vue.createApp({
data() {
return {
album: defaultValues,
}
},
methods: {
add(event) {
event.preventDefault();
axios.post('/api/v1/albums', this.album)
.then(() => {
window.location.href = '/ma-collection';
})
.catch((err) => {
console.log('ERR:', err.response);
showToastr(err.response?.data?.message || "Impossible d'ajouter ce album pour le moment…");
});
}
}
}).mount('#app')
</script>

105
views/pages/ajouter-un-album/search.ejs Normal file
View file

@ -0,0 +1,105 @@
<div class="container-fluid" id="app">
<form @submit="search">
<div class="input-group mb-3">
<div class="form-outline">
<input v-model="q" type="search" id="q" class="form-control" />
<label class="form-label" for="q">Nom de l'album ou code barre</label>
</div>
<button type="submit" class="btn btn-primary">
<i class="fas fa-search"></i>
</button>
</div>
</form>
<table class="table table-striped table-hover table-sm align-middle">
<thead>
<tr>
<th>Pochette</th>
<th>Titre</th>
<th>Pays</th>
<th>Année</th>
<th>Format</th>
<th>Genres</th>
<th>Styles</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td>
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
</td>
<td>
<a :href="'/ajouter-un-album/' + item.id">{{ item.title }}</a>
</td>
<td>{{ item.year }}</td>
<td>{{ item.country }}</td>
<td>
<ul>
<li v-for="format in item.format">{{ format }}</li>
</ul>
</td>
<td>
<ul>
<li v-for="genre in item.genre">{{ genre }}</li>
</ul>
</td>
<td>
<ul>
<li v-for="style in item.style">{{ style }}</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.createApp({
data() {
return {
q: '',
items: [],
}
},
methods: {
search(event) {
event.preventDefault();
axios.get(`/api/v1/search?q=${this.q}`)
.then( response => {
const {
results,
} = response.data;
let items = [];
for (let i = 0 ; i < results.length ; i += 1 ) {
const {
id,
title,
thumb,
year,
country,
format,
genre,
style,
} = results[i];
items.push({
id,
title,
thumb,
year,
country,
format,
genre,
style,
});
}
this.items = items;
})
.catch( err => {
console.log('err:', err);
});
}
}
}).mount('#app')
</script>