Skip to content
Snippets Groups Projects
Verified Commit 215357b4 authored by Miniontoby's avatar Miniontoby :writing_hand_tone1:
Browse files

Modified routes and made playlist song list working

parent 6ce8f438
No related branches found
No related tags found
No related merge requests found
......@@ -116,7 +116,7 @@ export async function edit(id: number, name: string, date: Date, songs: string[]
name,
date: date.toISOString(),
songs: {
connect: songs
set: songs
},
}
})
......
......@@ -71,7 +71,6 @@ export async function findByName(name: string) {
name: true,
lyrics: true,
sheets: true,
// team: true,
}
})
}
......
......@@ -14,7 +14,7 @@
/** @type {import('./$types').PageData} */
export let data;
$: playlist = data.playlist;
$: songs = new Array(...data.songs).filter(i => !playlist.songs.includes(i.id));
let songs = new Array(...data.songs);
/** @type {import('./$types').ActionData} */
$: form = $page.form;
......@@ -39,19 +39,20 @@
function handleDndFinalizePlaylist(e) {
playlist.songs = e.detail.items;
}
</script>
<div transition:slide>
<h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white mb-6">Edit {$_('page.playlists.info.title')}</h1>
{#if !working && form?.success}
<div class="mt-4" transition:slide>
<Success message={$_('messages.successfully.updated')} />
<Success message={$_('messages.successfully.edited')} />
</div>
{/if}
{#if !working && form?.success === false}
<div class="mt-4" transition:slide>
<Error message={$_('messages.not_successfully.updated')} />
<Error message={$_('messages.not_successfully.edited')} />
</div>
{/if}
......@@ -92,16 +93,16 @@
<h1>Adding and removing songs</h1>
<h2>To add a song, drag one from the left container to the right</h2>
<div class="flex">
<ol class="dropbox grey" use:dndzone="{{ items: songs }}" on:consider="{handleDndConsiderSongs}" on:finalize="{handleDndFinalizeSongs}">
{#each songs as song(song.id)}
<li>{song.name}</li>
<ul class="dropbox grey list-inside list-disc" use:dndzone="{{ items: songs.filter(i => playlist?.songs && !playlist.songs.find(ps=>ps.id===i.id)) }}" on:consider="{handleDndConsiderSongs}" on:finalize="{handleDndFinalizeSongs}">
{#each songs.filter(i => playlist?.songs && !playlist.songs.find(ps=>ps.id===i.id)) as song(song.id)}
<li>#{song.id} - {song.name}</li>
{/each}
</ol>
<ol class="dropbox green" use:dndzone="{{ items: playlist?.songs }}" on:consider="{handleDndConsiderPlaylist}" on:finalize="{handleDndFinalizePlaylist}">
{#each playlist?.songs as song(song.id)}
<li><a href={"/songs/" + song.id}>{song.name}</a></li>
</ul>
<ul class="dropbox green list-inside list-disc" use:dndzone="{{ items: playlist?.songs ?? [] }}" on:consider="{handleDndConsiderPlaylist}" on:finalize="{handleDndFinalizePlaylist}">
{#each playlist?.songs ?? [] as song(song.id)}
<li>#{song.id} - {song.name}</li>
{/each}
</ol>
</ul>
</div>
<input id="songs" name="songs" type="text" hidden bind:value={songsString} />
......
......@@ -17,11 +17,16 @@
</script>
<div transition:slide>
<h1 class="text-3xl font-bold">{$_('page.playlists.list.title')}</h1>
<p>{$_('page.playlists.list.description')}</p>
{#if authUser.roleId <= Roles.Leader}
<button class="text-white bg-green-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-2.5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" on:click={() => goto($page.url.pathname + '/create', { replaceState: false })}>Create Playlist</button>
{/if}
{#each playlists as playlist}
<li><a href={$page.url.pathname + '/' + playlist.id}>{playlist.date.toLocaleDateString()} - {playlist.name}</a></li>
{/each}
<p>{$_('page.playlists.list.description')}</p>
<ul class="list-inside list-disc">
{#each playlists as playlist}
<li><a href={$page.url.pathname + '/' + playlist.id}>[{playlist.team.name}] {playlist.date.toLocaleDateString()} - {playlist.name}</a></li>
{/each}
{#if playlists.length === 0}
<i>No Playlists</i>
{/if}
</ul>
</div>
<script>
import { getContext } from 'svelte';
import Roles from '$lib/roles';
import { goto } from '$app/navigation';
import { slide } from 'svelte/transition';
import { _ } from 'svelte-i18n';
import { getContext } from 'svelte';
/** @type {import('./$types').PageData} */
export let data;
$: authUser = data.authUser;
$: playlist = data.playlist;
/** @type {import('svelte/store').Writable<string>} */
......@@ -12,11 +16,19 @@
</script>
<div transition:slide>
<h1 class="text-3xl font-bold">{$_('page.playlists.info.title')}</h1>
<hr />
<h2 class="text-2xl font-bold">{$_('page.songs.list.title')}</h2>
<ol>
{#if (authUser.roleId <= Roles.Leader)}
<button class="text-white bg-green-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-2.5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" on:click={() => goto(location?.pathname + '/edit', { replaceState: false })}>Edit</button>
{/if}
<p><strong>Name:</strong> {playlist.name}</p>
<p><strong>Date:</strong> {playlist.date}</p>
<br><hr /><br>
<h2 class="text-2xl font-bold">{$_('page.songs.list.title')}:</h2>
<ul class="list-inside list-disc">
{#each playlist?.songs as song}
<li><a href={"/songs/" + song.id}>{song.name}</a></li>
{/each}
</ol>
{#if playlist?.songs.length === 0}
<i>No songs</i>
{/if}
</ul>
</div>
import * as Song from '$lib/server/models/Song';
import * as User from '$lib/server/models/User';
// import * as User from '$lib/server/models/User';
/** @type {import('./$types').PageServerLoad} */
export async function load({ parent }) {
const data = await parent();
// const user = await User.findById(data.authUser.id);
/** @type {any} */
let songs = [];
const user = await User.findById(data.authUser.id);
songs = await Song.getAll();
// let songs = [];
const songs = await Song.getAll();
//for (const team of user.teams) {
// const tsongs = await Song.getAllByTeam(team.id);
// songs = [...songs, ...tsongs];
......
<script>
import Roles from '$lib/roles';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { getContext } from 'svelte';
import { slide } from 'svelte/transition';
import { _ } from 'svelte-i18n';
import { getContext } from 'svelte';
/** @type {import('./$types').PageData} */
export let data;
$: authUser = data.authUser;
$: songs = data.songs;
/** @type {import('svelte/store').Writable<string>} */
......@@ -14,9 +18,15 @@
<div transition:slide>
<h1 class="text-3xl font-bold">{$_('page.songs.list.title')}</h1>
<p>{$_('page.songs.list.description')}</p>
<ol>
{#if (authUser.roleId <= Roles.Leader)}
<button class="text-white bg-green-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-2.5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" on:click={() => goto(location?.pathname + '/create', { replaceState: false })}>Create</button>
{/if}
<ul class="list-inside list-disc">
{#each songs as song}
<li><a href={$page.url.pathname + "/" + song.id}>{song.name}</a></li>
{/each}
</ol>
{#if songs.length === 0}
<i>No songs</i>
{/if}
</ul>
</div>
<script>
import Roles from '$lib/roles';
import { goto } from '$app/navigation';
import { slide } from 'svelte/transition';
import { _ } from 'svelte-i18n';
......@@ -7,6 +9,7 @@
/** @type {import('./$types').PageData} */
export let data;
$: authUser = data.authUser;
$: song = data.song;
$: songObject = song && new Song(song.lyrics, song.id);
......@@ -15,11 +18,11 @@
</script>
<div transition:slide>
<h1 class="text-2xl font-bold">{$_('page.songs.info.title')}</h1>
{#if data.authUser}
{#if (authUser.roleId <= Roles.Leader)}
<button class="text-white bg-green-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-2.5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" on:click={() => goto(location?.pathname + '/edit', { replaceState: false })}>Edit</button>
{/if}
<p><strong>Name:</strong> {song.name}</p>
<br>
<br><hr /><br>
<h3 class="text-xl font-bold">Lyrics:</h3>
<div class="song_container">
{#each songObject.couplets as couplet, i}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment