From 034213fccc6e6db69f7053bc9ac137a8b2372bc3 Mon Sep 17 00:00:00 2001
From: "Timothy J. Warren" <tim@timshomepage.net>
Date: Thu, 20 Sep 2018 10:41:28 -0400
Subject: [PATCH] Progress with simultaneous updates to Anilist for Anime

---
 app/appConf/routes.php                        |  8 +++
 app/bootstrap.php                             |  2 +-
 app/views/anime/edit.php                      |  8 ++-
 app/views/collection/cover.php                |  3 +-
 app/views/collection/list.php                 |  3 +-
 app/views/main-menu.php                       | 36 +++++-----
 public/js/scripts-authed.min.js               | 35 +++++-----
 public/js/scripts-authed.min.js.map           |  2 +-
 public/js/scripts.min.js                      | 19 +++---
 public/js/scripts.min.js.map                  |  2 +-
 public/js/src/anime.js                        |  2 +-
 public/tools/build-js.js                      |  2 +-
 src/API/Anilist/AnilistTrait.php              | 54 +++++++++++++++
 .../Mutations/CreateMediaListEntry.graphql    |  9 +++
 .../Mutations/DeleteMediaListEntry.graphql    |  7 ++
 .../Mutations/IncrementMediaListEntry.graphql | 12 ++++
 .../Mutations/UpdateAnimeListEntry.graphql    | 15 -----
 .../Mutations/UpdateMediaListEntry.graphql    | 27 ++++++++
 .../GraphQL/Queries/AnimeIdByMalId.graphql    |  5 --
 .../GraphQL/Queries/ListItemIdByMalId.graphql |  9 +++
 .../GraphQL/Queries/MediaIdByMalId.graphql    |  7 ++
 .../GraphQL/Queries/MediaListItem.graphql     | 14 ++++
 src/API/Anilist/ListItem.php                  | 55 ++++++++++++----
 src/API/Anilist/Model.php                     | 66 +++++++++++++++----
 .../Transformer/AnimeListTransformer.php      |  8 ++-
 src/API/Kitsu/ListItem.php                    |  5 ++
 src/API/Kitsu/Model.php                       | 11 ++++
 .../Transformer/AnimeListTransformer.php      |  2 +-
 src/API/ListItemInterface.php                 |  9 +++
 src/Controller.php                            |  4 +-
 src/Controller/Anime.php                      | 30 +++++++--
 src/MenuGenerator.php                         |  6 +-
 src/Model/Anime.php                           | 58 +++++++++++++++-
 src/Types/AnimeListItem.php                   |  5 +-
 src/Types/Config.php                          |  2 +
 src/Types/FormItem.php                        |  1 +
 36 files changed, 428 insertions(+), 115 deletions(-)
 create mode 100644 src/API/Anilist/GraphQL/Mutations/CreateMediaListEntry.graphql
 create mode 100644 src/API/Anilist/GraphQL/Mutations/DeleteMediaListEntry.graphql
 create mode 100644 src/API/Anilist/GraphQL/Mutations/IncrementMediaListEntry.graphql
 delete mode 100644 src/API/Anilist/GraphQL/Mutations/UpdateAnimeListEntry.graphql
 create mode 100644 src/API/Anilist/GraphQL/Mutations/UpdateMediaListEntry.graphql
 delete mode 100644 src/API/Anilist/GraphQL/Queries/AnimeIdByMalId.graphql
 create mode 100644 src/API/Anilist/GraphQL/Queries/ListItemIdByMalId.graphql
 create mode 100644 src/API/Anilist/GraphQL/Queries/MediaIdByMalId.graphql
 create mode 100644 src/API/Anilist/GraphQL/Queries/MediaListItem.graphql

diff --git a/app/appConf/routes.php b/app/appConf/routes.php
index db05b416..067bbce7 100644
--- a/app/appConf/routes.php
+++ b/app/appConf/routes.php
@@ -238,6 +238,14 @@ return [
 		'action' => 'logout',
 		'controller' => DEFAULT_CONTROLLER,
 	],
