mediamanager/MediaManager/Pages/Shows.cshtml

@page
@inject IAntiforgery _antiforgery
@using Microsoft.AspNetCore.Antiforgery
@using MediaManager.database
@using MediaManager.database.Tables
@model Shows
@{
	ViewData["Title"] = "Shows";
	Layout = "_LayoutNoContainer";
	var tokenSet = _antiforgery.GetAndStoreTokens(HttpContext);
}

<div class="text-center">
	<h1 class="display-5">
		Shows
		<a class="btn btn-lg btn-primary" href="/AddShow">Add</a>

	</h1>
	<table class="table table-striped table-hover">
		<thead>
		<tr>
			<th scope="col">Title</th>
			<th scope="col">Rating</th>
			<th scope="col">Rewatchability</th>
			<th scope="col">Watch count</th>
			<th scope="col">Last Watch</th>
			<th scope="col">Status</th>
			<th scope="col">Progress</th>
			<th scope="col">Comment</th>
			<th scope="col">Actions</th>
		</tr>
		</thead>
		<tbody>
		@foreach (var show in new Database.DbConn().Shows.Where(p => p.UserId == Model.AuthorizedUser.UserId).OrderBy(p => p.Title.ToLower())) {
			<tr id="show_@show.ShowId">
				<td>
					<b>@show.Title</b>
					<br/>
					<small>@show.Year</small>
				</td>
				<td class="td-progress">
					@if (show.Rating > 0) {
						<div class="progress">
							<div class="progress-bar progress-@(show.Rating)0" role="progressbar" style="width: @(show.Rating * 10)%">@(show.Rating)</div>
						</div>
					}
					else {
						<div class="progress">
							<div class="progress-bar progress-00" role="progressbar" style="width: 0"></div>
						</div>
					}
				</td>
				<td class="td-progress">
					@if (show.Rewatchability > 0) {
						<div class="progress">
							<div class="progress-bar progress-@(show.Rewatchability)0" role="progressbar" style="width: @(show.Rewatchability * 10)%">@(show.Rewatchability)</div>
						</div>
					}
					else {
						<div class="progress">
							<div class="progress-bar progress-00" role="progressbar" style="width: 0"></div>
						</div>
					}
				</td>
				<td class="td-progress">
					<div class="progress">
						<div class="progress-bar progress-@(Math.Min(show.WatchCount, 5) * 2)0" role="progressbar" style="width: @(Math.Min(show.WatchCount, 5) * 20)%">@(show.WatchCount)</div>
					</div>
				</td>
				<td>
					@if (show.LastSeen.Year > 2000) {
						@show.LastSeen.ToString("yyyy-MM-dd")
					}
					else {
						@Html.Raw("-")
					}
				</td>
				<td>
					@switch (show.WatchStatus) {
						case WatchStatus.Unwatched:
							<span class="badge text-bg-danger">Unwatched</span>
							break;
						case WatchStatus.FirstWatch:
							<span class="badge text-bg-warning">First Watch</span>
							break;
						case WatchStatus.Waiting:
							<span class="badge text-bg-secondary">Waiting</span>
							break;
						case WatchStatus.Finished:
							<span class="badge text-bg-success">Finished</span>
							break;
						case WatchStatus.Rewatch:
							<span class="badge text-bg-primary">Rewatch</span>
							break;
						default:
							throw new ArgumentOutOfRangeException();
					}
				</td>
				<td class="td-progress">
					<div class="progress position-relative">
						@{
							var progressf = 100d / show.TotalEpisodes * show.SeenEpisodes;
							var progress = (int)progressf;
						}
						<div class="progress-bar progress-@(progress - progress % 10)" role="progressbar" style="width: @progress%"></div>
						@if (progress >= 90) {
							<small class="justify-content-center d-flex position-absolute w-100" style="color: #fff">@show.SeenEpisodes / @show.TotalEpisodes</small>
						}
						else {
							<small class="justify-content-center d-flex position-absolute w-100">@show.SeenEpisodes / @show.TotalEpisodes</small>
						}
					</div>
				</td>
				<td>
					@show.Comment
				</td>
				<td>
					<div class="btn-group" role="group">
						@if (show.SeenEpisodes == show.TotalEpisodes && show.WatchStatus == WatchStatus.FirstWatch) {
							<button class="btn btn-sm btn-secondary" onclick="ajax_and_reload('/EditShow/@show.ShowId', 'waiting')">Waiting</button>
						}
						@if (show.SeenEpisodes == show.TotalEpisodes && (show.WatchStatus == WatchStatus.FirstWatch || show.WatchStatus == WatchStatus.Rewatch)) {
							<button class="btn btn-sm btn-success" onclick="ajax_and_reload('/EditShow/@show.ShowId', 'finish')">Finish</button>
						}
						@if (show.SeenEpisodes < show.TotalEpisodes && (show.WatchStatus == WatchStatus.Unwatched || show.WatchStatus == WatchStatus.FirstWatch || show.WatchStatus == WatchStatus.Rewatch)) {
							<button class="btn btn-sm btn-secondary" onclick="ajax_and_reload('/EditShow/@show.ShowId', 'autoinc')">W+1</button>
						}
						else if (show.WatchStatus == WatchStatus.Finished) {
							<button class="btn btn-sm btn-success" onclick="ajax_and_reload('/EditShow/@show.ShowId', 'rewatch')">Start rewatch</button>
						}
						else if (show.WatchStatus == WatchStatus.Waiting) {
							<button class="btn btn-sm btn-secondary" onclick="ajax_and_reload('/EditShow/@show.ShowId', 'autoinc')">New episode</button>
						}
						<a class="btn btn-sm btn-primary" href="/EditShow/@show.ShowId">Edit</a>
					</div>
				</td>
			</tr>
		}
		</tbody>
	</table>
</div>

<script>
	function ajax_and_reload(url, action, target, value) {		
		if (window.location.hash.length > 0){
			window.location.replace("#");
			if (typeof window.history.replaceState == 'function') {
				history.replaceState({}, '', window.location.href.slice(0, -1));
			}
		}
		$.ajax(url, {method: 'POST', data: {action: action, target: target, value: value, '__RequestVerificationToken' : '@tokenSet.RequestToken'}, success: function () { location.reload() }})
	}
</script>