feat: implement song submission support, refs #5

song_of_the_day/Pages/Shared/SongPartialModel.cs

@@ -0,0 +1,16 @@
+public class SongPartialModel
+{
+    public Song InnerSong { get; set; }
+
+    public string? Artist => InnerSong.Artist;
+
+    public string? Name => InnerSong.Name;
+
+    public string? SpotifyId => InnerSong.SpotifyId;
+
+    public string? Url => InnerSong.Url;
+
+    public SongProvider? Provider => InnerSong.Provider;
+
+    public bool IsPageReadonly { get; set; }
+}

song_of_the_day/Pages/Shared/_Layout.cshtml

@@ -48,7 +48,7 @@
                             this.User.Identity.IsAuthenticated && DoesUserHaveClaimedPhoneNumber())
                         {
                             <li class="nav-item">
-                                <a class="nav-link text-dark" asp-area="" asp-page="/SubmitSongs">Submit Songs</a>
+                                <a class="nav-link text-dark" href="/SongSubmission/">Song Submissions</a>
                             </li>
                         }
                     </ul>

song_of_the_day/Pages/Shared/_Layout.cshtml.css

@@ -45,4 +45,4 @@ button.accept-policy {
   width: 100%;
   white-space: nowrap;
   line-height: 60px;
-}
+}

song_of_the_day/Pages/Shared/_SongPartial.cshtml

@@ -1,7 +1,8 @@
-@model Song
+@model SongPartialModel
 <label asp-for="Name">Name:</label>
-<input asp-for="Name" />
+<input asp-for="Name" oninput="UpdateSongSuggestions()" disabled="@Model.IsPageReadonly" />
 <label asp-for="Artist">Artist:</label>
-<input asp-for="Artist" />
+<input asp-for="Artist" oninput="UpdateSongSuggestions()" disabled="@Model.IsPageReadonly" />
 <label asp-for="SpotifyId">Spotify ID:</label>
-<input asp-for="SpotifyId" />
+<input asp-for="SpotifyId" readonly="@Model.Provider.Equals(SongProvider.Spotify)" disabled="@Model.IsPageReadonly" />
+<input asp-for="Provider" hidden />

song_of_the_day/Pages/Shared/_SpotifySongSuggestionsPartial.cshtml

@@ -0,0 +1,38 @@
+@model List<SpotifyAPI.Web.FullTrack>
+<div class="spotifySongSelector">
+    @foreach(var track in Model)
+    {
+        <div class="songSelectorButton" onclick="clickHandler(this)">
+            <div class="songName">@track.Name</div>
+            <div class="artist">@track.Artists[0].Name</div>
+            <div class="album">@track.Album.Name</div>
+            <div class="id" hidden>@track.Id</div>
+            <div class="albumCover">
+                <img src="@track.Album.Images[0].Url" width="50px" height="50px"/>
+            </div>
+        </div>
+    }
+</div>
+
+<script>
+    function clickHandler(t) {
+        // remove previous selection
+        $('.songSelectorButton').removeClass("selected");
+        t.classList.add("selected");
+        var idElement = t.getElementsByClassName("id")[0]
+        console.log(idElement);
+        SetSpotifyId(idElement.textContent);
+    }
+
+    function initializeSelection() {
+        var currentSpotifyId = GetSpotifyId();
+        $('.songSelectorButton').each(function(i, e) {
+            if(e.getElementsByClassName("id")[0].textContent == currentSpotifyId)
+            {
+                e.classList.add("selected");
+            }
+        });
+    }
+
+    initializeSelection();
+</script>

song_of_the_day/Pages/Shared/_SpotifySongSuggestionsPartial.cshtml.css

@@ -0,0 +1,16 @@
+.songSelectorButton {
+  background-color: #e3e6e7;
+  padding: 5px;
+}
+
+.songSelectorButton:nth-child(2n) {
+  background-color: #cacbce;
+}
+
+.songSelectorButton.selected {
+  background-color: #a0c3e5;
+  border-radius: 2px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: #285786;
+}