Move more code to ItemService, where it belongs

Closes #31

Author: ilyvion

assets/js/constants.js

@@ -62,6 +62,7 @@ const constants = {
 	setNoTitleUrl: comicDataUrl + 'setnotitle',
 	setNoTaglineUrl: comicDataUrl + 'setnotagline',
 
+	itemImageUrl: itemDataUrl + 'image/',
 	itemFriendDataUrl: itemDataUrl + 'friends/',
 	itemLocationDataUrl: itemDataUrl + 'locations/',
 	setItemDataPropertyUrl: itemDataUrl + 'setproperty',

assets/js/modules/angular/api/itemData.js

@@ -47,6 +47,7 @@ export type DecoratedItemData = ItemData & {
 	highlightColor: string;
 	locations: ItemRelationData[];
 	friends: ItemRelationData[];
+	imageUrls: string[];
 };
 
 export type ItemImageData = {

assets/js/modules/angular/directives/qcExtraDirective.js

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import type { AngularModule, $Log, $Http, $Sce } from 'angular';
+import type { AngularModule, $Log, $Sce } from 'angular';
 
 import GM from 'greasemonkey';
 import angular from 'angular';

assets/js/modules/angular/directives/qcItemDetailsDirective.js

@@ -18,7 +18,7 @@
 
 import angular from 'angular';
 
-import type { AngularModule, $Log, $Http } from 'angular';
+import type { AngularModule, $Log } from 'angular';
 
 import constants from '../../../constants';
 import settings, { Settings } from '../../settings';
@@ -29,6 +29,7 @@ import { convertDataUritoBlob } from '../util';
 import type { $DecoratedScope } from '../decorateScope';
 import type { ColorService } from '../services/colorService';
 import type { ComicService } from '../services/comicService';
+import type { ItemService } from '../services/itemService';
 import type { MessageReportingService } from '../services/messageReportingService';
 import type { StyleService } from '../services/styleService';
 import type { DecoratedItemData, ItemRelationData, ItemImageData } from '../api/itemData';
@@ -37,14 +38,14 @@ export class ItemDetailsController {
 	static $inject: string[];
 
 	$log: $Log;
-	$http: $Http;
 	$scope: $DecoratedScope<ItemDetailsController>;
 	colorService: ColorService;
 	comicService: ComicService;
 	messageReportingService: MessageReportingService;
 	styleService: StyleService;
+	itemService: ItemService;
 
-	isLoading: number;
+	isLoading: boolean;
 	isUpdating: boolean;
 	settings: Settings;
 	itemData: DecoratedItemData;
@@ -57,7 +58,7 @@ export class ItemDetailsController {
 
 	constructor(
 		$log: $Log,
-		$http: $Http,
+		itemService: ItemService,
 		$scope: $DecoratedScope<ItemDetailsController>,
 		colorService: ColorService,
 		comicService: ComicService,
@@ -67,14 +68,14 @@ export class ItemDetailsController {
 		$log.debug('START ItemDetailsController');
 
 		this.$log = $log;
-		this.$http = $http;
+		this.itemService = itemService;
 		this.$scope = $scope;
 		this.colorService = colorService;
 		this.comicService = comicService;
 		this.messageReportingService = messageReportingService;
 		this.styleService = styleService;
 
-		this.isLoading = 1;
+		this.isLoading = true;
 		this.isUpdating = false;
 		this.settings = settings;
 
@@ -95,89 +96,30 @@ export class ItemDetailsController {
 		this.$log.debug('ItemDetailsController::showModal() - item id:',
 			itemId);
 
-		function handleRelationData(response): ?ItemRelationData[] {
-			if (response.status === 200) {
-				const relationData = (response.data: ItemRelationData[]);
-
-				$.each(relationData, (_: number, relation) => {
-					relation.percentage = relation.count /
-						self.itemData.appearances * 100;
-				});
-
-				return relationData;
-			}
-			return null;
-		}
-
-		function handleItemFriendsData(response) {
-			let friends = handleRelationData(response);
-			self.$scope.safeApply(() => {
-				self.itemData.friends = friends || [];
-				self.isLoading--;
-			});
-		}
-
-		function handleItemLocationsData(response) {
-			let locations = handleRelationData(response);
-			self.$scope.safeApply(() => {
-				self.itemData.locations = locations || [];
-				self.isLoading--;
-			});
-		}
-
-		function handleItemImageData(response) {
-			if (response.status === 200) {
-				let images = response.data;
-				let imagePaths: string[] = [];
-				$.each(images, (_: number, image: ItemImageData) => {
-					imagePaths.push(`${constants.itemDataUrl}image/${image.id}`);
-				});
-				self.$scope.safeApply(() => {
-					self.imagePaths = imagePaths;
-					self.currentImagePath = 0;
-					self.isLoading--;
-				});
-			}
-		}
-
 		this.itemData = (({}: any): DecoratedItemData);
-		this.isLoading = 1;
+		this.isLoading = true;
 
 		this.imagePaths = [];
 		this.currentImagePath = 0;
 		this.isImagePreview = false;
 		this.imageFile = null;
 		this.imageFileInfo = null;
 
-		const itemDataResponse = await this.$http.get(constants.itemDataUrl + itemId);
-		if (itemDataResponse.status === 200) {
-			const itemData = (itemDataResponse.data: DecoratedItemData);
-
-			itemData.highlightColor = this.colorService
-				.createTintOrShade(itemData.color);
-
+		const itemData = await this.itemService.getItemData(itemId);
+		if (itemData) {
 			this.$log.debug('qcItemDetails::showModal() - ' +
 				'item data:', itemData);
 
-			this.isLoading += 2;
-			const friendDataRequest = this.$http.get(constants.itemFriendDataUrl + itemId);
-			const locationDataRequest = this.$http.get(constants.itemLocationDataUrl + itemId);
-			this.$http.get(constants.itemFriendDataUrl + itemId)
-				.then(handleItemFriendsData);
-			this.$http.get(constants.itemLocationDataUrl + itemId)
-				.then(handleItemLocationsData);
-			if (itemData.hasImage) {
-				this.isLoading++;
-				this.$http.get(constants.itemDataUrl + itemId + '/images')
-					.then(handleItemImageData);
-			}
-
-			// If the color changes, also update the
-			// highlight color
 			this.$scope.safeApply(() => {
 				this.itemData = itemData;
-				this.isLoading--;
+				this.isLoading = false;
+				this.isUpdating = false;
 
+				this.imagePaths = itemData.imageUrls;
+				this.currentImagePath = 0;
+
+				// If the color changes, also update the
+				// highlight color
 				this.$scope.$watch(() => {
 					return this.itemData.color;
 				}, () => {
@@ -188,16 +130,7 @@ export class ItemDetailsController {
 				});
 			});
 		} else {
-			this.$scope.safeApply(() => {
-				this.isLoading--;
-			});
-			if (itemDataResponse.status !== 503) {
-				this.messageReportingService.reportError(itemDataResponse.data);
-			} else {
-				this.messageReportingService.reportError(
-					constants.messages.maintenance);
-				this.close();
-			}
+			this.close();
 		}
 	}
 
@@ -231,37 +164,19 @@ export class ItemDetailsController {
 		this.$scope.safeApply(() => {
 			this.isUpdating = true;
 		});
-		const data = {
-			token: settings.values.editModeToken,
-			item: this.itemData.id,
-			property: property,
-			value: this.itemData[property]
-		};
-		try {
-			const response = await this.$http.post(constants.setItemDataPropertyUrl, data);
-			this.$scope.safeApply(() => {
-				this.isUpdating = false;
-			});
-
-			if (response.status === 200) {
-				if (property === 'color') {
-					this.$log.debug('ItemDetailsController::update() - ' +
-						'update item color');
-					this.styleService.removeItemStyle(
-						this.itemData.id);
-				}
-			} else {
-				this.$scope.safeApply(() => {
-					this.isUpdating = false;
-				});
+		const success = await this.itemService.updateProperty(this.itemData.id, property, this.itemData[property]);
+		this.$scope.safeApply(() => {
+			this.isUpdating = false;
+		});
+		if (success) {
+			if (property === 'color') {
+				this.$log.debug('ItemDetailsController::update() - ' +
+					'update item color');
+				this.styleService.removeItemStyle(
+					this.itemData.id);
 			}
-			return this._onSuccessRefreshElseErrorLog(response);
-		}
-		catch (r) {
-			this.$scope.safeApply(() => {
-				this.isUpdating = false;
-			});
-			return this._onErrorLog(r);
+			this.comicService.refreshComicData();
+			this._getItemDetails();
 		}
 	}
 
@@ -280,22 +195,19 @@ export class ItemDetailsController {
 		}
 	}
 
-	uploadImage() {
+	async uploadImage() {
 		if (this.imageFile && this.imageFileInfo.type == 'image/png') {
 			const imageBlob = convertDataUritoBlob(this.imageFile);
 
-			const formData = new FormData();
-			formData.append('ItemId', String(this.itemData.id));
-			formData.append('Image', imageBlob, this.imageFileInfo.name);
-			formData.append('Token', settings.values.editModeToken);
-
-			this.$http.post(constants.itemDataUrl + 'image/upload', formData, { contentType: undefined, dataTransform: (d) => d })
-				.then(() => {
-					this._getItemDetails();
-				}).catch((error) => {
-					self.messageReportingService.reportError(
-						error);
-				});
+			this.$scope.safeApply(() => {
+				this.isUpdating = true;
+			});
+			const success = await this.itemService.uploadImage(this.itemData.id, imageBlob, this.imageFileInfo.name);
+			if (success) {
+				this._getItemDetails();
+			}
+		} else {
+			this.messageReportingService.reportError('Only PNG images are supported');
 		}
 	}
 
@@ -313,7 +225,7 @@ export class ItemDetailsController {
 		}
 	}
 }
-ItemDetailsController.$inject = ['$log', '$http', '$scope', 'colorService',
+ItemDetailsController.$inject = ['$log', 'itemService', '$scope', 'colorService',
 	'comicService', 'messageReportingService', 'styleService'];
 
 export default function (app: AngularModule) {