[DEV] better interface GUI for edition of a video

back/src/data_interface.py

@@ -21,7 +21,9 @@ def dict_factory(cursor, row):
 	d = {}
 	for idx, col in enumerate(cursor.description):
 		if col[0] == "covers":
-			if row[idx] != None:
+			if row[idx] == "":
+				d[col[0]] = None
+			elif row[idx] != None:
 				d[col[0]] = row[idx].split("/")
 			else:
 				d[col[0]] = None
@@ -142,7 +144,7 @@ class DataInterface():
 		if self.need_save == False:
 			return
 		debug.warning("Save bdd: " + self.file)
-		conn.commit()
+		self.conn.commit()
 	
 	def gets(self, filter=None):
 		debug.info("gets " + self.name)
@@ -189,23 +191,37 @@ class DataInterface():
 				return elem
 		debug.warning("not found element: " + str(len(self.bdd)))
 		"""
+		self.mark_to_store();
 		return None
 	
 	def delete(self, _id):
 		debug.info("delete " + self.name + ": " + str(_id))
+		cursor = self.conn.cursor()
 		req = (_id,)
 		cursor.execute('UPDATE data SET deleted=1 WHERE id=?', req)
+		self.mark_to_store();
 		return True
 	
 	def put(self, _id, _value):
-		request = 'UPDATE data WHERE id=? SET'
+		debug.info("put in " + self.name + ": " + str(_id))
-		list_data = [_id]
+		cursor = self.conn.cursor()
+		request = 'UPDATE data SET'
+		list_data = []
+		first = True;
 		for elem in _value.keys():
 			if elem == "id":
 				continue
+			if first == True:
+				first = False
+			else:
+				request += " , "
 			list_data.append(_value[elem])
 			request += " '" + elem + "' = ?"
+		request += " WHERE id = ? "
+		list_data.append(_id)
+		debug.info("Request executed : '" + request + "'")
 		cursor.execute(request, list_data)
+		self.mark_to_store();
 		
 		"""
 		debug.info("put " + self.name + ": " + str(_id))