+	'increment' => [
+		'path' => '/{controller}/increment',
+		'action' => 'increment',
+		'verb' => 'post',
+		'tokens' => [
+			'controller' => '[a-z_]+',
+		],
+	],
 	'update' => [
 		'path' => '/{controller}/update',
 		'action' => 'update',
diff --git a/app/bootstrap.php b/app/bootstrap.php
index 1c1c224b..d949fc3d 100644
--- a/app/bootstrap.php
+++ b/app/bootstrap.php
@@ -35,7 +35,7 @@ use Zend\Diactoros\{Response, ServerRequestFactory};
 // -----------------------------------------------------------------------------
 // Setup DI container
 // -----------------------------------------------------------------------------
-return function (array $configArray = []) {
+return function ($configArray = []) {
 	$container = new Container();
 
 	// -------------------------------------------------------------------------
diff --git a/app/views/anime/edit.php b/app/views/anime/edit.php
index 8dcd62b2..12f367e5 100644
--- a/app/views/anime/edit.php
+++ b/app/views/anime/edit.php
@@ -79,7 +79,9 @@
 						<td>&nbsp;</td>
 						<td>
 							<input type="hidden" value="<?= $item['id'] ?>" name="id" />
-							<input type="hidden" value="<?= $item['mal_id'] ?>" name="mal_id" />
+							<?php if ( ! empty($item['mal_id'])): ?>
+							<input type="hidden" value="<?= $item['mal_id'] ?? '' ?>" name="mal_id" />
+							<?php endif ?>
 							<input type="hidden" value="true" name="edit" />
 							<button type="submit">Submit</button>
 						</td>
@@ -100,7 +102,9 @@
 							</td>
 							<td>
 								<input type="hidden" value="<?= $item['id'] ?>" name="id" />
-								<input type="hidden" value="<?= $item['mal_id'] ?>" name="mal_id" />
+								<?php if (!empty($item['mal_id'])): ?>
+									<input type="hidden" value="<?= $item['mal_id'] ?? '' ?>" name="mal_id" />
+								<?php endif ?>
 								<button type="submit" class="danger">Delete Entry</button>
 							</td>
 						</tr>
diff --git a/app/views/collection/cover.php b/app/views/collection/cover.php
index 7441f79b..429754ab 100644
--- a/app/views/collection/cover.php
+++ b/app/views/collection/cover.php
@@ -9,9 +9,8 @@
 	<?php $i = 0; ?>
 	<?php foreach ($sections as $name => $items): ?>
 		<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" id="collection-tab-<?= $i ?>" name="collection-tabs" />
-		<label for="collection-tab-<?= $i ?>"><?= $name ?></label>
+		<label for="collection-tab-<?= $i ?>"><h2><?= $name ?></h2></label>
 		<div class="content">
-			<h2><?= $name ?></h2>
 			<section class="media-wrap">
 				<?php foreach ($items as $item): ?>
 					<?php include __DIR__ . '/cover-item.php'; ?>
diff --git a/app/views/collection/list.php b/app/views/collection/list.php
index e0a1ab9a..3f87b152 100644
--- a/app/views/collection/list.php
+++ b/app/views/collection/list.php
@@ -10,9 +10,8 @@
 			<?php foreach ($sections as $name => $items): ?>
 				<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" id="collection-tab-<?= $i ?>"
 																  name="collection-tabs"/>
-				<label for="collection-tab-<?= $i ?>"><?= $name ?></label>
+				<label for="collection-tab-<?= $i ?>"><h2><?= $name ?></h2></label>
 				<div class="content">
-					<h2><?= $name ?></h2>
 					<table>
 						<thead>
 						<tr>
diff --git a/app/views/main-menu.php b/app/views/main-menu.php
index 647076f0..efc03916 100644
--- a/app/views/main-menu.php
+++ b/app/views/main-menu.php
@@ -43,6 +43,11 @@ $hasManga = stripos($_SERVER['REQUEST_URI'], 'manga') !== FALSE;
 			[<?= $helper->a($urlGenerator->defaultUrl('anime') . $extraSegment, 'Anime List') ?>]
 			[<?= $helper->a($urlGenerator->defaultUrl('manga') . $extraSegment, 'Manga List') ?>]
 		<?php endif ?>
+		<?php if ($auth->isAuthenticated()): ?>
+			<span class="flex-no-wrap small-font">
+			<button type="button" class="js-clear-cache user-btn">Clear API Cache</button>
+		</span>
+		<?php endif ?>
 	</span>
 
 	<span class="flex-no-wrap small-font">[<?= $helper->a(
@@ -51,24 +56,25 @@ $hasManga = stripos($_SERVER['REQUEST_URI'], 'manga') !== FALSE;
 	) ?>]</span>
 
 	<?php if ($auth->isAuthenticated()): ?>
-		<span class="flex-no-wrap">&nbsp;</span>
 		<span class="flex-no-wrap small-font">
-			<button type="button" class="js-clear-cache user-btn">Clear API Cache</button>
+		<?= $helper->a(
+			$url->generate('settings'),
+			'Settings',
+			['class' => 'bracketed']
+		) ?>
+		</span>
+		<span class="flex-no-wrap small-font">
+		<?= $helper->a(
+			$url->generate('logout'),
+			'Logout',
+			['class' => 'bracketed']
+		) ?>
+		</span>
+	<?php else: ?>
+		<span class="flex-no-wrap small-font">
+		[<?= $helper->a($url->generate('login'), "{$whose} Login") ?>]
 		</span>
-		<span class="flex-no-wrap">&nbsp;</span>
 	<?php endif ?>
-
-	<span class="flex-no-wrap small-font">
-		<?php if ($auth->isAuthenticated()): ?>
-			<?= $helper->a(
-				$url->generate('logout'),
-				'Logout',
-				['class' => 'bracketed']
-			) ?>
-		<?php else: ?>
-			[<?= $helper->a($url->generate('login'), "{$whose} Login") ?>]
-		<?php endif ?>
-	</span>
 </div>
 <nav>
 	<?php if ($container->get('util')->isViewPage() && ($hasAnime || $hasManga)): ?>
diff --git a/public/js/scripts-authed.min.js b/public/js/scripts-authed.min.js
index 042679e7..89b306ff 100644
--- a/public/js/scripts-authed.min.js
+++ b/public/js/scripts-authed.min.js
@@ -2,21 +2,22 @@ var e=e||{};e.scope={};e.ASSUME_ES5=!1;e.ASSUME_NO_NATIVE_MAP=!1;e.ASSUME_NO_NAT
 e.initSymbol=function(){e.initSymbol=function(){};e.global.Symbol||(e.global.Symbol=e.Symbol)};e.Symbol=function(){var c=0;return function(f){return e.SYMBOL_PREFIX+(f||"")+c++}}();e.initSymbolIterator=function(){e.initSymbol();var c=e.global.Symbol.iterator;c||(c=e.global.Symbol.iterator=e.global.Symbol("iterator"));"function"!=typeof Array.prototype[c]&&e.defineProperty(Array.prototype,c,{configurable:!0,writable:!0,value:function(){return e.arrayIterator(this)}});e.initSymbolIterator=function(){}};
 e.arrayIterator=function(c){var f=0;return e.iteratorPrototype(function(){return f<c.length?{done:!1,value:c[f++]}:{done:!0}})};e.iteratorPrototype=function(c){e.initSymbolIterator();c={next:c};c[e.global.Symbol.iterator]=function(){return this};return c};
 e.iteratorFromArray=function(c,f){e.initSymbolIterator();c instanceof String&&(c+="");var k=0,g={next:function(){if(k<c.length){var m=k++;return{value:f(m,c[m]),done:!1}}g.next=function(){return{done:!0,value:void 0}};return g.next()}};g[Symbol.iterator]=function(){return g};return g};
-e.polyfill=function(c,f){if(f){var k=e.global;c=c.split(".");for(var g=0;g<c.length-1;g++){var m=c[g];m in k||(k[m]={});k=k[m]}c=c[c.length-1];g=k[c];f=f(g);f!=g&&null!=f&&e.defineProperty(k,c,{configurable:!0,writable:!0,value:f})}};e.polyfill("Array.prototype.keys",function(c){return c?c:function(){return e.iteratorFromArray(this,function(c){return c})}},"es6","es3");
-(function(){function c(d){a.$(".cssload-loader")[0].removeAttribute("hidden");a.get(a.url("/manga/search"),{query:d},function(b){b=JSON.parse(b);a.$(".cssload-loader")[0].setAttribute("hidden","hidden");a.$("#series_list")[0].innerHTML=n(b.data)})}function f(d){a.$(".cssload-loader")[0].removeAttribute("hidden");a.get(a.url("/anime-collection/search"),{query:d},function(b){b=JSON.parse(b);a.$(".cssload-loader")[0].setAttribute("hidden","hidden");a.$("#series_list")[0].innerHTML=p(b.data)})}function k(d,
-b,a){b.match(/^([\w\-]+)$/)||b.split(" ").forEach(function(b){k(d,b,a)});d.addEventListener(b,a,!1)}function g(d,b,l,c){k(d,l,function(l){a.$(b,d).forEach(function(b){l.target==b&&(c.call(b,l),l.stopPropagation())})})}function m(d){var b=[];Object.keys(d).forEach(function(a){var l=d[a].toString();a=encodeURIComponent(a);l=encodeURIComponent(l);b.push(a+"\x3d"+l)});return b.join("\x26")}function p(a){var b=[];a.forEach(function(a){var d=a.attributes,l=d.titles.reduce(function(b,a){return b+(a+"\x3cbr /\x3e")},
-[]);b.push('\n\t\t\t\x3carticle class\x3d"media search"\x3e\n\t\t\t\t\x3cdiv class\x3d"name"\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" class\x3d"big-check" id\x3d"'+d.slug+'" name\x3d"id" value\x3d"'+a.id+'" /\x3e\n\t\t\t\t\t\x3clabel for\x3d"'+d.slug+'"\x3e\n\t\t\t\t\t\t\x3cimg src\x3d"/public/images/anime/'+a.id+'.jpg" alt\x3d"" width\x3d"220" /\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"name"\x3e\n\t\t\t\t\t\t\t'+d.canonicalTitle+"\x3cbr /\x3e\n\t\t\t\t\t\t\t\x3csmall\x3e"+l+'\x3c/small\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/label\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3cdiv class\x3d"table"\x3e\n\t\t\t\t\t\x3cdiv class\x3d"row"\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"edit"\x3e\n\t\t\t\t\t\t\t\x3ca class\x3d"bracketed" href\x3d"/anime/details/'+
-d.slug+'"\x3eInfo Page\x3c/a\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\x3c/article\x3e\n\t\t')});return b.join("")}function n(a){var b=[];a.forEach(function(a){var d=a.attributes,l=d.titles.reduce(function(b,a){return b+(a+"\x3cbr /\x3e")},[]);b.push('\n\t\t\t\x3carticle class\x3d"media search"\x3e\n\t\t\t\t\x3cdiv class\x3d"name"\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" class\x3d"big-check" id\x3d"'+d.slug+'" name\x3d"id" value\x3d"'+a.id+'" /\x3e\n\t\t\t\t\t\x3clabel for\x3d"'+
-d.slug+'"\x3e\n\t\t\t\t\t\t\x3cimg src\x3d"/public/images/manga/'+a.id+'.jpg" alt\x3d"" width\x3d"220" /\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"name"\x3e\n\t\t\t\t\t\t\t'+d.canonicalTitle+"\x3cbr /\x3e\n\t\t\t\t\t\t\t\x3csmall\x3e"+l+'\x3c/small\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/label\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3cdiv class\x3d"table"\x3e\n\t\t\t\t\t\x3cdiv class\x3d"row"\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"edit"\x3e\n\t\t\t\t\t\t\t\x3ca class\x3d"bracketed" href\x3d"/manga/details/'+
-d.slug+'"\x3eInfo Page\x3c/a\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\x3c/article\x3e\n\t\t')});return b.join("")}var a={noop:function(){},$:function(a,b){b=void 0===b?null:b;if("string"!==typeof a)return a;b=null!==b&&1===b.nodeType?b:document;var d=[];a.match(/^#([\w]+$)/)?d.push(document.getElementById(a.split("#")[1])):d=[].slice.apply(b.querySelectorAll(a));return d},hasElement:function(d){return 0<a.$(d).length},scrollToTop:function(){window.scroll(0,
-0)},hide:function(a){a.setAttribute("hidden","hidden")},show:function(a){a.removeAttribute("hidden")},showMessage:function(d,b){d="\x3cdiv class\x3d'message "+d+"'\x3e\n\t\t\t\t\x3cspan class\x3d'icon'\x3e\x3c/span\x3e\n\t\t\t\t"+b+"\n\t\t\t\t\x3cspan class\x3d'close'\x3e\x3c/span\x3e\n\t\t\t\x3c/div\x3e";b=a.$(".message");void 0!==b[0]&&b[0].remove();a.$("header")[0].insertAdjacentHTML("beforeend",d)},closestParent:function(a,b){if(void 0!==Element.prototype.closest)return a.closest(b);for(;a!==
-document.documentElement;){for(var d=a,c=(d.document||d.ownerDocument).querySelectorAll(b),h=c.length;0<=--h&&c.item(h)!==d;);if(-1<h)return a;a=a.parentElement}return null},url:function(a){var b="//"+document.location.host;return b+="/"===a.charAt(0)?a:"/"+a},throttle:function(a,b,l){var d=!1;return function(c){for(var h=[],f=0;f<arguments.length;++f)h[f-0]=arguments[f];f=l||this;d||(b.apply(f,h),d=!0,setTimeout(function(){d=!1},a))}},on:function(d,b,l,c){3===arguments.length?(c=l,a.$(d).forEach(function(a){k(a,
-b,c)})):a.$(d).forEach(function(a){g(a,l,b,c)})},ajax:function(d,b){b=b||{};b.data=b.data||{};b.type=b.type||"GET";b.dataType=b.dataType||"";b.success=b.success||a.noop;b.mimeType=b.mimeType||"application/x-www-form-urlencoded";b.error=b.error||a.noop;var c=new XMLHttpRequest,f=String(b.type).toUpperCase();"GET"===f&&(d+=d.match(/\?/)?m(b.data):"?"+m(b.data));c.open(f,d);c.onreadystatechange=function(){if(4===c.readyState){var a="json"===c.responseType?JSON.parse(c.responseText):c.responseText;299<
-c.status?b.error.call(null,c.status,a,c.response):b.success.call(null,a,c.status)}};"json"===b.dataType?(b.data=JSON.stringify(b.data),b.mimeType="application/json"):b.data=m(b.data);c.setRequestHeader("Content-Type",b.mimeType);switch(f){case "GET":c.send(null);break;default:c.send(b.data)}},get:function(d,b,c){c=void 0===c?null:c;null===c&&(c=b,b={});return a.ajax(d,{data:b,success:c})}};a.on("header","click",".message",function(){a.hide(this)});a.on("form.js-delete","submit",function(a){!1===confirm("Are you ABSOLUTELY SURE you want to delete this item?")&&
-(a.preventDefault(),a.stopPropagation())});a.on(".js-clear-cache","click",function(){a.get("/cache_purge",function(){a.showMessage("success","Successfully purged api cache")})});"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(a){console.log("Service worker registered",a.scope)}).catch(function(a){console.error("Failed to register service worker",a)});if(a.hasElement(".anime #search"))a.on("#search","keyup",a.throttle(250,function(){var a=encodeURIComponent(this.value);
-""!==a&&f(a)}));a.on("body.anime.list","click",".plus_one",function(c){var b=a.closestParent(c.target,"article"),d=parseInt(a.$(".completed_number",b)[0].textContent,10)||0;c=parseInt(a.$(".total_number",b)[0].textContent,10);var f=a.$(".name a",b)[0].textContent,h={id:b.dataset.kitsuId,mal_id:b.dataset.malId,data:{progress:d+1}};if(isNaN(d)||0===d)h.data.status="current";isNaN(d)||d+1!==c||(h.data.status="completed");a.show(a.$("#loading-shadow")[0]);a.ajax(a.url("/anime/update"),{data:h,dataType:"json",
-type:"POST",success:function(c){c=JSON.parse(c);c.errors?(a.hide(a.$("#loading-shadow")[0]),a.showMessage("error","Failed to update "+f+". ")):("completed"===c.data.attributes.status&&a.hide(b),a.hide(a.$("#loading-shadow")[0]),a.showMessage("success","Successfully updated "+f),a.$(".completed_number",b)[0].textContent=++d);a.scrollToTop()},error:function(){a.hide(a.$("#loading-shadow")[0]);a.showMessage("error","Failed to update "+f+". ");a.scrollToTop()}})});if(a.hasElement(".manga #search"))a.on("#search",
-"keyup",a.throttle(250,function(){var a=encodeURIComponent(this.value);""!==a&&c(a)}));a.on(".manga.list","click",".edit_buttons button",function(c){var b=c.target,d=a.closestParent(c.target,"article"),f=b.classList.contains("plus_one_chapter")?"chapter":"volume",h=parseInt(a.$("."+f+"s_read",d)[0].textContent,10)||0;c=parseInt(a.$("."+f+"_count",d)[0].textContent,10);var k=a.$(".name",d)[0].textContent;isNaN(h)&&(h=0);var g={id:d.dataset.kitsuId,mal_id:d.dataset.malId,data:{progress:h}};if(isNaN(h)||
-0===h)g.data.status="current";isNaN(h)||h+1!==c||(g.data.status="completed");g.data.progress=++h;a.show(a.$("#loading-shadow")[0]);a.ajax(a.url("/manga/update"),{data:g,dataType:"json",type:"POST",mimeType:"application/json",success:function(){"completed"===g.data.status&&a.hide(d);a.hide(a.$("#loading-shadow")[0]);a.$("."+f+"s_read",d)[0].textContent=h;a.showMessage("success","Successfully updated "+k);a.scrollToTop()},error:function(){a.hide(a.$("#loading-shadow")[0]);a.showMessage("error","Failed to update "+
-k);a.scrollToTop()}})})})();
+e.polyfill=function(c,f){if(f){var k=e.global;c=c.split(".");for(var g=0;g<c.length-1;g++){var m=c[g];m in k||(k[m]={});k=k[m]}c=c[c.length-1];g=k[c];f=f(g);f!=g&&null!=f&&e.defineProperty(k,c,{configurable:!0,writable:!0,value:f})}};e.polyfill("Array.prototype.keys",function(c){return c?c:function(){return e.iteratorFromArray(this,function(c){return c})}},"es6","es3");e.owns=function(c,f){return Object.prototype.hasOwnProperty.call(c,f)};
+e.assign="function"==typeof Object.assign?Object.assign:function(c,f){for(var k=1;k<arguments.length;k++){var g=arguments[k];if(g)for(var m in g)e.owns(g,m)&&(c[m]=g[m])}return c};e.polyfill("Object.assign",function(c){return c||e.assign},"es6","es3");
+(function(){function c(a){b.$(".cssload-loader")[0].removeAttribute("hidden");b.get(b.url("/manga/search"),{query:a},function(a){a=JSON.parse(a);b.$(".cssload-loader")[0].setAttribute("hidden","hidden");b.$("#series_list")[0].innerHTML=n(a.data)})}function f(a){b.$(".cssload-loader")[0].removeAttribute("hidden");b.get(b.url("/anime-collection/search"),{query:a},function(a){a=JSON.parse(a);b.$(".cssload-loader")[0].setAttribute("hidden","hidden");b.$("#series_list")[0].innerHTML=p(a.data)})}function k(a,
+b,d){b.match(/^([\w\-]+)$/)||b.split(" ").forEach(function(b){k(a,b,d)});a.addEventListener(b,d,!1)}function g(a,h,d,c){k(a,d,function(d){b.$(h,a).forEach(function(a){d.target==a&&(c.call(a,d),d.stopPropagation())})})}function m(a){var b=[];Object.keys(a).forEach(function(d){var h=a[d].toString();d=encodeURIComponent(d);h=encodeURIComponent(h);b.push(d+"\x3d"+h)});return b.join("\x26")}function p(a){var b=[];a.forEach(function(a){var d=a.attributes,h=d.titles.reduce(function(a,b){return a+(b+"\x3cbr /\x3e")},
+[]);b.push('\n\t\t\t\x3carticle class\x3d"media search"\x3e\n\t\t\t\t\x3cdiv class\x3d"name"\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" class\x3d"big-check" id\x3d"'+d.slug+'" name\x3d"id" value\x3d"'+a.id+'" /\x3e\n\t\t\t\t\t\x3clabel for\x3d"'+d.slug+'"\x3e\n\t\t\t\t\t\t\x3cimg src\x3d"/public/images/anime/'+a.id+'.jpg" alt\x3d"" width\x3d"220" /\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"name"\x3e\n\t\t\t\t\t\t\t'+d.canonicalTitle+"\x3cbr /\x3e\n\t\t\t\t\t\t\t\x3csmall\x3e"+h+'\x3c/small\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/label\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3cdiv class\x3d"table"\x3e\n\t\t\t\t\t\x3cdiv class\x3d"row"\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"edit"\x3e\n\t\t\t\t\t\t\t\x3ca class\x3d"bracketed" href\x3d"/anime/details/'+
+d.slug+'"\x3eInfo Page\x3c/a\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\x3c/article\x3e\n\t\t')});return b.join("")}function n(a){var b=[];a.forEach(function(a){var d=a.attributes,h=d.titles.reduce(function(a,b){return a+(b+"\x3cbr /\x3e")},[]);b.push('\n\t\t\t\x3carticle class\x3d"media search"\x3e\n\t\t\t\t\x3cdiv class\x3d"name"\x3e\n\t\t\t\t\t\x3cinput type\x3d"radio" class\x3d"big-check" id\x3d"'+d.slug+'" name\x3d"id" value\x3d"'+a.id+'" /\x3e\n\t\t\t\t\t\x3clabel for\x3d"'+
+d.slug+'"\x3e\n\t\t\t\t\t\t\x3cimg src\x3d"/public/images/manga/'+a.id+'.jpg" alt\x3d"" width\x3d"220" /\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"name"\x3e\n\t\t\t\t\t\t\t'+d.canonicalTitle+"\x3cbr /\x3e\n\t\t\t\t\t\t\t\x3csmall\x3e"+h+'\x3c/small\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/label\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3cdiv class\x3d"table"\x3e\n\t\t\t\t\t\x3cdiv class\x3d"row"\x3e\n\t\t\t\t\t\t\x3cspan class\x3d"edit"\x3e\n\t\t\t\t\t\t\t\x3ca class\x3d"bracketed" href\x3d"/manga/details/'+
+d.slug+'"\x3eInfo Page\x3c/a\x3e\n\t\t\t\t\t\t\x3c/span\x3e\n\t\t\t\t\t\x3c/div\x3e\n\t\t\t\t\x3c/div\x3e\n\t\t\t\x3c/article\x3e\n\t\t')});return b.join("")}var b={noop:function(){},$:function(a,b){b=void 0===b?null:b;if("string"!==typeof a)return a;b=null!==b&&1===b.nodeType?b:document;var d=[];a.match(/^#([\w]+$)/)?d.push(document.getElementById(a.split("#")[1])):d=[].slice.apply(b.querySelectorAll(a));return d},hasElement:function(a){return 0<b.$(a).length},scrollToTop:function(){window.scroll(0,
+0)},hide:function(a){a.setAttribute("hidden","hidden")},show:function(a){a.removeAttribute("hidden")},showMessage:function(a,h){a="\x3cdiv class\x3d'message "+a+"'\x3e\n\t\t\t\t\x3cspan class\x3d'icon'\x3e\x3c/span\x3e\n\t\t\t\t"+h+"\n\t\t\t\t\x3cspan class\x3d'close'\x3e\x3c/span\x3e\n\t\t\t\x3c/div\x3e";h=b.$(".message");void 0!==h[0]&&h[0].remove();b.$("header")[0].insertAdjacentHTML("beforeend",a)},closestParent:function(a,b){if(void 0!==Element.prototype.closest)return a.closest(b);for(;a!==
+document.documentElement;){for(var d=a,c=(d.document||d.ownerDocument).querySelectorAll(b),h=c.length;0<=--h&&c.item(h)!==d;);if(-1<h)return a;a=a.parentElement}return null},url:function(a){var b="//"+document.location.host;return b+="/"===a.charAt(0)?a:"/"+a},throttle:function(b,c,d){var a=!1;return function(h){for(var f=[],l=0;l<arguments.length;++l)f[l-0]=arguments[l];l=d||this;a||(c.apply(l,f),a=!0,setTimeout(function(){a=!1},b))}},on:function(a,c,d,f){void 0===f?(f=d,b.$(a).forEach(function(a){k(a,
+c,f)})):b.$(a).forEach(function(a){g(a,d,c,f)})},ajax:function(a,c){c=Object.assign({},{data:{},type:"GET",dataType:"",success:b.noop,mimeType:"application/x-www-form-urlencoded",error:b.noop},c);var d=new XMLHttpRequest,h=String(c.type).toUpperCase();"GET"===h&&(a+=a.match(/\?/)?m(c.data):"?"+m(c.data));d.open(h,a);d.onreadystatechange=function(){if(4===d.readyState){var a="json"===d.responseType?JSON.parse(d.responseText):d.responseText;299<d.status?c.error.call(null,d.status,a,d.response):c.success.call(null,
+a,d.status)}};"json"===c.dataType?(c.data=JSON.stringify(c.data),c.mimeType="application/json"):c.data=m(c.data);d.setRequestHeader("Content-Type",c.mimeType);switch(h){case "GET":d.send(null);break;default:d.send(c.data)}},get:function(a,c,d){d=void 0===d?null:d;null===d&&(d=c,c={});return b.ajax(a,{data:c,success:d})}};b.on("header","click",".message",function(a){b.hide(a.target)});b.on("form.js-delete","submit",function(a){!1===confirm("Are you ABSOLUTELY SURE you want to delete this item?")&&
+(a.preventDefault(),a.stopPropagation())});b.on(".js-clear-cache","click",function(){b.get("/cache_purge",function(){b.showMessage("success","Successfully purged api cache")})});"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(a){console.log("Service worker registered",a.scope)}).catch(function(a){console.error("Failed to register service worker",a)});if(b.hasElement(".anime #search"))b.on("#search","keyup",b.throttle(250,function(a){a=encodeURIComponent(a.target.value);
+""!==a&&f(a)}));b.on("body.anime.list","click",".plus_one",function(a){var c=b.closestParent(a.target,"article"),d=parseInt(b.$(".completed_number",c)[0].textContent,10)||0;a=parseInt(b.$(".total_number",c)[0].textContent,10);var f=b.$(".name a",c)[0].textContent,l={id:c.dataset.kitsuId,mal_id:c.dataset.malId,data:{progress:d+1}};if(isNaN(d)||0===d)l.data.status="current";isNaN(d)||d+1!==a||(l.data.status="completed");b.show(b.$("#loading-shadow")[0]);b.ajax(b.url("/anime/increment"),{data:l,dataType:"json",
+type:"POST",success:function(a){a=JSON.parse(a);a.errors?(b.hide(b.$("#loading-shadow")[0]),b.showMessage("error","Failed to update "+f+". ")):("completed"===a.data.attributes.status&&b.hide(c),b.hide(b.$("#loading-shadow")[0]),b.showMessage("success","Successfully updated "+f),b.$(".completed_number",c)[0].textContent=++d);b.scrollToTop()},error:function(){b.hide(b.$("#loading-shadow")[0]);b.showMessage("error","Failed to update "+f+". ");b.scrollToTop()}})});if(b.hasElement(".manga #search"))b.on("#search",
+"keyup",b.throttle(250,function(a){a=encodeURIComponent(a.target.value);""!==a&&c(a)}));b.on(".manga.list","click",".edit_buttons button",function(a){var c=a.target,d=b.closestParent(a.target,"article"),f=c.classList.contains("plus_one_chapter")?"chapter":"volume",l=parseInt(b.$("."+f+"s_read",d)[0].textContent,10)||0;a=parseInt(b.$("."+f+"_count",d)[0].textContent,10);var k=b.$(".name",d)[0].textContent;isNaN(l)&&(l=0);var g={id:d.dataset.kitsuId,mal_id:d.dataset.malId,data:{progress:l}};if(isNaN(l)||
+0===l)g.data.status="current";isNaN(l)||l+1!==a||(g.data.status="completed");g.data.progress=++l;b.show(b.$("#loading-shadow")[0]);b.ajax(b.url("/manga/update"),{data:g,dataType:"json",type:"POST",mimeType:"application/json",success:function(){"completed"===g.data.status&&b.hide(d);b.hide(b.$("#loading-shadow")[0]);b.$("."+f+"s_read",d)[0].textContent=l;b.showMessage("success","Successfully updated "+k);b.scrollToTop()},error:function(){b.hide(b.$("#loading-shadow")[0]);b.showMessage("error","Failed to update "+
+k);b.scrollToTop()}})})})();
 //# sourceMappingURL=scripts-authed.min.js.map
