From e9cd230591f8f4e1d92e12e65331dc22bd58632c Mon Sep 17 00:00:00 2001
From: Fergal Moran <fergal.moran@gmail.com>
Date: Sat, 19 Dec 2015 21:32:49 +0000
Subject: [PATCH] Genres done

---
 bower.json                                    |   3 +-
 client/app/app.js                             |   1 +
 client/app/views/mixes/mixes.directive.html   |   3 +
 client/app/views/mixes/mixes.less             |  15 +-
 .../views/mixes/upload/upload.controller.js   | 337 ++++++++----------
 client/app/views/mixes/upload/upload.html     |  13 +-
 client/index.html                             |   5 +-
 7 files changed, 184 insertions(+), 193 deletions(-)

diff --git a/bower.json b/bower.json
index 6953547..6edf934 100755
--- a/bower.json
+++ b/bower.json
@@ -37,7 +37,8 @@
     "oauth-js": "~0.4.3",
     "remarkable-bootstrap-notify": "~3.1.3",
     "smalot-bootstrap-datetimepicker": "~2.3.4",
-    "js-data-angular": "~3.1.0"
+    "js-data-angular": "~3.1.0",
+    "ui-select": "angular-ui-select#~0.13.2"
   },
   "devDependencies": {
     "angular-mocks": ">=1.2.*",
diff --git a/client/app/app.js b/client/app/app.js
index 03c70f1..2328228 100755
--- a/client/app/app.js
+++ b/client/app/app.js
@@ -10,6 +10,7 @@ angular.module('dssWebApp', [
         'angular-loading-bar',
         'js-data',
         'ui.bootstrap',
+        'ui.select',
         'dialogs.main',
         'infinite-scroll',
         'angularFileUpload',
diff --git a/client/app/views/mixes/mixes.directive.html b/client/app/views/mixes/mixes.directive.html
index 835301d..aa5070f 100755
--- a/client/app/views/mixes/mixes.directive.html
+++ b/client/app/views/mixes/mixes.directive.html
@@ -26,6 +26,9 @@
             <div class="row">
                 <aside>By <a ui-sref="root.user({user: mix.user.slug})">{{mix.user.display_name}}</a></aside>
             </div>
+            <div class="row genre-wrapper">
+                <span class="btn genre-btn" ng-repeat="g in mix.genres">{{g.description}}</span>
+            </div>
             <div class="row">
                 <div class="btn-group mix-tools" role="group" aria-label="Default button group">
                     <button ng-click="shareFacebook()" type="button" class="btn"
diff --git a/client/app/views/mixes/mixes.less b/client/app/views/mixes/mixes.less
index fe2f31d..421c270 100755
--- a/client/app/views/mixes/mixes.less
+++ b/client/app/views/mixes/mixes.less
@@ -113,16 +113,27 @@
   background-attachment: scroll;
   background-size: cover;
 }
+
 .widget-image-container {
   width: 74px;
   height: 74px;
-  position: absolute!important;
+  position: absolute !important;
   top: 50%;
   left: 65%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   cursor: pointer;
 }
 
+.genre-wrapper {
+  margin-top: 12px;
+}
+
+.genre-btn {
+  margin-bottom: 1px;
+  margin-top: 1px;
+  margin-left: 1px;
+  margin-right: 1px;
+}
\ No newline at end of file
diff --git a/client/app/views/mixes/upload/upload.controller.js b/client/app/views/mixes/upload/upload.controller.js
index 2bf1606..df47f56 100755
--- a/client/app/views/mixes/upload/upload.controller.js
+++ b/client/app/views/mixes/upload/upload.controller.js
@@ -2,204 +2,171 @@
 
 angular.module('dssWebApp')
     .controller('MixUploadCtrl',
-    function ($scope, $rootScope, $location, $state, $timeout, mix, dialogs, SocketService, jwtHelper,
-              Session, MixModel, LoginService, ImageUploadService, SERVER_CONFIG, AUTH_EVENTS) {
+        function ($scope, $rootScope, $location, $state, $timeout, $http, mix, dialogs, SocketService, jwtHelper,
+                  Session, MixModel, LoginService, ImageUploadService, SERVER_CONFIG, AUTH_EVENTS) {
 
-        $scope.mix = mix;
-        $scope.waveformHeader = '(drag & drop or click & browse)';
-        $scope.waveformFooter = '';
-        $scope.sending = false;
-        var uploadStates = {
-            VIRGIN: 0,
-            AUDIO_SENDING: 1,
-            AUDIO_SENT: 2,
-            EDIT_MODE: 3
-        };
-        $scope.uploadStates = uploadStates;
-        var _uploadHash = generateUUID();
-
-        var processingStates = {
-            VIRGIN: 0,
-            PROCESSED: 1
-        };
-        $scope.processingStates = processingStates;
-
-        function generateUUID() {
-            var d = new Date().getTime();
-            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-                var r = (d + Math.random() * 16) % 16 | 0;
-                d = Math.floor(d / 16);
-                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
-            });
-        }
-
-        function _checkRedirect() {
+            $scope.mix = mix;
+            $scope.waveformHeader = '(drag & drop or click & browse)';
+            $scope.waveformFooter = '';
             $scope.sending = false;
-            if ($scope.detailsEntered && $scope.uploadState >= uploadStates.AUDIO_SENT &&
-                $scope.processingState == processingStates.PROCESSED) {
-                MixModel.refresh($scope.mix.slug).then(function (m) {
-                    $state.go('root.user.mix', {user: m.user.slug, slug: m.slug});
+
+            $scope.multipleDemo = {};
+            $scope.multipleDemo.colors = ['Blue', 'Red'];
+
+            var uploadStates = {
+                VIRGIN: 0,
+                AUDIO_SENDING: 1,
+                AUDIO_SENT: 2,
+                EDIT_MODE: 3
+            };
+            $scope.uploadStates = uploadStates;
+            var _uploadHash = generateUUID();
+
+            var processingStates = {
+                VIRGIN: 0,
+                PROCESSED: 1
+            };
+            $scope.processingStates = processingStates;
+
+            function generateUUID() {
+                var d = new Date().getTime();
+                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                    var r = (d + Math.random() * 16) % 16 | 0;
+                    d = Math.floor(d / 16);
+                    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
                 });
             }
-        }
 
-        function _registerProcessingCallback() {
-            SocketService.registerHandler('user:process', function (message) {
-                console.log("Received user:process message: ", message);
-                if (message.type === 'waveform' && message.target === _uploadHash) {
-                    $scope.waveformHeader = "Waveform generated.";
-                    $scope.processingState = processingStates.PROCESSED;
-                    $scope.$apply();
-                    _checkRedirect();
-                }
-            });
-        }
-
-        if ($rootScope.currentUser) {
-            _registerProcessingCallback();
-        } else {
-            $rootScope.$on(AUTH_EVENTS.loginSuccess, function (data) {
-                _registerProcessingCallback();
-            });
-        }
-
-        if (!$scope.mix) {
-            $scope.detailsEntered = false;
-            $scope.mix = {
-                title: '',
-                description: '',
-                uid: _uploadHash,
-                genres: [],
-                is_downloadable: true,
-                is_featured: false,
-                is_private: false,
-                image: 'assets/images/placeholders/upload-placeholder.png'
-            };
-            $scope.uploadState = uploadStates.VIRGIN;
-            $scope.processingState = processingStates.VIRGIN;
-        } else {
-            $scope.detailsEntered = true;
-            $scope.uploadState = uploadStates.EDIT_MODE;
-            $scope.processingState = processingStates.PROCESSED;
-            _uploadHash = $scope.mix.uid;
-        }
-
-        $scope.saveMix = function () {
-            $scope.$broadcast('show-errors-check-validity');
-            if ($scope.uploadForm.$valid) {
-                $scope.sending = true;
-                $.each($('#genres', this.el).select2('data'), function (i, item) {
-                    $scope.mix.genres.push({'slug': item.slug, 'description': item.description})
-                });
-                if ($scope.uploadState != uploadStates.EDIT_MODE) {
-                    MixModel.create($scope.mix).then(function (result) {
-                        _processResult(result);
-                    });
-                } else {
-                    MixModel.update($scope.mix.slug, $scope.mix).then(function (result) {
-                        console.log('Updated mix', result);
-                        _processResult(result);
+            function _checkRedirect() {
+                $scope.sending = false;
+                if ($scope.detailsEntered && $scope.uploadState >= uploadStates.AUDIO_SENT &&
+                    $scope.processingState == processingStates.PROCESSED) {
+                    MixModel.refresh($scope.mix.slug).then(function (m) {
+                        $state.go('root.user.mix', {user: m.user.slug, slug: m.slug});
                     });
                 }
-                var _processResult = function (result) {
-                    $scope.mix = result;
-                    $timeout(function () {
-                        $scope.waveformFooter = "Waveform processing is taking longer than expected.<br />" +
-                            "Your mix should be available <a ui-sref='root.user.mix({user: currentUser.slug, mix: mix.slug})'>Here</a>";
+            }
+
+            function _registerProcessingCallback() {
+                SocketService.registerHandler('user:process', function (message) {
+                    console.log("Received user:process message: ", message);
+                    if (message.type === 'waveform' && message.target === _uploadHash) {
+                        $scope.waveformHeader = "Waveform generated.";
+                        $scope.processingState = processingStates.PROCESSED;
                         $scope.$apply();
-                    }, 120000);
-
-                    var imageFile = document.getElementById('mix-image-fileinput').files[0];
-                    if (imageFile) {
-                        ImageUploadService.uploadMixImage(_uploadHash, imageFile, function (result) {
-                            $scope.detailsEntered = true;
-                            _checkRedirect();
-                        });
-                    } else {
-                        $scope.detailsEntered = true;
                         _checkRedirect();
                     }
-                };
+                });
+            }
+
+            if ($rootScope.currentUser) {
+                _registerProcessingCallback();
             } else {
-                $scope.uploadForm.$dirty = true;
+                $rootScope.$on(AUTH_EVENTS.loginSuccess, function (data) {
+                    _registerProcessingCallback();
+                });
             }
-        };
-        //TODO: refactor dropzone out to a directive
-        $('#dss-file-upload').dropzone({
-            addRemoveLinks: true,
-            acceptedFiles: '.mp3',
-            url: SERVER_CONFIG.apiUrl + '/_upload/',
-            dictDefaultMessage: '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload ' +
-            '<span class="smaller-80 grey">(or click)</span> <br /> <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
-            maxFilesize: 512,
-            sending: function (file, xhr, formData) {
-                xhr.setRequestHeader('Session-Id', Session.getSession())
-                xhr.setRequestHeader('Upload-Hash', _uploadHash);
-                $scope.uploadState = uploadStates.AUDIO_SENDING;
-                $scope.$apply();
-            },
-            uploadprogress: function (e, progress, bytesSent) {
-                $scope.uploadProgress = Math.round(progress);
-                $scope.uploadProgressStyle = {'width': progress + '%'};
-                $scope.$apply();
-            },
-            complete: function (file) {
-                if (file.status !== 'error') {
-                    $scope.waveformHeader = "Generating waveform.";
-                    $scope.uploadState = uploadStates.AUDIO_SENT;
-                    $scope.$apply();
-                    _checkRedirect();
-                } else {
-                    var dlg = dialogs.create('app/dialogs/alert/alertDialog.html', 'AlertDialogCtrl', {
-                        title: "Error",
-                        body: "There was an error uploading the audio file. Maybe try again later?"
+
+            if (!$scope.mix) {
+                $scope.detailsEntered = false;
+                $scope.mix = {
+                    title: '',
+                    description: '',
+                    uid: _uploadHash,
+                    genres: [],
+                    is_downloadable: true,
+                    is_featured: false,
+                    is_private: false,
+                    image: 'assets/images/placeholders/upload-placeholder.png'
+                };
+                $scope.uploadState = uploadStates.VIRGIN;
+                $scope.processingState = processingStates.VIRGIN;
+            } else {
+                $scope.detailsEntered = true;
+                $scope.uploadState = uploadStates.EDIT_MODE;
+                $scope.processingState = processingStates.PROCESSED;
+                _uploadHash = $scope.mix.uid;
+            }
+
+            $scope.saveMix = function () {
+                $scope.$broadcast('show-errors-check-validity');
+                if ($scope.uploadForm.$valid) {
+                    $scope.sending = true;
+                    /*
+                    $.each($('#genres', this.el).select2('data'), function (i, item) {
+                        $scope.mix.genres.push({'slug': item.slug, 'description': item.description})
                     });
-                }
-            }
-        });
-        $('#genres').select2({
-            placeholder: 'Start typing and choose from list or create your own.',
-            minimumInputLength: 3,
-            multiple: true,
-            ajax: {
-                url: SERVER_CONFIG.apiUrl + '/genre',
-                dataType: 'json',
-                data: function (term, page) {
-                    return {
-                        q: term
-                    };
-                },
-                results: function (data, page) {
-                    return {
-                        results: data.results
-                    };
-                }
-            },
-            id: function (genre) {
-                return genre.slug;
-            },
-            formatResult: function (genre) {
-                return genre.description;
-            },
-            formatSelection: function (genre) {
-                return '<div class="select2-user-result">' + genre.description + '</div>';
-            },
-            initSelection: function (_this) {
-                return function (element, callback) {
-                    var genres, result;
-                    console.log('MixEditView: genres:initSelection');
-                    result = [];
-                    genres = _this.model.get('genres');
-                    if (genres !== undefined) {
-                        genres.each(function (data) {
-                            return result.push({
-                                id: data.get('id'),
-                                description: data.get('description')
-                            });
+                    */
+                    if ($scope.uploadState != uploadStates.EDIT_MODE) {
+                        MixModel.create($scope.mix).then(function (result) {
+                            _processResult(result);
+                        });
+                    } else {
+                        MixModel.update($scope.mix.slug, $scope.mix).then(function (result) {
+                            console.log('Updated mix', result);
+                            _processResult(result);
                         });
                     }
-                    return callback(result);
-                };
-            }
+                    var _processResult = function (result) {
+                        $scope.mix = result;
+                        $timeout(function () {
+                            $scope.waveformFooter = "Waveform processing is taking longer than expected.<br />" +
+                                "Your mix should be available <a ui-sref='root.user.mix({user: currentUser.slug, mix: mix.slug})'>Here</a>";
+                            $scope.$apply();
+                        }, 120000);
+
+                        var imageFile = document.getElementById('mix-image-fileinput').files[0];
+                        if (imageFile) {
+                            ImageUploadService.uploadMixImage(_uploadHash, imageFile, function (result) {
+                                $scope.detailsEntered = true;
+                                _checkRedirect();
+                            });
+                        } else {
+                            $scope.detailsEntered = true;
+                            _checkRedirect();
+                        }
+                    };
+                } else {
+                    $scope.uploadForm.$dirty = true;
+                }
+            };
+            //TODO: refactor dropzone out to a directive
+            $('#dss-file-upload').dropzone({
+                addRemoveLinks: true,
+                acceptedFiles: '.mp3',
+                url: SERVER_CONFIG.apiUrl + '/_upload/',
+                dictDefaultMessage: '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload ' +
+                '<span class="smaller-80 grey">(or click)</span> <br /> <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
+                maxFilesize: 512,
+                sending: function (file, xhr, formData) {
+                    xhr.setRequestHeader('Session-Id', Session.getSession())
+                    xhr.setRequestHeader('Upload-Hash', _uploadHash);
+                    $scope.uploadState = uploadStates.AUDIO_SENDING;
+                    $scope.$apply();
+                },
+                uploadprogress: function (e, progress, bytesSent) {
+                    $scope.uploadProgress = Math.round(progress);
+                    $scope.uploadProgressStyle = {'width': progress + '%'};
+                    $scope.$apply();
+                },
+                complete: function (file) {
+                    if (file.status !== 'error') {
+                        $scope.waveformHeader = "Generating waveform.";
+                        $scope.uploadState = uploadStates.AUDIO_SENT;
+                        $scope.$apply();
+                        _checkRedirect();
+                    } else {
+                        var dlg = dialogs.create('app/dialogs/alert/alertDialog.html', 'AlertDialogCtrl', {
+                            title: "Error",
+                            body: "There was an error uploading the audio file. Maybe try again later?"
+                        });
+                    }
+                }
+            });
+            $scope.refreshGenres = function (search) {
+                $http.get(SERVER_CONFIG.apiUrl + '/genre/?q=' + search)
+                    .then(function (results) {
+                        $scope.genreSearchResults = results.data.results;
+                    });
+            };
         });
-    });
diff --git a/client/app/views/mixes/upload/upload.html b/client/app/views/mixes/upload/upload.html
index a80ac46..e9033c3 100755
--- a/client/app/views/mixes/upload/upload.html
+++ b/client/app/views/mixes/upload/upload.html
@@ -112,10 +112,17 @@
                     </div>
                 </div>
                 <div id="genres-area" class="form-group">
-                    <label for="genres" class="col-sm-3 control-label">Genres</label>
-
+                    <label class="col-sm-3 control-label">Genres</label>
                     <div class="col-sm-6">
-                        <input id="genres" style="width:98%" ng-model="mix.genres"/>
+                        <ui-select multiple ng-model="mix.genres" theme="bootstrap" ng-disabled="disabled"
+                                   style="width: 300px;">
+                            <ui-select-match placeholder="Start typing...">{{$item.description}}</ui-select-match>
+                            <ui-select-choices repeat="genre in genreSearchResults"
+                                               refresh="refreshGenres($select.search)"
+                                               refresh-delay="0">
+                                <div ng-bind-html="genre.description | highlight: $select.search"></div>
+                            </ui-select-choices>
+                        </ui-select>
                     </div>
                 </div>
                 <div id="submit-area" class="form-group form-actions">
diff --git a/client/index.html b/client/index.html
index 520fc9f..300c16d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="bower_components/angular-smilies/dist/angular-smilies.css" />
     <link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css" />
     <link rel="stylesheet" href="bower_components/smalot-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
+    <link rel="stylesheet" href="bower_components/ui-select/dist/select.css" />
     <!-- endbower -->
     <!-- endbuild -->
 
@@ -33,10 +34,10 @@
     <link rel="stylesheet" href="assets/animations.css">
     <link rel="stylesheet" href="assets/zoom/audioplayer.css">
     <link rel="stylesheet" href="assets/zoom/style.css">
-    <link rel="stylesheet" href="assets/select2/select2.css"/>
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
     <link rel="stylesheet" href="assets/site/css/site.css">
     <link rel="stylesheet" href="assets/site/css/themes.css">
+    <link rel="stylesheet" href="assets/select2/select2.css">
 
     <!-- injector:css -->
     <link rel="stylesheet" href="app/components/footer/player.css">
@@ -121,6 +122,7 @@
 <script src="bower_components/js-data/dist/js-data.js"></script>
 <script src="bower_components/js-data-http/dist/js-data-http.js"></script>
 <script src="bower_components/js-data-angular/dist/js-data-angular.js"></script>
+<script src="bower_components/ui-select/dist/select.js"></script>
 <!-- endbower -->
 <script src="socket.io-client/socket.io.js"></script>
 <!-- endbuild -->
@@ -138,7 +140,6 @@
 <script src="assets/slimscroll/jquery.slimscroll.js"></script>
 <script src="assets/dropzone/dropzone.js"></script>
 <script src="assets/slider.js"></script>
-<script src="assets/select2/select2.js"></script>
 <!-- injector:js -->
 <script src="app/components/chatbar/chatbar.controller.js"></script>
 <script src="app/components/comments/comments.directive.js"></script>