canti primo tag

src/app/pages/playlist/playlist.page.ts

@@ -0,0 +1,180 @@
+import { Component, inject, computed } from '@angular/core';
+import { PlaylistService } from '../../services/playlist.service';
+import { CantiService } from '../../services/canti.service';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { AlertController, ToastController, ModalController } from '@ionic/angular';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-playlist',
+  templateUrl: './playlist.page.html',
+  styleUrls: ['./playlist.page.scss'],
+  standalone: false
+})
+export class PlaylistPage {
+  public playlistService = inject(PlaylistService);
+  public cantiService = inject(CantiService);
+  private alertCtrl = inject(AlertController);
+  private toastCtrl = inject(ToastController);
+  private router = inject(Router);
+
+  public selectedSongs = computed(() => {
+    const ids = Array.from(this.playlistService.selectedIds());
+    return ids.map(id => this.cantiService.canti().find(c => c.id === id)).filter(c => !!c);
+  });
+
+  public localSongs: any[] = [];
+  public qrCodeImage: string | null = null;
+  public savedPlaylistName: string | null = null;
+
+  constructor() {
+    // Initial copy to allow local reordering
+    this.localSongs = [...this.selectedSongs()];
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.localSongs, event.previousIndex, event.currentIndex);
+  }
+
+  async savePlaylist() {
+    const alert = await this.alertCtrl.create({
+      header: 'Salva Playlist',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: 'Nome della playlist',
+          value: this.savedPlaylistName || ''
+        }
+      ],
+      buttons: [
+        {
+          text: 'Annulla',
+          role: 'cancel'
+        },
+        {
+          text: 'Salva',
+          handler: (data) => {
+            if (data.name) {
+              this.savedPlaylistName = data.name;
+              this.playlistService.savePlaylist(data.name, this.localSongs.map(s => s.id));
+              this.showToast('Playlist salvata!');
+              this.router.navigate(['/settings']);
+              return true;
+            }
+            return false;
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+
+  async saveAndExport() {
+    const alert = await this.alertCtrl.create({
+      header: 'Salva ed Esporta QR',
+      message: 'Inserisci un nome per la playlist. Verrà salvata e generato il QR Code.',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: 'Nome della playlist',
+          value: this.savedPlaylistName || ''
+        }
+      ],
+      buttons: [
+        {
+          text: 'Annulla',
+          role: 'cancel'
+        },
+        {
+          text: 'Salva ed Esporta',
+          handler: async (data) => {
+            if (data.name) {
+              this.savedPlaylistName = data.name;
+              const ids = this.localSongs.map(s => s.id);
+              await this.playlistService.savePlaylist(data.name, ids);
+              this.qrCodeImage = await this.playlistService.generateQR(ids, data.name);
+              this.showToast('Playlist salvata!');
+              return true;
+            }
+            return false;
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+
+  async sharePlaylist() {
+    if (this.localSongs.length === 0) return;
+    
+    const ids = this.localSongs.map(s => s.id);
+    const name = this.savedPlaylistName || 'Playlist Condivisa';
+    this.qrCodeImage = await this.playlistService.generateQR(ids, name);
+  }
+
+  downloadQR() {
+    if (!this.qrCodeImage) return;
+    
+    const name = this.savedPlaylistName || 'playlist';
+    const fileName = `${name.toLowerCase().replace(/\s+/g, '_')}_qr.png`;
+    
+    const link = document.createElement('a');
+    link.href = this.qrCodeImage;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    this.showToast('Immagine scaricata!');
+  }
+
+  async shareQR() {
+    if (!this.qrCodeImage) return;
+    const name = this.savedPlaylistName || 'playlist';
+    const shareLink = this.playlistService.getShareLink(this.localSongs.map(s => s.id), name);
+    const fileName = `${name.toLowerCase().replace(/\s+/g, '_')}_qr.png`;
+
+    try {
+      // Convert base64 to blob/file for sharing
+      const res = await fetch(this.qrCodeImage);
+      const blob = await res.blob();
+      const file = new File([blob], fileName, { type: 'image/png' });
+      
+      if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
+        await navigator.share({
+          files: [file],
+          title: 'Playlist CantiCristiani',
+          text: `Ecco la playlist: ${name}\n\nClicca qui per aprirla subito: ${shareLink}`
+        });
+      } else {
+        // Fallback to simple share text or download
+        if (navigator.share) {
+          await navigator.share({
+            title: 'Playlist CantiCristiani',
+            text: `Ecco la playlist: ${name}\n\nClicca qui per aprirla: ${shareLink}`
+          });
+        } else {
+          this.downloadQR();
+        }
+      }
+    } catch (err) {
+      console.error('Share failed', err);
+      this.downloadQR();
+    }
+  }
+
+  closeQR() {
+    this.qrCodeImage = null;
+  }
+
+  async showToast(message: string) {
+    const toast = await this.toastCtrl.create({
+      message,
+      duration: 2000,
+      color: 'success'
+    });
+    await toast.present();
+  }
+}