diff --git a/public/js/scripts-authed.min.js.map b/public/js/scripts-authed.min.js.map
index 23143a9e..96eccc20 100644
--- a/public/js/scripts-authed.min.js.map
+++ b/public/js/scripts-authed.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"scripts-authed.min.js.map","sources":["src/base/AnimeClient.js"],"sourcesContent":["// -------------------------------------------------------------------------\n// ! Base\n// -------------------------------------------------------------------------\n\nconst matches = (elm, selector) => {\n\tlet matches = (elm.document || elm.ownerDocument).querySelectorAll(selector),\n\t\ti = matches.length;\n\twhile (--i >= 0 && matches.item(i) !== elm) {};\n\treturn i > -1;\n}\n\nexport const AnimeClient = {\n\t/**\n\t * Placeholder function\n\t */\n\tnoop: () => {},\n\t/**\n\t * DOM selector\n\t *\n\t * @param {string} selector - The dom selector string\n\t * @param {object} [context]\n\t * @return {[HTMLElement]} - array of dom elements\n\t */\n\t$(selector, context = null) {\n\t\tif (typeof selector !== 'string') {\n\t\t\treturn selector;\n\t\t}\n\n\t\tcontext = (context !== null && context.nodeType === 1)\n\t\t\t? context\n\t\t\t: document;\n\n\t\tlet elements = [];\n\t\tif (selector.match(/^#([\\w]+$)/)) {\n\t\t\telements.push(document.getElementById(selector.split('#')[1]));\n\t\t} else {\n\t\t\telements = [].slice.apply(context.querySelectorAll(selector));\n\t\t}\n\n\t\treturn elements;\n\t},\n\t/**\n\t * Does the selector exist on the current page?\n\t *\n\t * @param {string} selector\n\t * @returns {boolean}\n\t */\n\thasElement(selector) {\n\t\treturn AnimeClient.$(selector).length > 0;\n\t},\n\t/**\n\t * Scroll to the top of the Page\n\t *\n\t * @return {void}\n\t */\n\tscrollToTop() {\n\t\twindow.scroll(0,0);\n\t},\n\t/**\n\t * Hide the selected element\n\t *\n\t * @param  {string|Element} sel - the selector of the element to hide\n\t * @return {void}\n\t */\n\thide(sel) {\n\t\tsel.setAttribute('hidden', 'hidden');\n\t},\n\t/**\n\t * UnHide the selected element\n\t *\n\t * @param  {string|Element} sel - the selector of the element to hide\n\t * @return {void}\n\t */\n\tshow(sel) {\n\t\tsel.removeAttribute('hidden');\n\t},\n\t/**\n\t * Display a message box\n\t *\n\t * @param  {string} type - message type: info, error, success\n\t * @param  {string} message - the message itself\n\t * @return {void}\n\t */\n\tshowMessage(type, message) {\n\t\tlet template =\n\t\t\t`<div class='message ${type}'>\n\t\t\t\t<span class='icon'></span>\n\t\t\t\t${message}\n\t\t\t\t<span class='close'></span>\n\t\t\t</div>`;\n\n\t\tlet sel = AnimeClient.$('.message');\n\t\tif (sel[0] !== undefined) {\n\t\t\tsel[0].remove();\n\t\t}\n\n\t\tAnimeClient.$('header')[0].insertAdjacentHTML('beforeend', template);\n\t},\n\t/**\n\t * Finds the closest parent element matching the passed selector\n\t *\n\t * @param  {HTMLElement} current - the current HTMLElement\n\t * @param  {string} parentSelector - selector for the parent element\n\t * @return {HTMLElement|null} - the parent element\n\t */\n\tclosestParent(current, parentSelector) {\n\t\tif (Element.prototype.closest !== undefined) {\n\t\t\treturn current.closest(parentSelector);\n\t\t}\n\n\t\twhile (current !== document.documentElement) {\n\t\t\tif (matches(current, parentSelector)) {\n\t\t\t\treturn current;\n\t\t\t}\n\n\t\t\tcurrent = current.parentElement;\n\t\t}\n\n\t\treturn null;\n\t},\n\t/**\n\t * Generate a full url from a relative path\n\t *\n\t * @param  {string} path - url path\n\t * @return {string} - full url\n\t */\n\turl(path) {\n\t\tlet uri = `//${document.location.host}`;\n\t\turi += (path.charAt(0) === '/') ? path : `/${path}`;\n\n\t\treturn uri;\n\t},\n\t/**\n\t * Throttle execution of a function\n\t *\n\t * @see https://remysharp.com/2010/07/21/throttling-function-calls\n\t * @see https://jsfiddle.net/jonathansampson/m7G64/\n\t * @param {Number} interval - the minimum throttle time in ms\n\t * @param {Function} fn - the function to throttle\n\t * @param {Object} [scope] - the 'this' object for the function\n\t * @return {Function}\n\t */\n\tthrottle(interval, fn, scope) {\n\t\tlet wait = false;\n\t\treturn function (...args) {\n\t\t\tconst context = scope || this;\n\n\t\t\tif ( ! wait) {\n\t\t\t\tfn.apply(context, args);\n\t\t\t\twait = true;\n\t\t\t\tsetTimeout(function() {\n\t\t\t\t\twait = false;\n\t\t\t\t}, interval);\n\t\t\t}\n\t\t};\n\t},\n};\n\n// -------------------------------------------------------------------------\n// ! Events\n// -------------------------------------------------------------------------\n\nfunction addEvent(sel, event, listener) {\n\t// Recurse!\n\tif (! event.match(/^([\\w\\-]+)$/)) {\n\t\tevent.split(' ').forEach((evt) => {\n\t\t\taddEvent(sel, evt, listener);\n\t\t});\n\t}\n\n\tsel.addEventListener(event, listener, false);\n}\n\nfunction delegateEvent(sel, target, event, listener) {\n\t// Attach the listener to the parent\n\taddEvent(sel, event, (e) => {\n\t\t// Get live version of the target selector\n\t\tAnimeClient.$(target, sel).forEach((element) => {\n\t\t\tif(e.target == element) {\n\t\t\t\tlistener.call(element, e);\n\t\t\t\te.stopPropagation();\n\t\t\t}\n\t\t});\n\t});\n}\n\n/**\n * Add an event listener\n *\n * @param  {string|HTMLElement} sel - the parent selector to bind to\n * @param  {string} event - event name(s) to bind\n * @param  {string|HTMLElement|function} target - the element to directly bind the event to\n * @param  {function} [listener] - event listener callback\n * @return {void}\n */\nAnimeClient.on = function (sel, event, target, listener) {\n\tif (arguments.length === 3) {\n\t\tlistener = target;\n\t\tAnimeClient.$(sel).forEach((el) => {\n\t\t\taddEvent(el, event, listener);\n\t\t});\n\t} else {\n\t\tAnimeClient.$(sel).forEach((el) => {\n\t\t\tdelegateEvent(el, target, event, listener);\n\t\t});\n\t}\n};\n\n// -------------------------------------------------------------------------\n// ! Ajax\n// -------------------------------------------------------------------------\n\n/**\n * Url encoding for non-get requests\n *\n * @param data\n * @returns {string}\n * @private\n */\nfunction ajaxSerialize(data) {\n\tlet pairs = [];\n\n\tObject.keys(data).forEach((name) => {\n\t\tlet value = data[name].toString();\n\n\t\tname = encodeURIComponent(name);\n\t\tvalue = encodeURIComponent(value);\n\n\t\tpairs.push(`${name}=${value}`);\n\t});\n\n\treturn pairs.join('&');\n}\n\n/**\n * Make an ajax request\n *\n * Config:{\n * \tdata: // data to send with the request\n * \ttype: // http verb of the request, defaults to GET\n * \tsuccess: // success callback\n * \terror: // error callback\n * }\n *\n * @param  {string} url - the url to request\n * @param  {Object} config  - the configuration object\n * @return {void}\n */\nAnimeClient.ajax = function(url, config) {\n\t// Set some sane defaults\n\tconfig = config || {};\n\tconfig.data = config.data || {};\n\tconfig.type = config.type || 'GET';\n\tconfig.dataType = config.dataType || '';\n\tconfig.success = config.success || AnimeClient.noop;\n\tconfig.mimeType = config.mimeType || 'application/x-www-form-urlencoded';\n\tconfig.error = config.error || AnimeClient.noop;\n\n\tlet request = new XMLHttpRequest();\n\tlet method = String(config.type).toUpperCase();\n\n\tif (method === 'GET') {\n\t\turl += (url.match(/\\?/))\n\t\t\t? ajaxSerialize(config.data)\n\t\t\t: `?${ajaxSerialize(config.data)}`;\n\t}\n\n\trequest.open(method, url);\n\n\trequest.onreadystatechange = () => {\n\t\tif (request.readyState === 4) {\n\t\t\tlet responseText = '';\n\n\t\t\tif (request.responseType === 'json') {\n\t\t\t\tresponseText = JSON.parse(request.responseText);\n\t\t\t} else {\n\t\t\t\tresponseText = request.responseText;\n\t\t\t}\n\n\t\t\tif (request.status > 299) {\n\t\t\t\tconfig.error.call(null, request.status, responseText, request.response);\n\t\t\t} else {\n\t\t\t\tconfig.success.call(null, responseText, request.status);\n\t\t\t}\n\t\t}\n\t};\n\n\tif (config.dataType === 'json') {\n\t\tconfig.data = JSON.stringify(config.data);\n\t\tconfig.mimeType = 'application/json';\n\t} else {\n\t\tconfig.data = ajaxSerialize(config.data);\n\t}\n\n\trequest.setRequestHeader('Content-Type', config.mimeType);\n\n\tswitch (method) {\n\t\tcase 'GET':\n\t\t\trequest.send(null);\n\t\tbreak;\n\n\t\tdefault:\n\t\t\trequest.send(config.data);\n\t\tbreak;\n\t}\n};\n\n/**\n * Do a get request\n *\n * @param {string} url\n * @param {object|function} data\n * @param {function} [callback]\n */\nAnimeClient.get = function(url, data, callback = null) {\n\tif (callback === null) {\n\t\tcallback = data;\n\t\tdata = {};\n\t}\n\n\treturn AnimeClient.ajax(url, {\n\t\tdata,\n\t\tsuccess: callback\n\t});\n};\n\n// -------------------------------------------------------------------------\n// Export\n// -------------------------------------------------------------------------\n\nexport default AnimeClient;"],"names":[],"mappings":"IAuBG,EAAU,CAAV;;;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
+{"version":3,"file":"scripts-authed.min.js.map","sources":["src/base/AnimeClient.js"],"sourcesContent":["// -------------------------------------------------------------------------\n// ! Base\n// -------------------------------------------------------------------------\n\nconst matches = (elm, selector) => {\n\tlet matches = (elm.document || elm.ownerDocument).querySelectorAll(selector),\n\t\ti = matches.length;\n\twhile (--i >= 0 && matches.item(i) !== elm) {};\n\treturn i > -1;\n}\n\nexport const AnimeClient = {\n\t/**\n\t * Placeholder function\n\t */\n\tnoop: () => {},\n\t/**\n\t * DOM selector\n\t *\n\t * @param {string} selector - The dom selector string\n\t * @param {object} [context]\n\t * @return {[HTMLElement]} - array of dom elements\n\t */\n\t$(selector, context = null) {\n\t\tif (typeof selector !== 'string') {\n\t\t\treturn selector;\n\t\t}\n\n\t\tcontext = (context !== null && context.nodeType === 1)\n\t\t\t? context\n\t\t\t: document;\n\n\t\tlet elements = [];\n\t\tif (selector.match(/^#([\\w]+$)/)) {\n\t\t\telements.push(document.getElementById(selector.split('#')[1]));\n\t\t} else {\n\t\t\telements = [].slice.apply(context.querySelectorAll(selector));\n\t\t}\n\n\t\treturn elements;\n\t},\n\t/**\n\t * Does the selector exist on the current page?\n\t *\n\t * @param {string} selector\n\t * @returns {boolean}\n\t */\n\thasElement (selector) {\n\t\treturn AnimeClient.$(selector).length > 0;\n\t},\n\t/**\n\t * Scroll to the top of the Page\n\t *\n\t * @return {void}\n\t */\n\tscrollToTop () {\n\t\twindow.scroll(0,0);\n\t},\n\t/**\n\t * Hide the selected element\n\t *\n\t * @param  {string|Element} sel - the selector of the element to hide\n\t * @return {void}\n\t */\n\thide (sel) {\n\t\tsel.setAttribute('hidden', 'hidden');\n\t},\n\t/**\n\t * UnHide the selected element\n\t *\n\t * @param  {string|Element} sel - the selector of the element to hide\n\t * @return {void}\n\t */\n\tshow (sel) {\n\t\tsel.removeAttribute('hidden');\n\t},\n\t/**\n\t * Display a message box\n\t *\n\t * @param  {string} type - message type: info, error, success\n\t * @param  {string} message - the message itself\n\t * @return {void}\n\t */\n\tshowMessage (type, message) {\n\t\tlet template =\n\t\t\t`<div class='message ${type}'>\n\t\t\t\t<span class='icon'></span>\n\t\t\t\t${message}\n\t\t\t\t<span class='close'></span>\n\t\t\t</div>`;\n\n\t\tlet sel = AnimeClient.$('.message');\n\t\tif (sel[0] !== undefined) {\n\t\t\tsel[0].remove();\n\t\t}\n\n\t\tAnimeClient.$('header')[0].insertAdjacentHTML('beforeend', template);\n\t},\n\t/**\n\t * Finds the closest parent element matching the passed selector\n\t *\n\t * @param  {HTMLElement} current - the current HTMLElement\n\t * @param  {string} parentSelector - selector for the parent element\n\t * @return {HTMLElement|null} - the parent element\n\t */\n\tclosestParent (current, parentSelector) {\n\t\tif (Element.prototype.closest !== undefined) {\n\t\t\treturn current.closest(parentSelector);\n\t\t}\n\n\t\twhile (current !== document.documentElement) {\n\t\t\tif (matches(current, parentSelector)) {\n\t\t\t\treturn current;\n\t\t\t}\n\n\t\t\tcurrent = current.parentElement;\n\t\t}\n\n\t\treturn null;\n\t},\n\t/**\n\t * Generate a full url from a relative path\n\t *\n\t * @param  {string} path - url path\n\t * @return {string} - full url\n\t */\n\turl (path) {\n\t\tlet uri = `//${document.location.host}`;\n\t\turi += (path.charAt(0) === '/') ? path : `/${path}`;\n\n\t\treturn uri;\n\t},\n\t/**\n\t * Throttle execution of a function\n\t *\n\t * @see https://remysharp.com/2010/07/21/throttling-function-calls\n\t * @see https://jsfiddle.net/jonathansampson/m7G64/\n\t * @param {Number} interval - the minimum throttle time in ms\n\t * @param {Function} fn - the function to throttle\n\t * @param {Object} [scope] - the 'this' object for the function\n\t * @return {Function}\n\t */\n\tthrottle (interval, fn, scope) {\n\t\tlet wait = false;\n\t\treturn function (...args) {\n\t\t\tconst context = scope || this;\n\n\t\t\tif ( ! wait) {\n\t\t\t\tfn.apply(context, args);\n\t\t\t\twait = true;\n\t\t\t\tsetTimeout(function() {\n\t\t\t\t\twait = false;\n\t\t\t\t}, interval);\n\t\t\t}\n\t\t};\n\t},\n};\n\n// -------------------------------------------------------------------------\n// ! Events\n// -------------------------------------------------------------------------\n\nfunction addEvent(sel, event, listener) {\n\t// Recurse!\n\tif (! event.match(/^([\\w\\-]+)$/)) {\n\t\tevent.split(' ').forEach((evt) => {\n\t\t\taddEvent(sel, evt, listener);\n\t\t});\n\t}\n\n\tsel.addEventListener(event, listener, false);\n}\n\nfunction delegateEvent(sel, target, event, listener) {\n\t// Attach the listener to the parent\n\taddEvent(sel, event, (e) => {\n\t\t// Get live version of the target selector\n\t\tAnimeClient.$(target, sel).forEach((element) => {\n\t\t\tif(e.target == element) {\n\t\t\t\tlistener.call(element, e);\n\t\t\t\te.stopPropagation();\n\t\t\t}\n\t\t});\n\t});\n}\n\n/**\n * Add an event listener\n *\n * @param  {string|HTMLElement} sel - the parent selector to bind to\n * @param  {string} event - event name(s) to bind\n * @param  {string|HTMLElement|function} target - the element to directly bind the event to\n * @param  {function} [listener] - event listener callback\n * @return {void}\n */\nAnimeClient.on = (sel, event, target, listener) => {\n\tif (listener === undefined) {\n\t\tlistener = target;\n\t\tAnimeClient.$(sel).forEach((el) => {\n\t\t\taddEvent(el, event, listener);\n\t\t});\n\t} else {\n\t\tAnimeClient.$(sel).forEach((el) => {\n\t\t\tdelegateEvent(el, target, event, listener);\n\t\t});\n\t}\n};\n\n// -------------------------------------------------------------------------\n// ! Ajax\n// -------------------------------------------------------------------------\n\n/**\n * Url encoding for non-get requests\n *\n * @param data\n * @returns {string}\n * @private\n */\nfunction ajaxSerialize(data) {\n\tlet pairs = [];\n\n\tObject.keys(data).forEach((name) => {\n\t\tlet value = data[name].toString();\n\n\t\tname = encodeURIComponent(name);\n\t\tvalue = encodeURIComponent(value);\n\n\t\tpairs.push(`${name}=${value}`);\n\t});\n\n\treturn pairs.join('&');\n}\n\n/**\n * Make an ajax request\n *\n * Config:{\n * \tdata: // data to send with the request\n * \ttype: // http verb of the request, defaults to GET\n * \tsuccess: // success callback\n * \terror: // error callback\n * }\n *\n * @param  {string} url - the url to request\n * @param  {Object} config  - the configuration object\n * @return {void}\n */\nAnimeClient.ajax = (url, config) => {\n\t// Set some sane defaults\n\tconst defaultConfig = {\n\t\tdata: {},\n\t\ttype: 'GET',\n\t\tdataType: '',\n\t\tsuccess: AnimeClient.noop,\n\t\tmimeType: 'application/x-www-form-urlencoded',\n\t\terror: AnimeClient.noop\n\t}\n\n\tconfig = {\n\t\t...defaultConfig,\n\t\t...config,\n\t}\n\n\tlet request = new XMLHttpRequest();\n\tlet method = String(config.type).toUpperCase();\n\n\tif (method === 'GET') {\n\t\turl += (url.match(/\\?/))\n\t\t\t? ajaxSerialize(config.data)\n\t\t\t: `?${ajaxSerialize(config.data)}`;\n\t}\n\n\trequest.open(method, url);\n\n\trequest.onreadystatechange = () => {\n\t\tif (request.readyState === 4) {\n\t\t\tlet responseText = '';\n\n\t\t\tif (request.responseType === 'json') {\n\t\t\t\tresponseText = JSON.parse(request.responseText);\n\t\t\t} else {\n\t\t\t\tresponseText = request.responseText;\n\t\t\t}\n\n\t\t\tif (request.status > 299) {\n\t\t\t\tconfig.error.call(null, request.status, responseText, request.response);\n\t\t\t} else {\n\t\t\t\tconfig.success.call(null, responseText, request.status);\n\t\t\t}\n\t\t}\n\t};\n\n\tif (config.dataType === 'json') {\n\t\tconfig.data = JSON.stringify(config.data);\n\t\tconfig.mimeType = 'application/json';\n\t} else {\n\t\tconfig.data = ajaxSerialize(config.data);\n\t}\n\n\trequest.setRequestHeader('Content-Type', config.mimeType);\n\n\tswitch (method) {\n\t\tcase 'GET':\n\t\t\trequest.send(null);\n\t\tbreak;\n\n\t\tdefault:\n\t\t\trequest.send(config.data);\n\t\tbreak;\n\t}\n};\n\n/**\n * Do a get request\n *\n * @param {string} url\n * @param {object|function} data\n * @param {function} [callback]\n */\nAnimeClient.get = (url, data, callback = null) => {\n\tif (callback === null) {\n\t\tcallback = data;\n\t\tdata = {};\n\t}\n\n\treturn AnimeClient.ajax(url, {\n\t\tdata,\n\t\tsuccess: callback\n\t});\n};\n\n// -------------------------------------------------------------------------\n// Export\n// -------------------------------------------------------------------------\n\nexport default AnimeClient;"],"names":[],"mappings":"IAuBG,EAAU,CAAV;;;;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/public/js/scripts.min.js b/public/js/scripts.min.js
index 84c7a076..52bba806 100644
--- a/public/js/scripts.min.js
+++ b/public/js/scripts.min.js
@@ -1,13 +1,14 @@
 var d=d||{};d.scope={};d.ASSUME_ES5=!1;d.ASSUME_NO_NATIVE_MAP=!1;d.ASSUME_NO_NATIVE_SET=!1;d.defineProperty=d.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(a,e,g){a!=Array.prototype&&a!=Object.prototype&&(a[e]=g.value)};d.getGlobal=function(a){return"undefined"!=typeof window&&window===a?a:"undefined"!=typeof global&&null!=global?global:a};d.global=d.getGlobal(this);d.SYMBOL_PREFIX="jscomp_symbol_";
 d.initSymbol=function(){d.initSymbol=function(){};d.global.Symbol||(d.global.Symbol=d.Symbol)};d.Symbol=function(){var a=0;return function(e){return d.SYMBOL_PREFIX+(e||"")+a++}}();d.initSymbolIterator=function(){d.initSymbol();var a=d.global.Symbol.iterator;a||(a=d.global.Symbol.iterator=d.global.Symbol("iterator"));"function"!=typeof Array.prototype[a]&&d.defineProperty(Array.prototype,a,{configurable:!0,writable:!0,value:function(){return d.arrayIterator(this)}});d.initSymbolIterator=function(){}};
 d.arrayIterator=function(a){var e=0;return d.iteratorPrototype(function(){return e<a.length?{done:!1,value:a[e++]}:{done:!0}})};d.iteratorPrototype=function(a){d.initSymbolIterator();a={next:a};a[d.global.Symbol.iterator]=function(){return this};return a};
-d.iteratorFromArray=function(a,e){d.initSymbolIterator();a instanceof String&&(a+="");var g=0,f={next:function(){if(g<a.length){var c=g++;return{value:e(c,a[c]),done:!1}}f.next=function(){return{done:!0,value:void 0}};return f.next()}};f[Symbol.iterator]=function(){return f};return f};
-d.polyfill=function(a,e){if(e){var g=d.global;a=a.split(".");for(var f=0;f<a.length-1;f++){var c=a[f];c in g||(g[c]={});g=g[c]}a=a[a.length-1];f=g[a];e=e(f);e!=f&&null!=e&&d.defineProperty(g,a,{configurable:!0,writable:!0,value:e})}};d.polyfill("Array.prototype.keys",function(a){return a?a:function(){return d.iteratorFromArray(this,function(a){return a})}},"es6","es3");
-(function(){function a(c,b,h){b.match(/^([\w\-]+)$/)||b.split(" ").forEach(function(b){a(c,b,h)});c.addEventListener(b,h,!1)}function e(c,b,h,k){a(c,h,function(a){f.$(b,c).forEach(function(b){a.target==b&&(k.call(b,a),a.stopPropagation())})})}function g(c){var b=[];Object.keys(c).forEach(function(a){var h=c[a].toString();a=encodeURIComponent(a);h=encodeURIComponent(h);b.push(a+"\x3d"+h)});return b.join("\x26")}var f={noop:function(){},$:function(c,b){b=void 0===b?null:b;if("string"!==typeof c)return c;
-b=null!==b&&1===b.nodeType?b:document;var a=[];c.match(/^#([\w]+$)/)?a.push(document.getElementById(c.split("#")[1])):a=[].slice.apply(b.querySelectorAll(c));return a},hasElement:function(c){return 0<f.$(c).length},scrollToTop:function(){window.scroll(0,0)},hide:function(c){c.setAttribute("hidden","hidden")},show:function(c){c.removeAttribute("hidden")},showMessage:function(c,b){c="\x3cdiv class\x3d'message "+c+"'\x3e\n\t\t\t\t\x3cspan class\x3d'icon'\x3e\x3c/span\x3e\n\t\t\t\t"+b+"\n\t\t\t\t\x3cspan class\x3d'close'\x3e\x3c/span\x3e\n\t\t\t\x3c/div\x3e";
-b=f.$(".message");void 0!==b[0]&&b[0].remove();f.$("header")[0].insertAdjacentHTML("beforeend",c)},closestParent:function(c,b){if(void 0!==Element.prototype.closest)return c.closest(b);for(;c!==document.documentElement;){for(var a=c,f=(a.document||a.ownerDocument).querySelectorAll(b),e=f.length;0<=--e&&f.item(e)!==a;);if(-1<e)return c;c=c.parentElement}return null},url:function(a){var b="//"+document.location.host;return b+="/"===a.charAt(0)?a:"/"+a},throttle:function(a,b,h){var c=!1;return function(f){for(var e=
-[],g=0;g<arguments.length;++g)e[g-0]=arguments[g];g=h||this;c||(b.apply(g,e),c=!0,setTimeout(function(){c=!1},a))}},on:function(c,b,h,g){3===arguments.length?(g=h,f.$(c).forEach(function(c){a(c,b,g)})):f.$(c).forEach(function(a){e(a,h,b,g)})},ajax:function(a,b){b=b||{};b.data=b.data||{};b.type=b.type||"GET";b.dataType=b.dataType||"";b.success=b.success||f.noop;b.mimeType=b.mimeType||"application/x-www-form-urlencoded";b.error=b.error||f.noop;var c=new XMLHttpRequest,e=String(b.type).toUpperCase();
-"GET"===e&&(a+=a.match(/\?/)?g(b.data):"?"+g(b.data));c.open(e,a);c.onreadystatechange=function(){if(4===c.readyState){var a="json"===c.responseType?JSON.parse(c.responseText):c.responseText;299<c.status?b.error.call(null,c.status,a,c.response):b.success.call(null,a,c.status)}};"json"===b.dataType?(b.data=JSON.stringify(b.data),b.mimeType="application/json"):b.data=g(b.data);c.setRequestHeader("Content-Type",b.mimeType);switch(e){case "GET":c.send(null);break;default:c.send(b.data)}},get:function(a,
-b,e){e=void 0===e?null:e;null===e&&(e=b,b={});return f.ajax(a,{data:b,success:e})}};f.on("header","click",".message",function(){f.hide(this)});f.on("form.js-delete","submit",function(a){!1===confirm("Are you ABSOLUTELY SURE you want to delete this item?")&&(a.preventDefault(),a.stopPropagation())});f.on(".js-clear-cache","click",function(){f.get("/cache_purge",function(){f.showMessage("success","Successfully purged api cache")})});"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(a){console.log("Service worker registered",
-a.scope)}).catch(function(a){console.error("Failed to register service worker",a)})})();
+d.iteratorFromArray=function(a,e){d.initSymbolIterator();a instanceof String&&(a+="");var g=0,f={next:function(){if(g<a.length){var b=g++;return{value:e(b,a[b]),done:!1}}f.next=function(){return{done:!0,value:void 0}};return f.next()}};f[Symbol.iterator]=function(){return f};return f};
+d.polyfill=function(a,e){if(e){var g=d.global;a=a.split(".");for(var f=0;f<a.length-1;f++){var b=a[f];b in g||(g[b]={});g=g[b]}a=a[a.length-1];f=g[a];e=e(f);e!=f&&null!=e&&d.defineProperty(g,a,{configurable:!0,writable:!0,value:e})}};d.polyfill("Array.prototype.keys",function(a){return a?a:function(){return d.iteratorFromArray(this,function(a){return a})}},"es6","es3");d.owns=function(a,e){return Object.prototype.hasOwnProperty.call(a,e)};
+d.assign="function"==typeof Object.assign?Object.assign:function(a,e){for(var g=1;g<arguments.length;g++){var f=arguments[g];if(f)for(var b in f)d.owns(f,b)&&(a[b]=f[b])}return a};d.polyfill("Object.assign",function(a){return a||d.assign},"es6","es3");
+(function(){function a(b,c,h){c.match(/^([\w\-]+)$/)||c.split(" ").forEach(function(c){a(b,c,h)});b.addEventListener(c,h,!1)}function e(b,c,h,k){a(b,h,function(a){f.$(c,b).forEach(function(b){a.target==b&&(k.call(b,a),a.stopPropagation())})})}function g(b){var a=[];Object.keys(b).forEach(function(c){var h=b[c].toString();c=encodeURIComponent(c);h=encodeURIComponent(h);a.push(c+"\x3d"+h)});return a.join("\x26")}var f={noop:function(){},$:function(b,a){a=void 0===a?null:a;if("string"!==typeof b)return b;
+a=null!==a&&1===a.nodeType?a:document;var c=[];b.match(/^#([\w]+$)/)?c.push(document.getElementById(b.split("#")[1])):c=[].slice.apply(a.querySelectorAll(b));return c},hasElement:function(a){return 0<f.$(a).length},scrollToTop:function(){window.scroll(0,0)},hide:function(a){a.setAttribute("hidden","hidden")},show:function(a){a.removeAttribute("hidden")},showMessage:function(a,c){a="\x3cdiv class\x3d'message "+a+"'\x3e\n\t\t\t\t\x3cspan class\x3d'icon'\x3e\x3c/span\x3e\n\t\t\t\t"+c+"\n\t\t\t\t\x3cspan class\x3d'close'\x3e\x3c/span\x3e\n\t\t\t\x3c/div\x3e";
+c=f.$(".message");void 0!==c[0]&&c[0].remove();f.$("header")[0].insertAdjacentHTML("beforeend",a)},closestParent:function(a,c){if(void 0!==Element.prototype.closest)return a.closest(c);for(;a!==document.documentElement;){for(var b=a,f=(b.document||b.ownerDocument).querySelectorAll(c),e=f.length;0<=--e&&f.item(e)!==b;);if(-1<e)return a;a=a.parentElement}return null},url:function(a){var b="//"+document.location.host;return b+="/"===a.charAt(0)?a:"/"+a},throttle:function(a,c,f){var b=!1;return function(h){for(var e=
+[],g=0;g<arguments.length;++g)e[g-0]=arguments[g];g=f||this;b||(c.apply(g,e),b=!0,setTimeout(function(){b=!1},a))}},on:function(b,c,h,g){void 0===g?(g=h,f.$(b).forEach(function(b){a(b,c,g)})):f.$(b).forEach(function(a){e(a,h,c,g)})},ajax:function(a,c){c=Object.assign({},{data:{},type:"GET",dataType:"",success:f.noop,mimeType:"application/x-www-form-urlencoded",error:f.noop},c);var b=new XMLHttpRequest,e=String(c.type).toUpperCase();"GET"===e&&(a+=a.match(/\?/)?g(c.data):"?"+g(c.data));b.open(e,a);
+b.onreadystatechange=function(){if(4===b.readyState){var a="json"===b.responseType?JSON.parse(b.responseText):b.responseText;299<b.status?c.error.call(null,b.status,a,b.response):c.success.call(null,a,b.status)}};"json"===c.dataType?(c.data=JSON.stringify(c.data),c.mimeType="application/json"):c.data=g(c.data);b.setRequestHeader("Content-Type",c.mimeType);switch(e){case "GET":b.send(null);break;default:b.send(c.data)}},get:function(a,c,e){e=void 0===e?null:e;null===e&&(e=c,c={});return f.ajax(a,{data:c,
+success:e})}};f.on("header","click",".message",function(a){f.hide(a.target)});f.on("form.js-delete","submit",function(a){!1===confirm("Are you ABSOLUTELY SURE you want to delete this item?")&&(a.preventDefault(),a.stopPropagation())});f.on(".js-clear-cache","click",function(){f.get("/cache_purge",function(){f.showMessage("success","Successfully purged api cache")})});"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(a){console.log("Service worker registered",a.scope)}).catch(function(a){console.error("Failed to register service worker",
+a)})})();
 //# sourceMappingURL=scripts.min.js.map
