song-of-the-day/song_of_the_day/Pages/SongSubmission.cshtml

@page "{submissionIndex:int?}"
@model SongSubmissionModel
@{
    ViewData["Title"] = this.Model.SubmissionIndex == null ? "Song Submissions" : "New Song Submission";
}

@if(Model.SubmissionIndex == null)
{
    <div class="text-left">
        <h1>Your Submission History:</h1>
        <table id="submissionTable">
            <tr>
                <th>Date</th>
                <th>Suggestion</th>
                <th>Song</th>
                <th></th>
            </tr>
            @foreach(var submission in Model.UserSongSubmissions)
            {
                <tr>
                    <td class="submissionDate">
                        @submission.Date.ToString("dd. MM. yyyy")
                    </td>
                    <td class="submissionSuggestion">
                        @if(submission.Song == null || submission.HasUsedSuggestion)
                        {
                            @submission.SuggestionHelper.Title
                        }
                    </td>
                    <td class="submissionSong">
                        @if(submission.Song != null)
                        {
                            @string.Format("{0} - {1}", submission.Song.Name, submission.Song.Artist);
                        }
                        else
                        {
                            <div style="font-style: italic;">No submission yet!</div>
                        }
                    </td>
                    <td class="=viewLink">
                        @{
                            var buttonClass = submission.Song == null ? "submitButton" : "viewButton";
                            var buttonText = submission.Song == null ? "Submit Song" : "View";
                        }
                        <button class=@buttonClass onclick="redirectTo(@submission.Id)">@buttonText</button>
                    </td>
                </tr>
            }
        </table>
    </div>
}
else
{
    <div class="text-left">
        <div class="suggestionHelper">
            <div class="title">Today's suggestionHelper is: <b>@Model.SuggestionHelper.Title</b></div>
            <div class="description" style="font-style: italic;">@Model.SuggestionHelper.Description</div>
        </div>
        <form method="post">
            <label asp-for="SubmitUrl" >Song Url:</label>
            <input asp-for="SubmitUrl" oninput="Update(this)"  disabled="@Model.IsPageReadonly" />
            <label asp-for="HasUsedSuggestion">Submission has used suggestion.</label>
            <input asp-for="HasUsedSuggestion" checked  disabled="@Model.IsPageReadonly" />
            @{
                var songPartialModel = new SongPartialModel() {
                    InnerSong = Model.SongData,
                    IsPageReadonly = Model.IsPageReadonly
                };
            }
            <div id="songdata">
                <partial name="_SongPartial" model="@songPartialModel" />
            </div>
            @if(!Model.IsPageReadonly)
            {
                <div id="suggestionPicker">
                    <partial name="_SpotifySongSuggestionsPartial" model="@Model.SpotifySuggestions" />
                </div>
            }
            <input type="submit" id="songsubmit" title="Submit" value="Submit" disabled="@Model.CanSubmit" />
        </form>
    </div>
}


@if(Model.SubmissionIndex == null)
{
    // inject relevant scripts
    <script>
        function redirectTo(id) {
            window.location.href = '/SongSubmission/' + id;
        }
    </script>
}
else
{
    <script>
        var skipUpdate = false;

        function ReevaluateSubmit(callback) {
            var canSubmit = $('#songdata #Name').val().length > 0 && $('#songdata #Artist').val().length > 0;
            if(canSubmit)
            {
                $('#songsubmit').removeAttr("disabled");
            }
            else
            {
                $('#songsubmit').attr("disabled", "disabled");
            }
            if(callback)
            {
                callback();
            }
        }

        function Update(t) {
            var songDataUrl = '?handler=Update&&SubmitUrl=' + $(t).val();
            $('#songdata').load(songDataUrl, null, function() {
                ReevaluateSubmit(function() {
                    UpdateSongSuggestions(t);
                });
            });
        }

        function UpdateSongSuggestions() {
            if(skipUpdate)
            {
                return;
            }  
            skipUpdate = true;
            var trackName = $('#songdata #Name').val();
            var artistName = $('#songdata #Artist').val();
            var submitUrl = $('#SubmitUrl').val();
            var provider = $('#songdata #Provider').val();
            var spotifyId = $('#songdata #SpotifyId').val();
            var suggestionDataUrl = '?handler=SpotifySuggestions&song=' + encodeURIComponent(trackName) 
                + '&artist=' + encodeURIComponent(artistName)
                + '&submitUrl=' + encodeURI(submitUrl)
                + '&provider=' + encodeURI(provider)
                + '&spotifyId=' + encodeURI(spotifyId);
            $('#suggestionPicker').load(suggestionDataUrl, null, function() {
                ReevaluateSubmit();
                skipUpdate = false;
            });
        }

        function SetSpotifyId(id) {
            $('#SpotifyId').val(id);
            ReevaluateSubmit();
        }

        function GetSpotifyId() {
            return $('#SpotifyId').val();
        }

        document.getElementById('songdata').oninput = ReevaluateSubmit;
        ReevaluateSubmit();
    </script>
}