David Frassi
46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
<ion-header class="ion-no-border">
|
|
<ion-toolbar class="bg-gradient">
|
|
<ion-buttons slot="start">
|
|
<ion-back-button defaultHref="/home" color="secondary"></ion-back-button>
|
|
</ion-buttons>
|
|
<ion-title class="outfit-font">Gestione Playlist</ion-title>
|
|
<ion-buttons slot="end">
|
|
<ion-button (click)="savePlaylist()" [disabled]="localSongs.length === 0">
|
|
<ion-icon slot="icon-only" name="save-outline"></ion-icon>
|
|
</ion-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="bg-gradient">
|
|
<div class="ion-padding">
|
|
<div class="header-info glass ion-margin-bottom" *ngIf="localSongs.length > 0">
|
|
<p>Trascina i canti per riordinarli. Una volta finito puoi salvare la playlist.</p>
|
|
</div>
|
|
|
|
<div cdkDropList class="song-list" (cdkDropListDropped)="drop($event)">
|
|
<div class="song-item glass ion-margin-bottom" *ngFor="let song of localSongs" cdkDrag>
|
|
<div class="drag-handle" cdkDragHandle>
|
|
<ion-icon name="reorder-two-outline"></ion-icon>
|
|
</div>
|
|
<div class="song-info">
|
|
<span class="canto-number">{{ song.id.startsWith('my_') ? getMySongNumber(song) : song.id_canti }}</span>
|
|
<span class="song-title">
|
|
<span *ngIf="getCommunitySongNumber(song)" style="color: var(--ion-color-secondary); font-weight: 600; margin-right: 6px;">{{ getCommunitySongNumber(song) }}</span>{{ song.titolo }}
|
|
</span>
|
|
</div>
|
|
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="localSongs.length === 0" class="empty-state ion-text-center">
|
|
<ion-icon name="musical-notes-outline" class="large-icon"></ion-icon>
|
|
<p>Nessun canto selezionato.</p>
|
|
<ion-button routerLink="/home" fill="outline" color="secondary" class="ion-margin-top">
|
|
Torna alla Home
|
|
</ion-button>
|
|
</div>
|
|
</div>
|
|
|
|
</ion-content>
|