diff --git a/public/js/scripts.min.js.map b/public/js/scripts.min.js.map
index 043f0d43..77968041 100644
--- a/public/js/scripts.min.js.map
+++ b/public/js/scripts.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"scripts.min.js.map","sources":["src/base/AnimeClient.js"],"sourcesContent":["// -------------------------------------------------------------------------\n// ! Base\n// -------------------------------------------------------------------------\n\nconst matches = (elm, selector) => {\n\tlet matches = (elm.document || elm.ownerDocument).querySelectorAll(selector),\n\t\ti = matches.length;\n\twhile (--i >= 0 && matches.item(i) !== elm) {};\n\treturn i > -1;\n}\n\nexport const AnimeClient = {\n\t/**\n\t * Placeholder function\n\t */\n\tnoop: () => {},\n\t/**\n\t * DOM selector\n\t *\n\t * @param {string} selector - The dom selector string\n\t * @param {object} [context]\n\t * @return {[HTMLElement]} - array of dom elements\n\t */\n\t$(selector, context = null) {\n\t\tif (typeof selector !== 'string') {\n\t\t\treturn selector;\n\t\t}\n\n\t\tcontext = (context !== null && context.nodeType === 1)\n\t\t\t? context\n\t\t\t: document;\n\n\t\tlet elements = [];\n\t\tif (selector.match(/^#([\\w]+$)/)) {\n\t\t\telements.push(document.getElementById(selector.split('#')[1]));\n\t\t} else {\n\t\t\telements = [].slice.apply(context.querySelectorAll(selector));\n\t\t}\n\n\t\treturn elements;\n\t},\n\t/**\n\t * Does the selector exist on the current page?\n\t *\n\t * @param {string} selector\n\t * @returns {boolean}\n\t */\n\thasElement(selector) {\n\t\treturn AnimeClient.$(selector).length > 0;\n\t},\n\t/**\n\t * Scroll to the top of the Page\n\t *\n\t * @return {void}\n\t */\n\tscrollToTop() {\n\t\twindow.scroll(0,0);\n\t},\n\t/**\n\t * Hide the selected element\n\t *\n\t * @param  {string|Element} sel - the selector of the element to hide\n\t * @return {void}\n\t */\n\thide(sel) {\n\t\tsel.setAttribute('hidden', 'hidden');\n\t},\n\t/**\n\t * UnHide the selected element\n\t *\n\t * @param  {string|Element} sel - the selector of the element to hide\n\t * @return {void}\n\t */\n\tshow(sel) {\n\t\tsel.removeAttribute('hidden');\n\t},\n\t/**\n\t * Display a message box\n\t *\n\t * @param  {string} type - message type: info, error, success\n\t * @param  {string} message - the message itself\n\t * @return {void}\n\t */\n\tshowMessage(type, message) {\n\t\tlet template =\n\t\t\t`<div class='message ${type}'>\n\t\t\t\t<span class='icon'></span>\n\t\t\t\t${message}\n\t\t\t\t<span class='close'></span>\n\t\t\t</div>`;\n\n\t\tlet sel = AnimeClient.$('.message');\n\t\tif (sel[0] !== undefined) {\n\t\t\tsel[0].remove();\n\t\t}\n\n\t\tAnimeClient.$('header')[0].insertAdjacentHTML('beforeend', template);\n\t},\n\t/**\n\t * Finds the closest parent element matching the passed selector\n\t *\n\t * @param  {HTMLElement} current - the current HTMLElement\n\t * @param  {string} parentSelector - selector for the parent element\n\t * @return {HTMLElement|null} - the parent element\n\t */\n\tclosestParent(current, parentSelector) {\n\t\tif (Element.prototype.closest !== undefined) {\n\t\t\treturn current.closest(parentSelector);\n\t\t}\n\n\t\twhile (current !== document.documentElement) {\n\t\t\tif (matches(current, parentSelector)) {\n\t\t\t\treturn current;\n\t\t\t}\n\n\t\t\tcurrent = current.parentElement;\n\t\t}\n\n\t\treturn null;\n\t},\n\t/**\n\t * Generate a full url from a relative path\n\t *\n\t * @param  {string} path - url path\n\t * @return {string} - full url\n\t */\n\turl(path) {\n\t\tlet uri = `//${document.location.host}`;\n\t\turi += (path.charAt(0) === '/') ? path : `/${path}`;\n\n\t\treturn uri;\n\t},\n\t/**\n\t * Throttle execution of a function\n\t *\n\t * @see https://remysharp.com/2010/07/21/throttling-function-calls\n\t * @see https://jsfiddle.net/jonathansampson/m7G64/\n\t * @param {Number} interval - the minimum throttle time in ms\n\t * @param {Function} fn - the function to throttle\n\t * @param {Object} [scope] - the 'this' object for the function\n\t * @return {Function}\n\t */\n\tthrottle(interval, fn, scope) {\n\t\tlet wait = false;\n\t\treturn function (...args) {\n\t\t\tconst context = scope || this;\n\n\t\t\tif ( ! wait) {\n\t\t\t\tfn.apply(context, args);\n\t\t\t\twait = true;\n\t\t\t\tsetTimeout(function() {\n\t\t\t\t\twait = false;\n\t\t\t\t}, interval);\n\t\t\t}\n\t\t};\n\t},\n};\n\n// -------------------------------------------------------------------------\n// ! Events\n// -------------------------------------------------------------------------\n\nfunction addEvent(sel, event, listener) {\n\t// Recurse!\n\tif (! event.match(/^([\\w\\-]+)$/)) {\n\t\tevent.split(' ').forEach((evt) => {\n\t\t\taddEvent(sel, evt, listener);\n\t\t});\n\t}\n\n\tsel.addEventListener(event, listener, false);\n}\n\nfunction delegateEvent(sel, target, event, listener) {\n\t// Attach the listener to the parent\n\taddEvent(sel, event, (e) => {\n\t\t// Get live version of the target selector\n\t\tAnimeClient.$(target, sel).forEach((element) => {\n\t\t\tif(e.target == element) {\n\t\t\t\tlistener.call(element, e);\n\t\t\t\te.stopPropagation();\n\t\t\t}\n\t\t});\n\t});\n}\n\n/**\n * Add an event listener\n *\n * @param  {string|HTMLElement} sel - the parent selector to bind to\n * @param  {string} event - event name(s) to bind\n * @param  {string|HTMLElement|function} target - the element to directly bind the event to\n * @param  {function} [listener] - event listener callback\n * @return {void}\n */\nAnimeClient.on = function (sel, event, target, listener) {\n\tif (arguments.length === 3) {\n\t\tlistener = target;\n\t\tAnimeClient.$(sel).forEach((el) => {\n\t\t\taddEvent(el, event, listener);\n\t\t});\n\t} else {\n\t\tAnimeClient.$(sel).forEach((el) => {\n\t\t\tdelegateEvent(el, target, event, listener);\n\t\t});\n\t}\n};\n\n// -------------------------------------------------------------------------\n// ! Ajax\n// -------------------------------------------------------------------------\n\n/**\n * Url encoding for non-get requests\n *\n * @param data\n * @returns {string}\n * @private\n */\nfunction ajaxSerialize(data) {\n\tlet pairs = [];\n\n\tObject.keys(data).forEach((name) => {\n\t\tlet value = data[name].toString();\n\n\t\tname = encodeURIComponent(name);\n\t\tvalue = encodeURIComponent(value);\n\n\t\tpairs.push(`${name}=${value}`);\n\t});\n\n\treturn pairs.join('&');\n}\n\n/**\n * Make an ajax request\n *\n * Config:{\n * \tdata: // data to send with the request\n * \ttype: // http verb of the request, defaults to GET\n * \tsuccess: // success callback\n * \terror: // error callback\n * }\n *\n * @param  {string} url - the url to request\n * @param  {Object} config  - the configuration object\n * @return {void}\n */\nAnimeClient.ajax = function(url, config) {\n\t// Set some sane defaults\n\tconfig = config || {};\n\tconfig.data = config.data || {};\n\tconfig.type = config.type || 'GET';\n\tconfig.dataType = config.dataType || '';\n\tconfig.success = config.success || AnimeClient.noop;\n\tconfig.mimeType = config.mimeType || 'application/x-www-form-urlencoded';\n\tconfig.error = config.error || AnimeClient.noop;\n\n\tlet request = new XMLHttpRequest();\n\tlet method = String(config.type).toUpperCase();\n\n\tif (method === 'GET') {\n\t\turl += (url.match(/\\?/))\n\t\t\t? ajaxSerialize(config.data)\n\t\t\t: `?${ajaxSerialize(config.data)}`;\n\t}\n\n\trequest.open(method, url);\n\n\trequest.onreadystatechange = () => {\n\t\tif (request.readyState === 4) {\n\t\t\tlet responseText = '';\n\n\t\t\tif (request.responseType === 'json') {\n\t\t\t\tresponseText = JSON.parse(request.responseText);\n\t\t\t} else {\n\t\t\t\tresponseText = request.responseText;\n\t\t\t}\n\n\t\t\tif (request.status > 299) {\n\t\t\t\tconfig.error.call(null, request.status, responseText, request.response);\n\t\t\t} else {\n\t\t\t\tconfig.success.call(null, responseText, request.status);\n\t\t\t}\n\t\t}\n\t};\n\n\tif (config.dataType === 'json') {\n\t\tconfig.data = JSON.stringify(config.data);\n\t\tconfig.mimeType = 'application/json';\n\t} else {\n\t\tconfig.data = ajaxSerialize(config.data);\n\t}\n\n\trequest.setRequestHeader('Content-Type', config.mimeType);\n\n\tswitch (method) {\n\t\tcase 'GET':\n\t\t\trequest.send(null);\n\t\tbreak;\n\n\t\tdefault:\n\t\t\trequest.send(config.data);\n\t\tbreak;\n\t}\n};\n\n/**\n * Do a get request\n *\n * @param {string} url\n * @param {object|function} data\n * @param {function} [callback]\n */\nAnimeClient.get = function(url, data, callback = null) {\n\tif (callback === null) {\n\t\tcallback = data;\n\t\tdata = {};\n\t}\n\n\treturn AnimeClient.ajax(url, {\n\t\tdata,\n\t\tsuccess: callback\n\t});\n};\n\n// -------------------------------------------------------------------------\n// Export\n// -------------------------------------------------------------------------\n\nexport default AnimeClient;"],"names":[],"mappings":"IAuBG,EAAU,CAAV;;;;;;;;;;;;"}
\ No newline at end of file
+{"version":3,"file":"scripts.min.js.map","sources":["src/base/AnimeClient.js"],"sourcesContent":["// -------------------------------------------------------------------------\n// ! Base\n// -------------------------------------------------------------------------\n\nconst matches = (elm, selector) => {\n\tlet matches = (elm.document || elm.ownerDocument).querySelectorAll(selector),\n\t\ti = matches.length;\n\twhile (--i >= 0 && matches.item(i) !== elm) {};\n\treturn i > -1;\n}\n\nexport const AnimeClient = {\n\t/**\n\t * Placeholder function\n\t */\n\tnoop: () => {},\n\t/**\n\t * DOM selector\n\t *\n\t * @param {string} selector - The dom selector string\n\t * @param {object} [context]\n\t * @return {[HTMLElement]} - array of dom elements\n\t */\n\t$(selector, context = null) {\n\t\tif (typeof selector !== 'string') {\n\t\t\treturn selector;\n\t\t}\n\n\t\tcontext = (context !== null && context.nodeType === 1)\n\t\t\t? context\n\t\t\t: document;\n\n\t\tlet elements = [];\n\t\tif (selector.match(/^#([\\w]+$)/)) {\n\t\t\telements.push(document.getElementById(selector.split('#')[1]));\n\t\t} else {\n\t\t\telements = [].slice.apply(context.querySelectorAll(selector));\n\t\t}\n\n\t\treturn elements;\n\t},\n\t/**\n\t * Does the selector exist on the current page?\n\t *\n\t * @param {string} selector\n\t * @returns {boolean}\n\t */\n\thasElement (selector) {\n\t\treturn AnimeClient.$(selector).length > 0;\n\t},\n\t/**\n\t * Scroll to the top of the Page\n\t *\n\t * @return {void}\n\t */\n\tscrollToTop () {\n\t\twindow.scroll(0,0);\n\t},\n\t/**\n\t * Hide the selected element\n\t *\n\t * @param  {string|Element} sel - the selector of the element to hide\n\t * @return {void}\n\t */\n\thide (sel) {\n\t\tsel.setAttribute('hidden', 'hidden');\n\t},\n\t/**\n\t * UnHide the selected element\n\t *\n\t * @param  {string|Element} sel - the selector of the element to hide\n\t * @return {void}\n\t */\n\tshow (sel) {\n\t\tsel.removeAttribute('hidden');\n\t},\n\t/**\n\t * Display a message box\n\t *\n\t * @param  {string} type - message type: info, error, success\n\t * @param  {string} message - the message itself\n\t * @return {void}\n\t */\n\tshowMessage (type, message) {\n\t\tlet template =\n\t\t\t`<div class='message ${type}'>\n\t\t\t\t<span class='icon'></span>\n\t\t\t\t${message}\n\t\t\t\t<span class='close'></span>\n\t\t\t</div>`;\n\n\t\tlet sel = AnimeClient.$('.message');\n\t\tif (sel[0] !== undefined) {\n\t\t\tsel[0].remove();\n\t\t}\n\n\t\tAnimeClient.$('header')[0].insertAdjacentHTML('beforeend', template);\n\t},\n\t/**\n\t * Finds the closest parent element matching the passed selector\n\t *\n\t * @param  {HTMLElement} current - the current HTMLElement\n\t * @param  {string} parentSelector - selector for the parent element\n\t * @return {HTMLElement|null} - the parent element\n\t */\n\tclosestParent (current, parentSelector) {\n\t\tif (Element.prototype.closest !== undefined) {\n\t\t\treturn current.closest(parentSelector);\n\t\t}\n\n\t\twhile (current !== document.documentElement) {\n\t\t\tif (matches(current, parentSelector)) {\n\t\t\t\treturn current;\n\t\t\t}\n\n\t\t\tcurrent = current.parentElement;\n\t\t}\n\n\t\treturn null;\n\t},\n\t/**\n\t * Generate a full url from a relative path\n\t *\n\t * @param  {string} path - url path\n\t * @return {string} - full url\n\t */\n\turl (path) {\n\t\tlet uri = `//${document.location.host}`;\n\t\turi += (path.charAt(0) === '/') ? path : `/${path}`;\n\n\t\treturn uri;\n\t},\n\t/**\n\t * Throttle execution of a function\n\t *\n\t * @see https://remysharp.com/2010/07/21/throttling-function-calls\n\t * @see https://jsfiddle.net/jonathansampson/m7G64/\n\t * @param {Number} interval - the minimum throttle time in ms\n\t * @param {Function} fn - the function to throttle\n\t * @param {Object} [scope] - the 'this' object for the function\n\t * @return {Function}\n\t */\n\tthrottle (interval, fn, scope) {\n\t\tlet wait = false;\n\t\treturn function (...args) {\n\t\t\tconst context = scope || this;\n\n\t\t\tif ( ! wait) {\n\t\t\t\tfn.apply(context, args);\n\t\t\t\twait = true;\n\t\t\t\tsetTimeout(function() {\n\t\t\t\t\twait = false;\n\t\t\t\t}, interval);\n\t\t\t}\n\t\t};\n\t},\n};\n\n// -------------------------------------------------------------------------\n// ! Events\n// -------------------------------------------------------------------------\n\nfunction addEvent(sel, event, listener) {\n\t// Recurse!\n\tif (! event.match(/^([\\w\\-]+)$/)) {\n\t\tevent.split(' ').forEach((evt) => {\n\t\t\taddEvent(sel, evt, listener);\n\t\t});\n\t}\n\n\tsel.addEventListener(event, listener, false);\n}\n\nfunction delegateEvent(sel, target, event, listener) {\n\t// Attach the listener to the parent\n\taddEvent(sel, event, (e) => {\n\t\t// Get live version of the target selector\n\t\tAnimeClient.$(target, sel).forEach((element) => {\n\t\t\tif(e.target == element) {\n\t\t\t\tlistener.call(element, e);\n\t\t\t\te.stopPropagation();\n\t\t\t}\n\t\t});\n\t});\n}\n\n/**\n * Add an event listener\n *\n * @param  {string|HTMLElement} sel - the parent selector to bind to\n * @param  {string} event - event name(s) to bind\n * @param  {string|HTMLElement|function} target - the element to directly bind the event to\n * @param  {function} [listener] - event listener callback\n * @return {void}\n */\nAnimeClient.on = (sel, event, target, listener) => {\n\tif (listener === undefined) {\n\t\tlistener = target;\n\t\tAnimeClient.$(sel).forEach((el) => {\n\t\t\taddEvent(el, event, listener);\n\t\t});\n\t} else {\n\t\tAnimeClient.$(sel).forEach((el) => {\n\t\t\tdelegateEvent(el, target, event, listener);\n\t\t});\n\t}\n};\n\n// -------------------------------------------------------------------------\n// ! Ajax\n// -------------------------------------------------------------------------\n\n/**\n * Url encoding for non-get requests\n *\n * @param data\n * @returns {string}\n * @private\n */\nfunction ajaxSerialize(data) {\n\tlet pairs = [];\n\n\tObject.keys(data).forEach((name) => {\n\t\tlet value = data[name].toString();\n\n\t\tname = encodeURIComponent(name);\n\t\tvalue = encodeURIComponent(value);\n\n\t\tpairs.push(`${name}=${value}`);\n\t});\n\n\treturn pairs.join('&');\n}\n\n/**\n * Make an ajax request\n *\n * Config:{\n * \tdata: // data to send with the request\n * \ttype: // http verb of the request, defaults to GET\n * \tsuccess: // success callback\n * \terror: // error callback\n * }\n *\n * @param  {string} url - the url to request\n * @param  {Object} config  - the configuration object\n * @return {void}\n */\nAnimeClient.ajax = (url, config) => {\n\t// Set some sane defaults\n\tconst defaultConfig = {\n\t\tdata: {},\n\t\ttype: 'GET',\n\t\tdataType: '',\n\t\tsuccess: AnimeClient.noop,\n\t\tmimeType: 'application/x-www-form-urlencoded',\n\t\terror: AnimeClient.noop\n\t}\n\n\tconfig = {\n\t\t...defaultConfig,\n\t\t...config,\n\t}\n\n\tlet request = new XMLHttpRequest();\n\tlet method = String(config.type).toUpperCase();\n\n\tif (method === 'GET') {\n\t\turl += (url.match(/\\?/))\n\t\t\t? ajaxSerialize(config.data)\n\t\t\t: `?${ajaxSerialize(config.data)}`;\n\t}\n\n\trequest.open(method, url);\n\n\trequest.onreadystatechange = () => {\n\t\tif (request.readyState === 4) {\n\t\t\tlet responseText = '';\n\n\t\t\tif (request.responseType === 'json') {\n\t\t\t\tresponseText = JSON.parse(request.responseText);\n\t\t\t} else {\n\t\t\t\tresponseText = request.responseText;\n\t\t\t}\n\n\t\t\tif (request.status > 299) {\n\t\t\t\tconfig.error.call(null, request.status, responseText, request.response);\n\t\t\t} else {\n\t\t\t\tconfig.success.call(null, responseText, request.status);\n\t\t\t}\n\t\t}\n\t};\n\n\tif (config.dataType === 'json') {\n\t\tconfig.data = JSON.stringify(config.data);\n\t\tconfig.mimeType = 'application/json';\n\t} else {\n\t\tconfig.data = ajaxSerialize(config.data);\n\t}\n\n\trequest.setRequestHeader('Content-Type', config.mimeType);\n\n\tswitch (method) {\n\t\tcase 'GET':\n\t\t\trequest.send(null);\n\t\tbreak;\n\n\t\tdefault:\n\t\t\trequest.send(config.data);\n\t\tbreak;\n\t}\n};\n\n/**\n * Do a get request\n *\n * @param {string} url\n * @param {object|function} data\n * @param {function} [callback]\n */\nAnimeClient.get = (url, data, callback = null) => {\n\tif (callback === null) {\n\t\tcallback = data;\n\t\tdata = {};\n\t}\n\n\treturn AnimeClient.ajax(url, {\n\t\tdata,\n\t\tsuccess: callback\n\t});\n};\n\n// -------------------------------------------------------------------------\n// Export\n// -------------------------------------------------------------------------\n\nexport default AnimeClient;"],"names":[],"mappings":"IAuBG,EAAU,CAAV;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/public/js/src/anime.js b/public/js/src/anime.js
index c7118954..17c7676c 100644
--- a/public/js/src/anime.js
+++ b/public/js/src/anime.js
@@ -58,7 +58,7 @@ _.on('body.anime.list', 'click', '.plus_one', (e) => {
 	_.show(_.$('#loading-shadow')[ 0 ]);
 
 	// okay, lets actually make some changes!
-	_.ajax(_.url('/anime/update'), {
+	_.ajax(_.url('/anime/increment'), {
 		data,
 		dataType: 'json',
 		type: 'POST',
diff --git a/public/tools/build-js.js b/public/tools/build-js.js
index 1b4c27c0..eaea6389 100644
--- a/public/tools/build-js.js
+++ b/public/tools/build-js.js
@@ -6,7 +6,7 @@ const plugins = [
 		compilationLevel: 'SIMPLE', //'WHITESPACE_ONLY', //'ADVANCED',
 		createSourceMap: true,
 		env: 'BROWSER',
-		languageIn: 'ES6',
+		languageIn: 'ECMASCRIPT_2018',
 		languageOut: 'ES5'
 	})
 ];
diff --git a/src/API/Anilist/AnilistTrait.php b/src/API/Anilist/AnilistTrait.php
index be24213e..39b01d3b 100644
--- a/src/API/Anilist/AnilistTrait.php
+++ b/src/API/Anilist/AnilistTrait.php
@@ -145,6 +145,40 @@ trait AnilistTrait {
 		]);
 	}
 
+	public function mutateRequest (string $name, array $variables = []): Request
+	{
+		$file = realpath(__DIR__ . "/GraphQL/Mutations/{$name}.graphql");
+		if (!file_exists($file)) {
+			throw new \LogicException('GraphQL mutation file does not exist.');
+		}
+
+		// $query = str_replace(["\t", "\n"], ' ', file_get_contents($file));
+		$query = file_get_contents($file);
+
+		$body = [
+			'query' => $query
+		];
+
+		if (!empty($variables)) {
+			$body['variables'] = [];
+			foreach ($variables as $key => $val) {
+				$body['variables'][$key] = $val;
+			}
+		}
+
+		return $this->setUpRequest(Anilist::BASE_URL, [
+			'body' => $body,
+		]);
+	}
+
+	public function mutate (string $name, array $variables = []): array
+	{
+		$request = $this->mutateRequest($name, $variables);
+		$response = $this->getResponseFromRequest($request);
+
+		return Json::decode(wait($response->getBody()));
+	}
+
 	/**
 	 * Make a request
 	 *
@@ -174,6 +208,26 @@ trait AnilistTrait {
 		return $response;
 	}
 
+	private function getResponseFromRequest(Request $request): Response
+	{
+		$logger = NULL;
+		if ($this->getContainer()) {
+			$logger = $this->container->getLogger('anilist-request');
+		}
+
+		$response = wait((new HummingbirdClient)->request($request));
+
+		$logger->debug('Anilist response', [
+			'status' => $response->getStatus(),
+			'reason' => $response->getReason(),
+			'body' => $response->getBody(),
+			'headers' => $response->getHeaders(),
+			'requestHeaders' => $request->getHeaders(),
+		]);
+
+		return $response;
+	}
+
 	/**
 	 * Remove some boilerplate for post requests
 	 *
diff --git a/src/API/Anilist/GraphQL/Mutations/CreateMediaListEntry.graphql b/src/API/Anilist/GraphQL/Mutations/CreateMediaListEntry.graphql
new file mode 100644
index 00000000..78479c6d
--- /dev/null
+++ b/src/API/Anilist/GraphQL/Mutations/CreateMediaListEntry.graphql
@@ -0,0 +1,9 @@
+mutation (
+	$id: Int,
+	$status: MediaListStatus,
+) {
+	SaveMediaListEntry (
+		mediaId: $id
+		status: $status
+	)
+}
\ No newline at end of file
diff --git a/src/API/Anilist/GraphQL/Mutations/DeleteMediaListEntry.graphql b/src/API/Anilist/GraphQL/Mutations/DeleteMediaListEntry.graphql
new file mode 100644
index 00000000..b756abc4
--- /dev/null
+++ b/src/API/Anilist/GraphQL/Mutations/DeleteMediaListEntry.graphql
@@ -0,0 +1,7 @@
+mutation (
+$id: Int
+) {
+	DeleteMediaListEntry (
+		id: $id
+	)
+}
\ No newline at end of file
diff --git a/src/API/Anilist/GraphQL/Mutations/IncrementMediaListEntry.graphql b/src/API/Anilist/GraphQL/Mutations/IncrementMediaListEntry.graphql
new file mode 100644
index 00000000..1347050a
--- /dev/null
+++ b/src/API/Anilist/GraphQL/Mutations/IncrementMediaListEntry.graphql
@@ -0,0 +1,12 @@
+mutation (
+	$id: Int,
+	$progress: Int,
+) {
+	SaveMediaListEntry (
+		id: $id,
+		progress: $progress,
+	) {
+		id
+		progress
+	}
+}
diff --git a/src/API/Anilist/GraphQL/Mutations/UpdateAnimeListEntry.graphql b/src/API/Anilist/GraphQL/Mutations/UpdateAnimeListEntry.graphql
deleted file mode 100644
index 0e42bcc0..00000000
--- a/src/API/Anilist/GraphQL/Mutations/UpdateAnimeListEntry.graphql
+++ /dev/null
@@ -1,15 +0,0 @@
-mutation (
-	$id: Int,
-	$status: String,
-	$score: Int,
-	$progress: Int,
-	$repeat: Int
-) {
-	SaveMediaListEntry (
-		id: $id
-		status: $status
-		scoreRaw: $score
-		progress: $progress
-		repeat: $repeat
-	)
-}
\ No newline at end of file
diff --git a/src/API/Anilist/GraphQL/Mutations/UpdateMediaListEntry.graphql b/src/API/Anilist/GraphQL/Mutations/UpdateMediaListEntry.graphql
new file mode 100644
index 00000000..61fb8221
--- /dev/null
+++ b/src/API/Anilist/GraphQL/Mutations/UpdateMediaListEntry.graphql
@@ -0,0 +1,27 @@
+mutation (
+$id: Int,
+$status: MediaListStatus,
+$score: Int,
+$progress: Int,
+$repeat: Int,
+$private: Boolean,
+$notes: String
+) {
+	SaveMediaListEntry (
+		id: $id,
+		status: $status,
+		scoreRaw: $score,
+		progress: $progress,
+		repeat: $repeat,
+		private: $private,
+		notes: $notes
+	) {
+		id
+		status
+		score
+		progress
+		repeat
+		private
+		notes
+	}
+}
diff --git a/src/API/Anilist/GraphQL/Queries/AnimeIdByMalId.graphql b/src/API/Anilist/GraphQL/Queries/AnimeIdByMalId.graphql
deleted file mode 100644
index 86899951..00000000
--- a/src/API/Anilist/GraphQL/Queries/AnimeIdByMalId.graphql
+++ /dev/null
@@ -1,5 +0,0 @@
-query ($id: Int) {
-	Media (type: ANIME, malId: $id) {
-		id
-	}
-}
\ No newline at end of file
diff --git a/src/API/Anilist/GraphQL/Queries/ListItemIdByMalId.graphql b/src/API/Anilist/GraphQL/Queries/ListItemIdByMalId.graphql
new file mode 100644
index 00000000..b73567ba
--- /dev/null
+++ b/src/API/Anilist/GraphQL/Queries/ListItemIdByMalId.graphql
@@ -0,0 +1,9 @@
+query ($id: Int) {
+	Media (idMal: $id) {
+		mediaListEntry {
+			id
+			userId
+			mediaId
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/API/Anilist/GraphQL/Queries/MediaIdByMalId.graphql b/src/API/Anilist/GraphQL/Queries/MediaIdByMalId.graphql
new file mode 100644
index 00000000..3638eda8
--- /dev/null
+++ b/src/API/Anilist/GraphQL/Queries/MediaIdByMalId.graphql
@@ -0,0 +1,7 @@
+query ($id: Int, $type: MediaType) {
+	Media (type: $type, idMal: $id) {
+		id
+		userId
+		mediaId
+	}
+}
\ No newline at end of file
diff --git a/src/API/Anilist/GraphQL/Queries/MediaListItem.graphql b/src/API/Anilist/GraphQL/Queries/MediaListItem.graphql
new file mode 100644
index 00000000..f2fd5c05
--- /dev/null
+++ b/src/API/Anilist/GraphQL/Queries/MediaListItem.graphql
@@ -0,0 +1,14 @@
+query ($id: Int) {
+	MediaList (id: $id) {
+		id
+		userId
+		mediaId
+		status
+		score(format: POINT_10)
+		progress
+		progressVolumes
+		repeat
+		private
+		notes
+	}
+}
\ No newline at end of file
diff --git a/src/API/Anilist/ListItem.php b/src/API/Anilist/ListItem.php
index 62d34e7f..02d61c31 100644
--- a/src/API/Anilist/ListItem.php
+++ b/src/API/Anilist/ListItem.php
@@ -16,27 +16,27 @@
 
 namespace Aviat\AnimeClient\API\Anilist;
 
-use Amp\Artax\{FormBody, Request};
-use Aviat\AnimeClient\Types\AbstractType;
-use Aviat\Ion\Di\ContainerAware;
+use Amp\Artax\Request;
+
+use Aviat\AnimeClient\API\ListItemInterface;
+use Aviat\AnimeClient\API\Mapping\AnimeWatchingStatus;
+use Aviat\AnimeClient\Types\FormItemData;
 
 /**
  * CRUD operations for MAL list items
  */
-final class ListItem {
+final class ListItem implements ListItemInterface{
 	use AnilistTrait;
-	use ContainerAware;
 
 	/**
 	 * Create a list item
 	 *
 	 * @param array $data
-	 * @param string $type
 	 * @return Request
 	 */
-	public function create(array $data, string $type = 'anime'): Request
+	public function create(array $data): Request
 	{
-		// @TODO: implement
+		return $this->mutateRequest('CreateMediaListEntry', $data);
 	}
 
 	/**
@@ -51,21 +51,50 @@ final class ListItem {
 		// @TODO: implement
 	}
 
+	/**
+	 * Get the data for a list item
+	 *
+	 * @param string $id
+	 * @return array
+	 */
 	public function get(string $id): array
 	{
-		// @TODO: implement
+		return $this->runQuery('MediaListItem', ['id' => $id]);
+	}
+
+	/**
+	 * Increase the progress on the medium by 1
+	 *
+	 * @param string $id
+	 * @param FormItemData $data
+	 * @return Request
+	 */
+	public function increment(string $id, FormItemData $data): Request
+	{
+		return $this->mutateRequest('IncrementMediaListEntry', [
+			'id' => $id,
+			'progress' => $data['progress'],
+		]);
 	}
 
 	/**
 	 * Update a list item
 	 *
 	 * @param string $id
-	 * @param AbstractType $data
-	 * @param string $type
+	 * @param FormItemData $data
 	 * @return Request
 	 */
-	public function update(string $id, AbstractType $data, string $type = 'anime'): Request
+	public function update(string $id, FormItemData $data): Request
 	{
-		// @TODO: implement
+		// @TODO Handle weirdness with reWatching
+		return $this->mutateRequest('UpdateMediaListEntry', [
+			'id' => $id,
+			'status' => AnimeWatchingStatus::KITSU_TO_ANILIST[$data['status']],
+			'score' => $data['rating'] * 20,
+			'progress' => $data['progress'],
+			'repeat' => (int)$data['reconsumeCount'],
+			'private' => (bool)$data['private'],
+			'notes' => $data['notes'],
+		]);
 	}
 }
\ No newline at end of file
diff --git a/src/API/Anilist/Model.php b/src/API/Anilist/Model.php
index 0093421c..6e6fcc5b 100644
--- a/src/API/Anilist/Model.php
+++ b/src/API/Anilist/Model.php
@@ -39,7 +39,6 @@ final class Model
 	public function __construct(ListItem $listItem)
 	{
 		$this->listItem = $listItem;
-
 	}
 
 	public function getAnimeList(): array
@@ -67,19 +66,17 @@ final class Model
 	{
 		$createData = [];
 
+		$mediaId = $this->getMediaIdFromMalId($data['malId'], strtoupper($type));
+
 		if ($type === 'anime') {
 			$createData = [
-				'id' => $data['id'],
-				'data' => [
-					'status' => AnimeWatchingStatus::KITSU_TO_ANILIST[$data['status']]
-				]
+				'id' => $mediaId,
+				'status' => AnimeWatchingStatus::KITSU_TO_ANILIST[$data['status']],
 			];
 		} elseif ($type === 'manga') {
 			$createData = [
-				'id' => $data['id'],
-				'data' => [
-					'status' => MangaReadingStatus::KITSU_TO_ANILIST[$data['status']]
-				]
+				'id' => $mediaId,
+				'status' => MangaReadingStatus::KITSU_TO_ANILIST[$data['status']],
 			];
 		}
 
@@ -89,12 +86,26 @@ final class Model
 	/**
 	 * Get the data for a specific list item, generally for editing
 	 *
-	 * @param string $listId - The unique identifier of that list item
+	 * @param string $malId - The unique identifier of that list item
 	 * @return mixed
 	 */
-	public function getListItem(string $listId)
+	public function getListItem(string $malId): array
 	{
-		// @TODO: implement
+		$id = $this->getListIdFromMalId($malId);
+		return $this->listItem->get($id)['data']['MediaList'];
+	}
+
+	/**
+	 * Increase the watch count for the current list item
+	 *
+	 * @param FormItem $data
+	 * @return Request
+	 */
+	public function incrementListItem(FormItem $data): Request
+	{
+		$id = $this->getListIdFromMalId($data['mal_id']);
+
+		return $this->listItem->increment($id, $data['data']);
 	}
 
 	/**
@@ -105,7 +116,9 @@ final class Model
 	 */
 	public function updateListItem(FormItem $data): Request
 	{
-		return $this->listItem->update($data['id'], $data['data']);
+		$id = $this->getListIdFromMalId($data['mal_id']);
+
+		return $this->listItem->update($id, $data['data']);
 	}
 
 	/**
@@ -118,4 +131,31 @@ final class Model
 	{
 		return $this->listItem->delete($id);
 	}
+
+	/**
+	 * Get the id of the specific list entry from the malId
+	 *
+	 * @param string $malId
+	 * @return string
+	 */
+	public function getListIdFromMalId(string $malId): string
+	{
+		$info = $this->runQuery('ListItemIdByMalId', ['id' => $malId]);
+		return (string)$info['data']['Media']['mediaListEntry']['id'];
+	}
+
+	/**
+	 * Get the Anilist media id from the malId
+	 *
+	 * @param string $malId
+	 * @param string $type
+	 * @return array
+	 */
+	private function getMediaIdFromMalId(string $malId, string $type = 'ANIME'): array
+	{
+		return $this->runQuery('MediaIdByMalId', [
+			'id' => $malId,
+			'type' => $type
+		]);
+	}
 }
\ No newline at end of file
diff --git a/src/API/Anilist/Transformer/AnimeListTransformer.php b/src/API/Anilist/Transformer/AnimeListTransformer.php
index 55db05a6..130e1e2f 100644
--- a/src/API/Anilist/Transformer/AnimeListTransformer.php
+++ b/src/API/Anilist/Transformer/AnimeListTransformer.php
@@ -16,14 +16,18 @@
 
 namespace Aviat\AnimeClient\API\Anilist\Transformer;
 
-use Aviat\AnimeClient\Types\AnimeFormItem;
+use Aviat\AnimeClient\Types\{AnimeListItem, AnimeFormItem};
 use Aviat\Ion\Transformer\AbstractTransformer;
 
 class AnimeListTransformer extends AbstractTransformer {
 
-	public function transform($item)
+	public function transform($item): AnimeListItem
 	{
+		dump($item); die();
 
+		return new AnimeListItem([
+
+		]);
 	}
 
 	public function untransform(array $item): AnimeFormItem
diff --git a/src/API/Kitsu/ListItem.php b/src/API/Kitsu/ListItem.php
index 15f65e27..55e42af3 100644
--- a/src/API/Kitsu/ListItem.php
+++ b/src/API/Kitsu/ListItem.php
@@ -112,6 +112,11 @@ final class ListItem implements ListItemInterface {
 		return Json::decode(wait($response->getBody()));
 	}
 
+	public function increment(string $id, FormItemData $data): Request
+	{
+		return $this->update($id, $data);
+	}
+
 	public function update(string $id, FormItemData $data): Request
 	{
 		$authHeader = $this->getAuthHeader();
diff --git a/src/API/Kitsu/Model.php b/src/API/Kitsu/Model.php
index a5f643e9..be892a3c 100644
--- a/src/API/Kitsu/Model.php
+++ b/src/API/Kitsu/Model.php
@@ -837,6 +837,17 @@ final class Model {
 		}
 	}
 
+	/**
+	 * Increase the progress count for a list item
+	 *
+	 * @param FormItem $data
+	 * @return Request
+	 */
+	public function incrementListItem(FormItem $data): Request
+	{
+		return $this->listItem->increment($data['id'], $data['data']);
+	}
+
 	/**
 	 * Modify a list item
 	 *
diff --git a/src/API/Kitsu/Transformer/AnimeListTransformer.php b/src/API/Kitsu/Transformer/AnimeListTransformer.php
index d88abfe7..356d8315 100644
--- a/src/API/Kitsu/Transformer/AnimeListTransformer.php
+++ b/src/API/Kitsu/Transformer/AnimeListTransformer.php
@@ -20,7 +20,6 @@ use Aviat\AnimeClient\API\Kitsu;
 use Aviat\AnimeClient\Types\{
 	Anime,
 	AnimeFormItem,
-	AnimeFormItemData,
 	AnimeListItem
 };
 use Aviat\Ion\Transformer\AbstractTransformer;
@@ -124,6 +123,7 @@ final class AnimeListTransformer extends AbstractTransformer {
 
 		$untransformed = new AnimeFormItem([
 			'id' => $item['id'],
+			'anilist_item_id' => $item['anilist_item_id'] ?? NULL,
 			'mal_id' => $item['mal_id'] ?? NULL,
 			'data' => [
 				'status' => $item['watching_status'],
diff --git a/src/API/ListItemInterface.php b/src/API/ListItemInterface.php
index a721716e..ec8f3b97 100644
--- a/src/API/ListItemInterface.php
+++ b/src/API/ListItemInterface.php
@@ -40,6 +40,15 @@ interface ListItemInterface {
 	 */
 	public function get(string $id): array;
 
+	/**
+	 * Increase progress on a list item
+	 *
+	 * @param string $id
+	 * @param FormItemData $data
+	 * @return Request
+	 */
+	public function increment(string $id, FormItemData $data): Request;
+
 	/**
 	 * Update a list item
 	 *
diff --git a/src/Controller.php b/src/Controller.php
index 6de79133..4306a525 100644
--- a/src/Controller.php
+++ b/src/Controller.php
@@ -229,7 +229,7 @@ class Controller {
 			throw new InvalidArgumentException("Invalid template : {$template}");
 		}
 
-		return $view->renderTemplate($templatePath, (array)$data);
+		return $view->renderTemplate($templatePath, $data);
 	}
 
 	/**
@@ -345,7 +345,7 @@ class Controller {
 	/**
 	 * Helper for consistent page titles
 	 *
-	 * @param string[] ...$parts Title segments
+	 * @param string[] $parts Title segments
 	 * @return string
 	 */
 	public function formatTitle(string ...$parts) : string
diff --git a/src/Controller/Anime.php b/src/Controller/Anime.php
index 227ae100..ecbc3c66 100644
--- a/src/Controller/Anime.php
+++ b/src/Controller/Anime.php
@@ -150,14 +150,10 @@ final class Anime extends BaseController {
 	/**
 	 * Form to edit details about a series
 	 *
-	 * @param int $id
+	 * @param string $id
 	 * @param string $status
-	 * @throws \Aviat\Ion\Di\ContainerException
-	 * @throws \Aviat\Ion\Di\NotFoundException
-	 * @throws \InvalidArgumentException
-	 * @return void
 	 */
-	public function edit($id, $status = 'all'): void
+	public function edit(string $id, $status = 'all'): void
 	{
 		$item = $this->model->getLibraryItem($id);
 		$this->setSessionRedirect();
@@ -217,6 +213,28 @@ final class Anime extends BaseController {
 		$this->sessionRedirect();
 	}
 
+	/**
+	 * Increase the watched count for an anime item
+	 *
+	 * @return void
+	 */
+	public function increment(): void
+	{
+		if (stripos($this->request->getHeader('content-type')[0], 'application/json') !== FALSE)
+		{
+			$data = Json::decode((string)$this->request->getBody());
+		}
+		else
+		{
+			$data = $this->request->getParsedBody();
+		}
+
+		$response = $this->model->incrementLibraryItem(new AnimeFormItem($data));
+
+		$this->cache->clear();
+		$this->outputJSON($response['body'], $response['statusCode']);
+	}
+
 	/**
 	 * Update an anime item
 	 *
diff --git a/src/MenuGenerator.php b/src/MenuGenerator.php
index 3e02879b..bdf09225 100644
--- a/src/MenuGenerator.php
+++ b/src/MenuGenerator.php
@@ -62,7 +62,7 @@ final class MenuGenerator extends UrlGenerator {
 	 * @param array $menus
 	 * @return array
 	 */
-	protected function parseConfig(array $menus)
+	protected function parseConfig(array $menus) : array
 	{
 		$parsed = [];
 
@@ -86,7 +86,7 @@ final class MenuGenerator extends UrlGenerator {
 	 * @throws ConfigException
 	 * @return string
 	 */
-	public function generate($menu)
+	public function generate($menu) : string
 	{
 		$menus = $this->config->get('menus');
 		$parsedConfig = $this->parseConfig($menus);
@@ -114,7 +114,7 @@ final class MenuGenerator extends UrlGenerator {
 		}
 
 		// Create the menu html
-		return $this->helper->ul();
+		return (string) $this->helper->ul();
 	}
 }
 // End of MenuGenerator.php
\ No newline at end of file
diff --git a/src/Model/Anime.php b/src/Model/Anime.php
index cde845bb..c3b461d4 100644
--- a/src/Model/Anime.php
+++ b/src/Model/Anime.php
@@ -30,6 +30,14 @@ use Aviat\Ion\Json;
  * Model for handling requests dealing with the anime list
  */
 class Anime extends API {
+
+	/**
+	 * Model for making requests to Anilist API
+	 *
+	 * @var \Aviat\AnimeClient\API\Anilist\Model
+	 */
+	protected $anilistModel;
+
 	/**
 	 * Model for making requests to Kitsu API
 	 *
@@ -44,6 +52,7 @@ class Anime extends API {
 	 */
 	public function __construct(ContainerInterface $container)
 	{
+		$this->anilistModel = $container->get('anilist-model');
 		$this->kitsuModel = $container->get('kitsu-model');
 	}
 
@@ -125,7 +134,16 @@ class Anime extends API {
 	 */
 	public function getLibraryItem(string $itemId): AnimeListItem
 	{
-		return $this->kitsuModel->getListItem($itemId);
+		$item = $this->kitsuModel->getListItem($itemId);
+		$array = $item->toArray();
+
+		if ($item->mal_id !== NULL)
+		{
+			$anilistInfo = $this->anilistModel->getListItem($item['mal_id']);
+			$array['anilist_item_id'] = $anilistInfo['id'];
+		}
+
+		return new AnimeListItem($array);
 	}
 
 	/**
@@ -144,6 +162,35 @@ class Anime extends API {
 		return count($results) > 0;
 	}
 
+	/**
+	 * Increment progress for the specified anime
+	 *
+	 * @param AnimeFormItem $data
+	 * @return array
+	 */
+	public function incrementLibraryItem(AnimeFormItem $data): array
+	{
+		$requester = new ParallelAPIRequest();
+		$requester->addRequest($this->kitsuModel->incrementListItem($data), 'kitsu');
+
+		$array = $data->toArray();
+
+		// @TODO Make sure Anilist integration is optional
+		if (array_key_exists('mal_id', $array)) {
+			$requester->addRequest($this->anilistModel->incrementListItem($data), 'anilist');
+		}
+
+		$results = $requester->makeRequests();
+
+		$body = Json::decode($results['kitsu']);
+		$statusCode = array_key_exists('error', $body) ? 400 : 200;
+
+		return [
+			'body' => Json::decode($results['kitsu']),
+			'statusCode' => $statusCode
+		];
+	}
+
 	/**
 	 * Update a list entry
 	 *
@@ -155,7 +202,16 @@ class Anime extends API {
 		$requester = new ParallelAPIRequest();
 		$requester->addRequest($this->kitsuModel->updateListItem($data), 'kitsu');
 
+		$array = $data->toArray();
+
+		// @TODO Make sure Anilist integration is optional
+		if (array_key_exists('mal_id', $array))
+		{
+			$requester->addRequest($this->anilistModel->updateListItem($data), 'anilist');
+		}
+
 		$results = $requester->makeRequests();
+
 		$body = Json::decode($results['kitsu']);
 		$statusCode = array_key_exists('error', $body) ? 400: 200;
 
diff --git a/src/Types/AnimeListItem.php b/src/Types/AnimeListItem.php
index 269bc7b8..d2e75384 100644
--- a/src/Types/AnimeListItem.php
+++ b/src/Types/AnimeListItem.php
@@ -22,6 +22,7 @@ namespace Aviat\AnimeClient\Types;
 final class AnimeListItem extends AbstractType {
 	public $id;
 	public $mal_id;
+	public $anilist_item_id;
 	public $episodes = [
 		'length' => 0,
 		'total' => 0,
@@ -33,10 +34,10 @@ final class AnimeListItem extends AbstractType {
 		'ended' => '',
 	];
 	public $anime;
-	public $watching_status;
 	public $notes;
+	public $private;
 	public $rewatching;
 	public $rewatched;
 	public $user_rating;
-	public $private;
+	public $watching_status;
 }
diff --git a/src/Types/Config.php b/src/Types/Config.php
index 24cd5e74..f3044501 100644
--- a/src/Types/Config.php
+++ b/src/Types/Config.php
@@ -44,6 +44,8 @@ class Config extends AbstractType {
 	public function setAnilist ($data): void
 	{
 		$this->anilist = new class($data) extends AbstractType {
+			public $enabled;
+
 			public $client_id;
 			public $client_secret;
 			public $redirect_uri;
diff --git a/src/Types/FormItem.php b/src/Types/FormItem.php
index 9c1ef84b..94588aa4 100644
--- a/src/Types/FormItem.php
+++ b/src/Types/FormItem.php
@@ -21,6 +21,7 @@ namespace Aviat\AnimeClient\Types;
  */
 abstract class FormItem extends AbstractType {
 	public $id;
+	public $anilist_item_id;
 	public $mal_id;
 	public $data;