MusicTopus/views/pages/ajouter-un-album.ejs

204 lines
11 KiB
Text
Raw Normal View History

<main class="layout-maxed ajouter-un-album" id="ajouter-album">
2022-02-23 08:41:30 +01:00
<h1>Ajouter un album</h1>
<form @submit="search">
<div class="grid grid-cols-1 md:grid-cols-2">
<div>
2022-02-23 11:33:57 +01:00
<label for="q">Nom de l'album ou code barre</label>
2022-02-18 16:53:54 +01:00
<div class="field has-addons">
<input type="text" name="q" id="q" v-model="q" placeholder="ex : Iron Maiden - Powerslave" autofocus>
<button class="button is-primary" :disabled="loading" aria-label="Chercher">
2022-02-23 08:41:30 +01:00
<i class="icon-search" v-if="!loading"></i>
<i class="icon-spin animate-spin" v-if="loading"></i>
2022-02-18 16:53:54 +01:00
</button>
</div>
<div class="grid sm:grid-cols-3 gap-5">
<div class="field">
2022-09-03 17:11:17 +02:00
<label for="format">Format</label>
<select id="format" v-model="format">
<option value="">Tous</option>
<option v-for="format in orderedItems(formats)" :value="format">{{format}}</option>
</select>
</div>
<div class="field">
<label for="year">Année</label>
<input type="number" name="year" v-model="year" id="year" placeholder="1984">
</div>
<div class="field">
<label for="country">Pays</label>
<input type="string" name="country" v-model="country" id="country" placeholder="France">
</div>
</div>
</div>
2022-02-18 16:53:54 +01:00
</div>
</form>
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
<div v-if="!loading" v-for="item in items" class="item" :class="{'in-collection': item.inCollection}">
2022-02-18 16:53:54 +01:00
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
<small v-if="item.inCollection"> (Dans ma collection)</small>
2022-02-18 16:53:54 +01:00
<div class="grid grid-cols-2 md:grid-cols-4">
<div>
<img :src="item.thumb" :alt="item.title" @click="loadDetails(item.id)"/>
2022-02-18 16:53:54 +01:00
</div>
<div class="md:col-span-3">
<span><strong>Année :</strong> {{ item.year }}</span>
<br />
<span><strong>Pays :</strong> {{ item.country }}</span>
<br />
<span>
<strong>Format : </strong>
<template v-for="(format, index) in item.format">
{{ format }}<template v-if="index < item.format.length - 1">, </template>
</template>
2022-02-18 16:53:54 +01:00
</span>
<br />
<span>
<strong>Genre : </strong>
<template v-for="(genre, index) in item.genre">
{{ genre }}<template v-if="index < item.genre.length - 1">, </template>
</template>
2022-02-18 16:53:54 +01:00
</span>
<br />
<span>
<strong>Style : </strong>
<template v-for="(style, index) in item.style">
{{ style }}<template v-if="index < item.style.length - 1">, </template>
</template>
2022-02-18 16:53:54 +01:00
</span>
</div>
</div>
</div>
</div>
<div class="modal" :class="{'is-visible': modalIsVisible}">
<div class="modal-background"></div>
<div class="modal-card">
2022-02-18 11:05:10 +01:00
<header>
<div>{{details.artists_sort}} - {{details.title}}</div>
<button aria-label="Fermer" class="close" @click="toggleModal"></button>
</header>
2022-02-18 11:05:10 +01:00
<section>
2023-12-15 08:30:41 +01:00
<div class="grid grid-cols-1 md:grid-cols-3 gap-16">
2022-02-18 11:05:10 +01:00
<div>
<div class="text-center">
2022-02-23 10:39:17 +01:00
<img :src="details.thumb %>" :alt="`Miniature pour l'album ${details.title}`" />
<hr />
2022-02-23 10:39:17 +01:00
<img v-for="image in details.images" :src="image.uri150" :alt="`Miniature de type ${image.type}`" style="max-width: 60px;" />
<hr />
</div>
2023-10-27 21:22:23 +02:00
<ul class="is-unstyled">
<li v-for="track in details.tracklist" :class="{'ml-4': track.type_ === 'track'}">
<strong v-if="track.type_ === 'heading'">
{{track.title}}
</strong>
<template v-else>
{{ track.position }}
{{ track.title }} <span v-if="track.duration">({{track.duration}})</span>
<ul v-if="track.artists && track.artists.length > 0" class="sm-hidden">
<li v-for="extra in track.artists" class=" ml-4">
<small>{{extra.role}} : {{extra.name}}</small>
</li>
</ul>
</template>
</li>
2023-10-27 21:22:23 +02:00
</ul>
</div>
2023-12-15 08:30:41 +01:00
<div class="md:col-span-2">
2023-10-27 21:22:23 +02:00
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div class="grid grid-cols-1">
2022-02-18 11:05:10 +01:00
<strong>Genres</strong>
<template v-for="(genre, index) in details.genres">
{{genre}}<template v-if="index < details.genres.length - 1">, </template>
</template>
2022-02-18 11:05:10 +01:00
</div>
2023-10-27 21:22:23 +02:00
<div class="grid grid-cols-1">
2022-02-18 11:05:10 +01:00
<strong>Styles</strong>
<span v-for="(style, index) in details.styles">
{{style}}<template v-if="index < details.styles.length - 1">, </template>
</span>
2022-02-18 11:05:10 +01:00
</div>
2022-02-18 19:24:10 +01:00
</div>
2022-02-18 11:05:10 +01:00
<hr />
2023-10-27 21:22:23 +02:00
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<div class="grid grid-cols-2 md:grid-cols-1">
2022-02-18 11:05:10 +01:00
<strong>Pays</strong>
<span>{{details.country}}</span>
2022-02-18 19:24:10 +01:00
</div>
2023-10-27 21:22:23 +02:00
<div class="grid grid-cols-2 md:grid-cols-1">
2022-02-18 11:05:10 +01:00
<strong>Année</strong>
<span>{{details.year}}</span>
</div>
2023-10-27 21:22:23 +02:00
<div class="grid grid-cols-2 md:grid-cols-1">
2022-02-18 11:05:10 +01:00
<strong>Date de sortie</strong>
<span>{{details.released}}</span>
</div>
</div>
<hr />
2023-10-27 21:22:23 +02:00
<div class="grid grid-cols-1 gap-10">
2022-02-18 11:05:10 +01:00
<div>
2023-10-27 21:22:23 +02:00
<strong>Format<template v-if="details?.formats?.length > 1">s</template></strong>
<ul class="ml-4">
<li v-for="(format) in details.formats">
{{format.name}}
<template v-if="format.text">
- <i>{{format.text}}</i>
</template>
<template v-if="format.descriptions && format.descriptions.length > 0">
(<span v-for="(description, index) in format.descriptions">
{{description}}<template v-if="index < format.descriptions.length - 1">, </template>
</span>)
</template>
</li>
</ul>
2022-02-18 11:05:10 +01:00
</div>
</div>
<hr />
2023-10-27 21:22:23 +02:00
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
2022-02-18 11:05:10 +01:00
<div>
2023-10-27 21:22:23 +02:00
<strong>Code<template v-if="details?.identifiers?.length > 1">s</template> barre<template v-if="details?.identifiers?.length > 1">s</template></strong>
<ol class="ml-4">
2022-02-18 11:05:10 +01:00
<li v-for="identifier in details.identifiers">
{{identifier.value}} ({{identifier.type}})
</li>
</ol>
</div>
<div>
2023-10-27 21:22:23 +02:00
<strong>Label<template v-if="details?.labels?.length > 1">s</template></strong>
<ol class="ml-4">
2022-02-18 11:05:10 +01:00
<li v-for="label in details.labels">
{{label.name}}
</li>
</ol>
2023-10-27 21:22:23 +02:00
<strong>Société<template v-if="details?.companies?.length > 1">s</template></strong>
<ol class="ml-4">
<li v-for="company in details.companies">
<strong>{{company.entity_type_name}}</strong>
2022-02-18 11:05:10 +01:00
{{company.name}}
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
2022-02-18 11:05:10 +01:00
<footer>
<% if ( user.mastodon && user.mastodon.publish ) { %>
<div class="field">
<label for="share">Partager sur le fédiverse</label>
<span>
<input type="checkbox" id="share" name="share" v-model="share">
</span>
</div>
<% } %>
<button :class="['button is-primary', submitting ? 'is-disabled' : '']" @click="add">Ajouter</button>
<button class="button" @click="toggleModal">Annuler</button>
2022-02-18 19:24:10 +01:00
</footer>
</div>
</div>
</main>
<script>
const canPublish = <%- (user.mastodon && user.mastodon.publish) || false %>;
2024-06-15 10:13:22 +02:00
const action = "<%- page.action %>";
</script>