drag and drop fini

ProjetBlazor/Components/DragAndDrop.razor

@@ -0,0 +1,15 @@
+<h3>DragAndDrop</h3>
+
+<CascadingValue Value="@this">
+    <div class="container">
+        <div>
+            @foreach (var musique in ListMusique)
+            {
+                <MusiqueComponent musique=@musique NoDrop=true/>
+            }
+        </div>
+        <div>
+            <MusiqueRecipe musique=null/>
+        </div>
+    </div>
+</CascadingValue>

ProjetBlazor/Components/DragAndDrop.razor.cs

@@ -0,0 +1,20 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using ProjetBlazor.Modeles;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+
+namespace ProjetBlazor.Components
+{
+    public partial class DragAndDrop
+    {
+        [Parameter]
+        public Musique Recipe { get; set; }
+
+        public Musique CurrentDragMusique { get; set; }
+
+        [Parameter]
+        public List<Musique> ListMusique { get; set; }
+
+    }
+}

ProjetBlazor/Components/MusiqueComponent.razor

@@ -0,0 +1,13 @@
+<div class="item"
+      ondragover="event.preventDefault();"
+      draggable="true"
+      @ondragstart="@OnDragStart"
+      @ondrop="@OnDrop"
+      @ondragenter="@OnDragEnter"
+      @ondragleave="@OnDragLeave">
+
+    @if (musique != null)
+    {
+        @musique.titre
+    }
+</div>

ProjetBlazor/Components/MusiqueComponent.razor.cs

@@ -0,0 +1,49 @@
+using Blazorise;
+using Microsoft.AspNetCore.Components;
+using ProjetBlazor.Modeles;
+
+namespace ProjetBlazor.Components
+{
+    public partial class MusiqueComponent
+    {
+        [Parameter]
+        public Musique musique { get; set; }
+
+        [Parameter]
+        public bool NoDrop { get; set; }
+
+        [CascadingParameter]
+        public DragAndDrop Parent { get; set; }
+
+        internal void OnDragEnter()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+        }
+
+        internal void OnDragLeave()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+        }
+
+        internal void OnDrop()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            this.musique = Parent.CurrentDragMusique;
+        }
+
+        private void OnDragStart()
+        {
+            Parent.CurrentDragMusique = this.musique;
+        }
+    }
+}

ProjetBlazor/Components/MusiqueComponent.razor.css

@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}

ProjetBlazor/Components/MusiqueRecipe.razor

@@ -0,0 +1,25 @@
+<div class="item"
+     ondragover="event.preventDefault();"
+     draggable="true"
+     @ondragstart="@OnDragStart"
+     @ondrop="@OnDrop"
+     @ondragenter="@OnDragEnter"
+     @ondragleave="@OnDragLeave">
+
+    @if (musique != null)
+    {
+        @musique.titre
+    }
+</div>
+
+    @if (@musique == null)
+    {
+        <h2>Aucune chanson sélectionner !</h2>
+        <audio src="song/wtd.mp3" controls></audio>
+    } else
+    {
+        <h2>@musique.titre</h2>
+        <audio src="song/@(musique.songName)" controls></audio>
+    }
+
+<button type="button" class="btn btn-primary" @onclick="() => Reset()"><i class="fa fa-trash"></i> Reset musique</button>

ProjetBlazor/Components/MusiqueRecipe.razor.cs

@@ -0,0 +1,43 @@
+using Microsoft.AspNetCore.Components;
+using ProjetBlazor.Modeles;
+
+namespace ProjetBlazor.Components
+{
+    public partial class MusiqueRecipe
+    {
+        [Parameter]
+        public Musique musique { get; set; }
+
+        [CascadingParameter]
+        public DragAndDrop Parent { get; set; }
+
+
+        internal void OnDragEnter()
+        {
+            
+        }
+
+        internal void OnDragLeave()
+        {
+
+        }
+
+        internal void OnDrop()
+        {
+
+            this.musique = Parent.CurrentDragMusique;
+
+
+        }
+
+        private void OnDragStart()
+        {
+            Parent.CurrentDragMusique = this.musique;
+        }
+
+        private void Reset()
+        {
+            this.musique = null;
+        }
+    }
+}

ProjetBlazor/Components/MusiqueRecipe.razor.css

@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}

ProjetBlazor/Pages/Edit.razor.cs

@@ -32,6 +32,17 @@ namespace ProjetBlazor.Pages
         {
             await DataService.Update(musiqueModele);
 
+            if ( musiqueModele.song != null)
+            {
+                string fileName = @$"{Environment.CurrentDirectory}/wwwroot/song/" + musiqueModele.songName;
+
+                using (FileStream fs = File.Create(fileName))
+                {
+                    byte[] info = musiqueModele.song;
+                    fs.Write(info, 0, info.Length);
+                }
+            }           
+
             NavigationManager.NavigateTo("");
         }
 

ProjetBlazor/Pages/Play.razor

@@ -3,16 +3,19 @@
 
 
 <h3>Play</h3>
-
+<!--
 <figure>
     <figcaption>Rick :</figcaption>
     <audio
         controls
-        src="https://localhost:7234/musiques/rick.mp3">
-            <a href="https://localhost:7234/musiques/rick.mp3">
+           src="https://localhost:7234/song/rick.mp3">
+        <a href="https://localhost:7234/song/rick.mp3">
                 Audio
             </a>
     </audio>
-</figure>
+</figure>-->
 
 <h1>Scoped CSS Example</h1>
+
+
+<ProjetBlazor.Components.DragAndDrop ListMusique=@listeMusique Recipe=null/>

ProjetBlazor/Pages/Play.razor.cs

@@ -17,7 +17,7 @@ namespace ProjetBlazor.Pages
         [Inject]
         public IStringLocalizer<MusiquesListe> Localizer { get; set; }
 
-
+        /*
         private async Task OnReadData(DataGridReadDataEventArgs<Musique> e)
         {
             if (e.CancellationToken.IsCancellationRequested)
@@ -28,7 +28,7 @@ namespace ProjetBlazor.Pages
             {
                 listeMusique = await DataService.ListAll();
             }
-        }
+        }*/
 
 
         protected override async Task OnInitializedAsync()

ProjetBlazor/ProjetBlazor.csproj

@@ -18,8 +18,13 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="Components\" />
     <Folder Include="wwwroot\song\" />
   </ItemGroup>
+
+  <ItemGroup>
+    <Content Update="wwwroot\song\wtd.mp3">
+      <CopyToOutputDirectory>Never</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
   
 </Project>