@@ -236,6 +252,7 @@ class DataInterface():
 		self.bdd.append(_value)
 		self.mark_to_store()
 		"""
+		self.mark_to_store();
 		return _value
 	
 	# TODO : rework this

front/src/app/scene/video-edit/video-edit.html

@@ -7,20 +7,21 @@
 			<div class="input">
 				<input type="text"
 				       placeholder="Name of the Media"
-				       [value]="name"
+				       [value]="data.name"
 				       (input)="onName($event.target.value)"
 				       />
 			</div>
 		</div>
-		<div class="request_raw">
+		<div class="request_raw2">
 			<div class="label">
 				Description:
 			</div>
 			<div class="input">
-				<input type="text"
+				<textarea (input)="onDescription($event.target.value)" placeholder="Description of the Media" rows=6>{{data.description}}</textarea>
+				<!--<input type="text"
 				       placeholder="Description of the Media"
-				       [value]="description"
+				       [value]="data.description"
-				       (input)="onDescription($event.target.value)"/>
+				       (input)="onDescription($event.target.value)"/>-->
 			</div>
 		</div>
 		<div class="request_raw">
@@ -28,9 +29,11 @@
 				Date:
 			</div>
 			<div class="input">
-				<input type="text"
+				<input type="number"
-				       [value]="time"
+				       pattern="[0-9]{0-4}"
-				       (input)="onDate($event.target.value)"/>
+				       placeholder="2112"
+				       [value]="data.time"
+				       (input)="onDate($event.target)"/>
 			</div>
 		</div>
 		<div class="request_raw">
@@ -38,7 +41,7 @@
 				Type:
 			</div>
 			<div class="input">
-				<select [ngModel]="type_id"
+				<select [ngModel]="data.type_id"
 				        (ngModelChange)="onChangeType($event)">
 					<option *ngFor="let element of listType" [ngValue]="element.value">{{element.label}}</option>
 				</select>
@@ -49,7 +52,7 @@
 				Univers:
 			</div>
 			<div class="input">
-				<select [ngModel]="univers_id"
+				<select [ngModel]="data.univers_id"
 				        (ngModelChange)="onChangeUnivers($event)">
 					<option *ngFor="let element of listUnivers" [ngValue]="element.value">{{element.label}}</option>
 				</select>
@@ -60,7 +63,7 @@
 				Group:
 			</div>
 			<div class="input">
-				<select [ngModel]="group_id"
+				<select [ngModel]="data.group_id"
 				        (ngModelChange)="onChangeGroup($event)">
 					<option *ngFor="let element of listGroup" [ngValue]="element.value">{{element.label}}</option>
 				</select>
@@ -71,7 +74,7 @@
 				Saison:
 			</div>
 			<div class="input">
-				<select [ngModel]="saison_id"
+				<select [ngModel]="data.saison_id"
 				        (ngModelChange)="onChangeSaison($event)">
 					<option *ngFor="let element of listSaison" [ngValue]="element.value">{{element.label}}</option>
 				</select>
@@ -82,9 +85,11 @@
 				Episode:
 			</div>
 			<div class="input">
-				<input type="text"
+				<input type="number"
-				       [value]="episode"
+				       pattern="[0-9]{0-4}"
-				       (input)="onEpisode($event.target.value)"/>
+				       placeholder="5"
+				       [value]="data.episode"
+				       (input)="onEpisode($event.target)"/>
 			</div>
 		</div>
 		<div class="request_raw">
@@ -92,7 +97,7 @@
 				Data ID:
 			</div>
 			<div class="input">
-				{{data_id}}
+				{{data.data_id}}
 			</div>
 		</div>
 		<div class="request_raw">
@@ -104,7 +109,7 @@
 			</div>
 		</div>
 		<div class="send_value">
-			<button class="button fill-x color-button-validate color-shadow-black" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button>
+			<button class="button fill-x color-button-validate color-shadow-black" [disabled]="!need_send" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button>
 		</div>
 		<div class="request_raw">
 			<div class="label">

front/src/app/scene/video-edit/video-edit.less

@@ -9,6 +9,28 @@
 	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
 }
 
+.request_raw2 {
+	width: 90%;
+	margin: 0 auto;
+	height: 160px;
+	.label {
+		width: 20%;
+		margin-right: 10px;
+		text-align: right;
+		float: left;
+		display: block;
+	}
+	.input {
+		width: 75%;
+		float: left;
+		display: block;
+		textarea {
+			width: 100%;
+			font-size: 20px;
+			resize: none;
+		}
+	}
+}
 .request_raw {
 	width: 90%;
 	margin: 0 auto;
@@ -32,6 +54,10 @@
 			width: 100%;
 			font-size: 20px;
 		}
+		textarea {
+			width: 100%;
+			font-size: 20px;
+		}
 	}
 	.cover_div {
 		//float: left;

front/src/app/scene/video-edit/video-edit.ts

@@ -30,6 +30,36 @@ export class ElementList {
 	}
 }
 
+
+class DataToSend {
+	name:string = ""
+	description:string = ""
+	episode:number = undefined
+	univers_id:number = undefined
+	group_id:number = undefined
+	saison_id:number = undefined
+	data_id:number = -1
+	time:number = undefined
+	type_id:number = undefined
+	covers:Array<number> = [];
+	generated_name:string = ""
+	clone() {
+		let tmp = new DataToSend();
+		tmp.name = this.name
+		tmp.description = this.description
+		tmp.episode = this.episode
+		tmp.univers_id = this.univers_id
+		tmp.group_id = this.group_id
+		tmp.saison_id = this.saison_id
+		tmp.data_id = this.data_id
+		tmp.time = this.time
+		tmp.type_id = this.type_id
+		tmp.covers = this.covers
+		tmp.generated_name = this.generated_name
+		return tmp;
+	}
+};
+
 @Component({
 	selector: 'app-video-edit',
 	templateUrl: './video-edit.html',
@@ -43,19 +73,12 @@ export class VideoEditComponent implements OnInit {
 	
 	error:string = ""
 	
-	name:string = ""
+	data:DataToSend = new DataToSend();
-	description:string = ""
+	data_ori:DataToSend = new DataToSend();
-	episode:number = undefined
-	univers_id:number = undefined
-	group_id:number = undefined
-	saison_id:number = undefined
-	data_id:number = -1
-	time:number = undefined
-	type_id:number = undefined
-	generated_name:string = ""
 	coverFile:File;
 	upload_file_value:string = ""
 	selectedFiles:FileList;
+	need_send:boolean = false;
 	
 	covers_display:Array<string> = [];
 	
@@ -85,6 +108,35 @@ export class VideoEditComponent implements OnInit {
 		
 	}
 	
+	updateNeedSend(): boolean {
+		this.need_send = false;
+		if (this.data.name != this.data_ori.name) {
+			this.need_send = true;
+		}
+		if (this.data.description != this.data_ori.description) {
+			this.need_send = true;
+		}
+		if (this.data.episode != this.data_ori.episode) {
+			this.need_send = true;
+		}
+		if (this.data.time != this.data_ori.time) {
+			this.need_send = true;
+		}
+		if (this.data.type_id != this.data_ori.type_id) {
+			this.need_send = true;
+		}
+		if (this.data.univers_id != this.data_ori.univers_id) {
+			this.need_send = true;
+		}
+		if (this.data.group_id != this.data_ori.group_id) {
+			this.need_send = true;
+		}
+		if (this.data.saison_id != this.data_ori.saison_id) {
+			this.need_send = true;
+		}
+		return this.need_send;
+	}
+	
 	ngOnInit() {
 		this.id_video = parseInt(this.route.snapshot.paramMap.get('video_id'));
 		this.arianeService.setVideo(this.id_video);
@@ -120,47 +172,45 @@ export class VideoEditComponent implements OnInit {
 		this.videoService.get(this.id_video)
 			.then(function(response) {
 				console.log("get response of video : " + JSON.stringify(response, null, 2));
-				self.name = response.name;
+				self.data.name = response.name;
-				self.description = response.description;
+				self.data.description = response.description;
-				self.episode = response.episode;
+				self.data.episode = response.episode;
-				self.univers_id = response.univers_id;
+				self.data.univers_id = response.univers_id;
-				self.data_id = response.data_id;
+				self.data.data_id = response.data_id;
-				self.time = response.time;
+				self.data.time = response.time;
-				self.generated_name = response.generated_name;
+				self.data.generated_name = response.generated_name;
 				self.onChangeType(response.type_id);
 				self.onChangeGroup(response.group_id);
-				self.saison_id = response.saison_id;
+				self.data.saison_id = response.saison_id;
+				self.data_ori = self.data.clone();
 				if (response.covers !== undefined && response.covers !== null) {
 					for (let iii=0; iii<response.covers.length; iii++) {
+						self.data.covers.push(response.covers[iii]);
 						self.covers_display.push(self.videoService.getCoverUrl(response.covers[iii]));
 					}
 				} else {
 					self.covers_display = []
 				}
+				self.updateNeedSend();
 				console.log("covers_list : " + JSON.stringify(self.covers_display, null, 2));
 			}).catch(function(response) {
 				self.error = "Can not get the data";
-				self.name = "";
+				self.data = new DataToSend();
-				self.description = "";
-				self.episode = undefined;
-				self.group_id = undefined;
-				self.univers_id = undefined;
-				self.saison_id = undefined;
-				self.data_id = -1;
-				self.time = undefined;
-				self.generated_name = "";
 				self.covers_display = [];
+				self.data_ori = self.data.clone();
+				self.updateNeedSend();
 			});
 	}
 	
 	onChangeType(_value:any):void {
 		console.log("Change requested of type ... " + _value);
-		this.type_id = _value;
+		this.data.type_id = _value;
-		this.group_id = null;
+		this.data.group_id = null;
-		this.saison_id = null;
+		this.data.saison_id = null;
 		//this.listGroup = [{value: undefined, label: '---'}];
 		this.listSaison = [{value: undefined, label: '---'}];
 		let self = this;
+		this.updateNeedSend();
 		/*
 		if (this.type_id != undefined) {
 			self.typeService.getSubGroup(this.type_id, ["id", "name"])
@@ -176,16 +226,17 @@ export class VideoEditComponent implements OnInit {
 	}
 	
 	onChangeUnivers(_value:any):void {
-		this.univers_id = _value;
+		this.data.univers_id = _value;
+		this.updateNeedSend();
 	}
 	
 	onChangeGroup(_value:any):void {
-		this.group_id = _value;
+		this.data.group_id = _value;
-		this.saison_id = null;
+		this.data.saison_id = null;
 		this.listSaison = [{value: undefined, label: '---'}];
 		let self = this;
-		if (this.group_id != undefined) {
+		if (this.data.group_id != undefined) {
-			self.groupService.getSaison(this.group_id, ["id", "number"])
+			self.groupService.getSaison(this.data.group_id, ["id", "number"])
 				.then(function(response3) {
 					for(let iii= 0; iii < response3.length; iii++) {
 						self.listSaison.push({value: response3[iii].id, label: "saison " + response3[iii].number});
@@ -194,46 +245,83 @@ export class VideoEditComponent implements OnInit {
 					console.log("get response22 : " + JSON.stringify(response3, null, 2));
 				});
 		}
+		this.updateNeedSend();
 	}
 	onChangeSaison(_value:any):void {
-		this.saison_id = _value;
+		this.data.saison_id = _value;
+		this.updateNeedSend();
 	}
 	
 	onName(_value:any):void {
-		this.name = _value;
+		this.data.name = _value;
+		this.updateNeedSend();
 	}
 	
 	onDescription(_value:any):void {
-		this.description = _value;
+		if (_value.length == 0) {
+			this.data.description = null;
+		} else {
+			this.data.description = _value;
+		}
+		this.updateNeedSend();
 	}
-	
 	onDate(_value:any):void {
-		this.time = _value;
+		if (_value.value.length > 4) {
+			_value.value = this.data.time;
+		} else {
+			this.data.time = _value.value;
+		}
+		this.updateNeedSend();
 	}
 	
 	onEpisode(_value:any):void {
-		this.episode = parseInt(_value, 10);
+		if (_value.value.length > 4) {
-		//this.episode = _value;
+			_value.value = this.data.episode;
+		} else {
+			this.data.episode = parseInt(_value.value, 10);
+		}
+		this.updateNeedSend();
 	}
 	
 	sendValues():void {
 		console.log("send new values....");
-		let data = {
+		let data = {}
-			"name": this.name,
+		if (this.data.name != this.data_ori.name) {
-			"description": this.description,
+			data["name"] = this.data.name;
-			"episode": this.episode,
+		}
-			"time": this.time,
+		if (this.data.description != this.data_ori.description) {
-			"type_id": this.type_id,
+			data["description"] = this.data.description;
-			"univers_id": this.univers_id,
+		}
-			"group_id": this.group_id,
+		if (this.data.episode != this.data_ori.episode) {
-			"saison_id": this.saison_id
+			data["episode"] = this.data.episode;
-		};
+		}
-		this.videoService.put(this.id_video, data);
+		if (this.data.time != this.data_ori.time) {
+			data["time"] = this.data.time;
+		}
+		if (this.data.type_id != this.data_ori.type_id) {
+			data["type_id"] = this.data.type_id;
+		}
+		if (this.data.univers_id != this.data_ori.univers_id) {
+			data["univers_id"] = this.data.univers_id;
+		}
+		if (this.data.group_id != this.data_ori.group_id) {
+			data["group_id"] = this.data.group_id;
+		}
+		if (this.data.saison_id != this.data_ori.saison_id) {
+			data["saison_id"] = this.data.saison_id;
+		}
+		let tmpp = this.data.clone();
+		let self = this;
+		this.videoService.put(this.id_video, data)
+			.then(function(response3) {
+				self.data_ori = tmpp;
+				self.updateNeedSend();
+			}).catch(function(response3) {
+				console.log("get response22 : " + JSON.stringify(response3, null, 2));
+				self.updateNeedSend();
+			});
 	}
 	
-	
-	
-	
 	// At the drag drop area
 	// (drop)="onDropFile($event)"
 	onDropFile(_event: DragEvent) {
@@ -255,6 +343,7 @@ export class VideoEditComponent implements OnInit {
 		this.coverFile = this.selectedFiles[0];
 		console.log("select file " + this.coverFile.name);
 		this.uploadFile(this.coverFile);
+		this.updateNeedSend();
 	}
 	
 	uploadFile(_file:File) {