Face Manager : Add drag and drop for faces between folders in UI

plugins/face/faceManagerCustomAutoLoadLibrary/index.js

@@ -91,17 +91,57 @@ module.exports = function(s,config,lang,app,io){
                         faceName: req.params.name,
                         fileName: req.params.image,
                     })
-                })
-            }
-            res.end(s.prettyPrint({
-                ok: true,
-            }))
                     getFaceFolderNames((faces) => {
                         s.sendToAllDetectors({
                             f: 'recompileFaceDescriptors',
                             faces: faces
                         })
                     })
+                })
+            }
+            res.end(s.prettyPrint({
+                ok: true,
+            }))
+        },res,req)
+    })
+    app.get(config.webPaths.superApiPrefix+':auth/faceManager/image/:name/:image/move/:newName/:newImage', function (req,res){
+        s.superAuth(req.params,function(resp){
+            res.setHeader('Content-Type', 'application/json')
+            const oldImagePath = config.facesFolder + req.params.name + '/' + req.params.image
+            const newImagePath = config.facesFolder + req.params.newName + '/' + req.params.newImage
+            const fileExists = fs.existsSync(oldImagePath)
+            if(fileExists){
+                fs.readFile(oldImagePath,(err,data) => {
+                    fs.writeFile(newImagePath,data,() => {
+                        fs.unlink(oldImagePath,() => {
+                            s.file('delete',oldImagePath)
+                            if(req.query.websocketResponse){
+                                sendDataToConnectedSuperUsers({
+                                    f:'faceManagerImageDeleted',
+                                    faceName: req.params.name,
+                                    fileName: req.params.image,
+                                })
+                                var fileLink = config.webPaths.superApiPrefix + req.params.auth + `/faceManager/image/${req.params.newName}/${req.params.newImage}`
+                                sendDataToConnectedSuperUsers({
+                                    f:'faceManagerImageUploaded',
+                                    faceName: req.params.newName,
+                                    fileName: req.params.newImage,
+                                    url: fileLink
+                                })
+                            }
+                            getFaceFolderNames((faces) => {
+                                s.sendToAllDetectors({
+                                    f: 'recompileFaceDescriptors',
+                                    faces: faces
+                                })
+                            })
+                        })
+                    })
+                })
+            }
+            res.end(s.prettyPrint({
+                ok: fileExists,
+            }))
         },res,req)
     })
     app.post(config.webPaths.superApiPrefix+':auth/faceManager/image/:name/:image', fileUpload(), function (req,res){

plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/css/super.faceManager.css

@@ -1,7 +1,29 @@
 #faceManagerImages .face-image {
+    transition: 0s;
+}
+#faceManagerImages h3:first-child {
+    margin-top: 0!important;
+}
+#faceManagerImages > .row {
+    background: #fafafa;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 0;
+}
+#faceManagerImages > .row.ui-droppable-hover {
+    background: #eee;
+}
+#faceManagerImages > .row:empty {
+    height: 200px;
+}
+#faceManagerImages .face-image-bg {
+    position: relative;
     background-size: cover;
     background-position: center;
     border-radius: 5px;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #eee;
 }
 #faceManagerImages .face-image .controls,
 #faceManagerImages .face-image .controls-bottom {

plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js

@@ -13,8 +13,14 @@ $(document).ready(function(){
             callback(response)
         })
     }
