Merge pull request #336 from matiasdelellis/split-cluster-person

Implement a new person view what are all the clusters with the same person name.
In the main view, it only shows persons who already have names, and shows a dialog to assign names to unnamed clusters.
The second view is all the photos of this person, and reuse nextcloud thumbnails to improve server load.

appinfo/info.xml

@@ -16,7 +16,7 @@
 - **🚀 Build your own thing:** FaceRecognition app is just a basic building block. Through FaceRecognition API, you can build your advanced scenarios - automatically add tags to images, connect contacts and persons, share images from specific person… We want to hear your ideas!
 ]]>
 	</description>
-	<version>0.6.3</version>
+	<version>0.6.4</version>
 	<licence>agpl</licence>
 	<author>Matias De lellis</author>
 	<author>Branko Kokanovic</author>

appinfo/routes.php

@@ -1,36 +1,66 @@
 <?php
-return ['routes' => 
+return ['routes' =>
 [
+	/*
+	 * Persons
+	 */
 	// Get all face clusters with faces and file asociated.
 	[
 		'name' => 'person#index',
-		'url'  => '/clusters',
+		'url'  => '/persons',
 		'verb' => 'GET'
 	],
-	// Get all clusters filtered by Name.
+	// Get all images filtered by Name.
 	[
-		'name' => 'person#findByName',
+		'name' => 'person#find',
 		'url'  => '/person/{personName}',
 		'verb' => 'GET'
 	],
+	// Change name to a person.
+	[
+		'name' => 'person#updateName',
+		'url'  => '/person/{personName}',
+		'verb' => 'PUT'
+	],
+	/*
+	 * Clusters
+	 */
 	// Get a cluster by Id.
 	[
-		'name' => 'person#find',
+		'name' => 'cluster#find',
 		'url'  => '/cluster/{id}',
 		'verb' => 'GET'
 	],
-	// Change name to a person.
+	// Get all clusters filtered by Name.
 	[
-		'name' => 'person#updateName',
+		'name' => 'cluster#findByName',
+		'url'  => '/clusters/{personName}',
+		'verb' => 'GET'
+	],
+	// Get all clusters unassigned clusters.
+	[
+		'name' => 'cluster#findUnassigned',
+		'url'  => '/clusters',
+		'verb' => 'GET'
+	],
+	// Change name to a cluster.
+	[
+		'name' => 'cluster#updateName',
 		'url'  => '/cluster/{id}',
 		'verb' => 'PUT'
 	],
+	/*
+	 * Face thumbails
+	 */
 	// Get a face Thumb
 	[
 		'name' => 'face#getThumb',
 		'url'  => '/face/{id}/thumb/{size}',
 		'verb' => 'GET'
 	],
+	/*
+	 * File and Folders
+	 */
 	// Get persons from path
 	[
 		'name' => 'file#getPersonsFromPath',
@@ -49,6 +79,9 @@
 		'url'  => '/folder',
 		'verb' => 'PUT'
 	],
+	/*
+	 * Settings
+	 */
 	// User settings
 	[
 		'name' => 'settings#setUserValue',
@@ -71,6 +104,9 @@
 		'url' => '/getappvalue',
 		'verb' => 'GET'
 	],
+	/*
+	 * Status of process.
+	 */
 	// Get process status.
 	[
 		'name' => 'process#index',

css/facerecognition.scss

@@ -2,11 +2,24 @@
 	width: 100%;
 }
 
-.person-title {
-	display: inline-flex;
+.icon-back {
+	@include icon-color('back', 'facerecognition', $color-black);
+}
+
+.image-box,
+.person-box {
+	display: inline-block;
+	margin: 3px;
+}
+
+.person-desc {
+	text-align: center;
+	margin-top: -5px;
+	color: var(--color-text-lighter);
+}
+
+.cluster-title {
 	padding: 10px;
-	padding-left: 34px;
-	background-position: 10px center;
 	text-align: left;
 	margin-top: 22px;
 	margin-bottom: 0px !important;
@@ -16,40 +29,47 @@
 	padding-left: 34px;
 }
 
+.person-name {
+	text-align: center;
+	margin-top: 5px;
+	margin-bottom: 0px;
+}
+
 .persons-previews {
+	margin-top: 22px;
+}
+
+.faces-previews {
 	margin-left: 24px;
 	display: flex;
 	flex-wrap: wrap;
 }
 
+.face-preview-big,
+.file-preview-big {
+	background-color: rgba(210, 210, 210, .75);
+	background-size: cover;
+	border-radius: 12px;
+	height: 128px;
+	width: 128px;
+	margin: 0 auto;
+	cursor: pointer;
+}
+
 .face-preview {
 	background-color: rgba(210, 210, 210, .75);
+	background-size: cover;
 	border-radius: 3px;
 	margin: 2px;
 	height: 50px;
 	width: 50px;
 }
 
+.face-preview-big:hover,
 .face-preview:hover {
 	opacity: .5;
 }
 
-/*
- * Rename dialog
- */
-
-#fr-dialog-content-input {
-	width: 80%;
-	margin: 6px;
-}
-
-.face-preview-dialog {
-	background-color: rgba(210, 210, 210, .75);
-	border-radius: 25px;
-	height: 50px;
-	width: 50px;
-}
-
 /*
  * Admin page
  */

css/fr-dialogs.scss

@@ -1,11 +1,12 @@
-#fr-dialog-content-input {
-	width: 80%;
-	margin: 6px;
+#fr-assign-dialog-input,
+#fr-rename-dialog-input {
+	width: 100%;
 }
 
 .face-preview-dialog {
 	background-color: rgba(210, 210, 210, .75);
 	border-radius: 50%;
 	height: 50px;
 	width: 50px;
-}
+	margin: 1px;
+}