+    var moveFaceImage = function(name,image,newFaceName,callback){
+        $.get(superApiPrefix + $user.sessionKey + '/faceManager/image/' + name + '/' + image + '/move/' + newFaceName + '/' + image + '?websocketResponse=1' ,function(response){
+            callback(response)
+        })
+    }
     var getFaceImageHtml = function(name,image){
-        return `<div class="col-3 p-0 face-image" face="${name}" image="${image}" style="background-image:url('${superApiPrefix}${$user.sessionKey}/faceManager/image/${name}/${image}')">
+        return `<div class="col-3 p-2 face-image" face="${name}" image="${image}">
+           <div class="face-image-bg" style="background-image:url('${superApiPrefix}${$user.sessionKey}/faceManager/image/${name}/${image}')">
                <div class="controls row m-0">
                    <div class="col p-0">
                         <a href="#" class="btn btn-sm btn-danger m-0 delete"><i class="fa fa-trash-o"></i></a>
@@ -26,19 +32,28 @@ $(document).ready(function(){
                <div class="controls-bottom">
                    <span class="badge badge-sm bg-dark">${image}</span>
                </div>
+           </div>
        </div>`
     }
+    var createFaceHeader = function(name){
+        return `<span class="mt-4 mb-2 badge bg-dark badge-lg">${name}</span>`
+    }
     var drawFaceImages = function(){
         getFaceImages(function(faces){
             var html = ''
             $.each(faces,function(name,images){
-                html += `<div class="row" face="${name}">`
+                // if(images.length === 0)return
+                html += `${createFaceHeader(name)}<div class="row" face="${name}">`
                 $.each(images,function(n,image){
                     html += getFaceImageHtml(name,image)
                 })
                 html += `</div>`
             })
             faceManagerImages.html(html)
+            $.each(faces,function(name,images){
+                activateDroppableContainer(name)
+            })
+            activateDraggableImages()
             prettySizeFaceImages()
         })
     }
@@ -47,6 +62,49 @@ $(document).ready(function(){
         var faceHeight = faceImagesRendered.first().width()
         faceImagesRendered.css('height',faceHeight)
     }
+    var activateDroppableContainer = function(name){
+        var row = faceManagerImages.find(`.row[face="${name}"]`)
+        try{
+            row.droppable("destroy")
+        }catch(err){
+
+        }
+        row.droppable({
+            tolerance: "intersect",
+            accept: ".face-image",
+            activeClass: "ui-state-default",
+            hoverClass: "ui-state-hover",
+            drop: function(event, ui) {
+                var el = $(this)
+                var newFace = el.attr('face')
+                var faceImageElement = $(ui.draggable)
+                var oldFace = faceImageElement.attr('face')
+                var fileName = faceImageElement.attr('image')
+                if(oldFace !== newFace){
+                    moveFaceImage(oldFace,fileName,newFace)
+                }else{
+                    faceImageElement.css({
+                        top: 0,
+                        left: 0,
+                    })
+                }
+            }
+        })
+    }
+    var activateDraggableImages = function(name){
+        var imageEls = faceManagerImages.find(`.face-image`)
+        try{
+            imageEls.draggable("destroy")
+        }catch(err){
+
+        }
+        imageEls.draggable({
+            appendTo: "body",
+            cursor: "move",
+            // helper: 'clone',
+            revert: "invalid"
+        });
+    }
     faceManagerModal.on('shown.bs.modal',function(){
         drawFaceImages()
     })
@@ -60,7 +118,7 @@ $(document).ready(function(){
         var faceImage = el.attr('image')
         $.confirm.create({
             title: lang.deleteImage,
-            body: lang.deleteImageText,
+            body: lang.deleteImageText + `<div class="mt-3"><img style="width:100%;border-radius:5px;" src="${superApiPrefix}${$user.sessionKey}/faceManager/image/${faceName}/${faceImage}"></div>`,
             clickOptions: {
                 class: 'btn-danger',
                 title: lang.Delete,
@@ -98,10 +156,12 @@ $(document).ready(function(){
             case'faceManagerImageUploaded':
                 var row = faceManagerImages.find(`.row[face="${d.faceName}"]`)
                 if(row.length === 0){
-                    faceManagerImages.append(`<div class="row" face="${d.faceName}"></div>`)
+                    faceManagerImages.append(`${createFaceHeader(d.faceName)}<div class="row" face="${d.faceName}"></div>`)
                     row = faceManagerImages.find(`.row[face="${d.faceName}"]`)
+                    activateDroppableContainer(d.faceName)
                 }
                 row.prepend(getFaceImageHtml(d.faceName,d.fileName))
+                activateDraggableImages()
                 prettySizeFaceImages()
             break;
             case'faceManagerImageDeleted':

plugins/face/faceManagerCustomAutoLoadLibrary/web/pages/blocks/super.faceManager.ejs

@@ -13,7 +13,7 @@
                   <div class="form-group">
                       <input value="myFace" placeholder="<%- lang['Face Name'] %>" class="form-control form-control-lg" name="faceName" id="faceNameField">
                   </div>
-                  <input type="file" id="fileinput" name="files" />
+                  <input type="file" id="fileinput" name="files" multiple="multiple" />
               </form>
               <div class="col-8" id="faceManagerImages">