mise à jour de ce qui n'avait pas été commité y a longtemps

clavier/admin.py

 from django.contrib import admin
-from .models import Serie
+from .models import Serie, Mot, Audio, Image
 
 
 # Register your models here.
-admin.site.register(Serie)
\ No newline at end of file
+admin.site.register(Serie)
+admin.site.register(Mot)
+admin.site.register(Audio)
+admin.site.register(Image)
\ No newline at end of file

clavier/migrations/0002_auto_20201115_0959.py

+# Generated by Django 3.0.5 on 2020-11-15 09:59
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('clavier', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Audio',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('nom', models.CharField(blank=True, max_length=255)),
+                ('auteur', models.CharField(blank=True, max_length=255)),
+                ('file', models.FileField(upload_to='audio-uploads/')),
+                ('upload_at', models.DateTimeField(auto_now_add=True)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Mot',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('auteur', models.CharField(max_length=100)),
+                ('dateCreation', models.DateTimeField(auto_now_add=True)),
+                ('dateModification', models.DateTimeField(auto_now=True)),
+                ('motGenerique', models.CharField(max_length=100)),
+                ('phono', models.CharField(max_length=1000)),
+                ('audio', models.FileField(blank=True, upload_to='playerPhono/audio/')),
+                ('image', models.ImageField(blank=True, upload_to='playerPhono/im/')),
+            ],
+        ),
+        migrations.AlterField(
+            model_name='serie',
+            name='auteur',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.PROTECT, to=settings.AUTH_USER_MODEL),
+        ),
+        migrations.AlterField(
+            model_name='serie',
+            name='nom',
+            field=models.CharField(default='nouvelle série', max_length=100),
+        ),
+    ]

clavier/migrations/0003_image.py

+# Generated by Django 3.0.5 on 2020-11-15 22:26
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('clavier', '0002_auto_20201115_0959'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Image',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('nom', models.CharField(blank=True, max_length=255)),
+                ('auteur', models.CharField(blank=True, max_length=255)),
+                ('file', models.FileField(upload_to='image-uploads/')),
+                ('upload_at', models.DateTimeField(auto_now_add=True)),
+            ],
+        ),
+    ]

clavier/migrations/0004_auto_20201115_2236.py

+# Generated by Django 3.0.5 on 2020-11-15 22:36
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('clavier', '0003_image'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='image',
+            name='file',
+            field=models.ImageField(upload_to='image-uploads/'),
+        ),
+    ]

clavier/migrations/0005_delete_image.py

+# Generated by Django 3.0.5 on 2020-11-16 15:37
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('clavier', '0004_auto_20201115_2236'),
+    ]
+
+    operations = [
+        migrations.DeleteModel(
+            name='Image',
+        ),
+    ]

clavier/migrations/0006_image.py

+# Generated by Django 3.0.5 on 2020-11-16 17:27
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('clavier', '0005_delete_image'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Image',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('nom', models.CharField(blank=True, max_length=255)),
+                ('auteur', models.CharField(blank=True, max_length=255)),
+                ('file', models.ImageField(upload_to='image-uploads/')),
+                ('upload_at', models.DateTimeField(auto_now_add=True)),
+            ],
+        ),
+    ]

clavier/models.py

 from djongo import models
 from django.contrib.auth.models import User
+from PIL import Image as PilImage
 
 class Serie(models.Model):
     dateCreation = models.DateTimeField(auto_now_add=True, auto_now=False)
     dateModification = models.DateTimeField(auto_now_add=False, auto_now=True)
-    nom = models.CharField(default='nouvel utilisateur', max_length=100)
+    nom = models.CharField(default='nouvelle série', max_length=100)
     description = models.CharField(blank=True, max_length=500)
-    auteur = models.OneToOneField(User, on_delete=models.PROTECT)
+    auteur = models.ForeignKey(User, on_delete=models.PROTECT)
     mots = models.CharField(default='[]', max_length=10000)
 
     listemots = models.CharField(blank=True, default='[]', max_length=500)
@@ -15,9 +16,55 @@ class Serie(models.Model):
     def __str__(self):
         return self.nom
 
-# class Mot(models.Model):
-#     motGenerique = models.CharField(max_length=100) # "chat"
-#     phono = models.CharField(max_length=1000) # ["phon_s_maj","phon_a"]
-#     audio = models.CharField(max_length=500) # "s0_chat.mp3"
-#     image = models.CharField(max_length=500) # "s0_chat.jpg"
-#     phonographies = models.CharField(max_length=3000) # liste d'objets Phonographie() (une ortho, un alignement phonographique)
\ No newline at end of file
+class Mot(models.Model):
+    auteur = models.CharField(max_length=100) # models.ForeignKey(User, on_delete=models.PROTECT)
+    dateCreation = models.DateTimeField(auto_now_add=True, auto_now=False)
+    dateModification = models.DateTimeField(auto_now_add=False, auto_now=True)
+
+    motGenerique = models.CharField(max_length=100) # "chat"
+    phono = models.CharField(max_length=1000) # Liste des phonos choisies [["phon_s_maj","phon_a"]]
+    audio = models.FileField(blank=True, upload_to='playerPhono/audio/')
+    image = models.ImageField(blank=True, upload_to='playerPhono/im/')
+
+    def __str__(self):
+        return self.motGenerique
+    
+    # def save(self, *args, **kwargs):
+    #         super().save(*args, **kwargs)
+
+    #         img = Image.open(self.image.path)
+
+    #         if img.height > 300 or img.width > 300:
+    #             output_size = (300, 300)
+    #             img.thumbnail(output_size)
+    #             img.save(self.image.path)
+
+
+class Audio(models.Model):
+    nom = models.CharField(max_length=255, blank=True)
+    auteur = models.CharField(max_length=255, blank=True)
+    file = models.FileField(upload_to="audio-uploads/")
+    upload_at = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+        return self.nom
+
+
+class Image(models.Model):
+    nom = models.CharField(max_length=255, blank=True)
+    auteur = models.CharField(max_length=255, blank=True)
+    file = models.ImageField(upload_to="image-uploads/")
+    upload_at = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+        return self.nom
+
+    def save(self, *args, **kwargs):
+        super().save(*args, **kwargs)
+
+        img = PilImage.open(self.file.path)
+
+        if img.height > 300 or img.width > 300:
+            output_size = (300, 300)
+            img.thumbnail(output_size)
+            img.save(self.file.path)
\ No newline at end of file

clavierPhono/settings.py

@@ -75,6 +75,7 @@ TEMPLATES = [
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
+                'django.template.context_processors.media'
             ],
         },
     },

clavierPhono/urls.py

@@ -31,6 +31,8 @@ urlpatterns = [
     path('logout/', auth_views.LogoutView.as_view(template_name="users/logout.html"), name='logout'),
     path('profile/', user_views.profile, name='profile'),
     path('player/createSerie/', user_views.createSerie, name='createSerie'),
+    path('player/uploadAudio/', user_views.uploadAudio, name='uploadAudio'),
+    path('player/uploadImage/', user_views.uploadImage, name='uploadImage'),
 
     path('', clavier_views.newPage),
     path('fr/', clavier_views.newPage),

static/js/createSerie.js

@@ -42,47 +42,51 @@ function generate(){
         var divMot = document.createElement('div');
         divMot.id = 'divMot-' + i;
         divMot.classList = 'd-flex flex-row bd-highlight divMot';
-
-        var divMotInfo = document.createElement('div');
-        divMotInfo.classList = "d-flex flex-column bd-highlight mb-3";
-        divMot.appendChild(divMotInfo);
+        document.getElementById('contenuSerie').appendChild(divMot);
 
             var divMotGen = document.createElement('div');
             divMotGen.id = 'divMotGen-' + i;
             divMotGen.classList = 'p-2 bd-highlight align-self-stretch divMotCellMot';
             divMotGen.innerHTML = mot;
-            divMotInfo.appendChild(divMotGen);
-
-            var divMotAudio = document.createElement('div');
-            divMotAudio.id = 'divMotAudio-' + i;
-            divMotAudio.classList = 'p-2 bd-highlight align-self-stretch divMotCellMedia';
-            divMotAudio.innerHTML = '<i class="fa fa-volume-up" aria-hidden="true"></i><small><input type="file" class="form-control-file" id="audioControlFile-'+ i +'"></small>';
-            divMotInfo.appendChild(divMotAudio);
-
-                var divMotAudioPath = document.createElement('div');
-                divMotAudioPath.id = 'divMotAudioPath-' + i;
-                divMotAudioPath.style.display = 'none';
-                divMotAudio.appendChild(divMotAudioPath);
-
-            var divMotIm = document.createElement('div');
-            divMotIm.id = 'divMotIm-' + i;
-            divMotIm.classList = 'p-2 bd-highlight align-self-stretch divMotCellMedia';
-            divMotIm.innerHTML = '<i class="fa fa-picture-o" aria-hidden="true"></i><small><input type="file" class="form-control-file" id="imControlFile-'+ i +'"></small>';
-            divMotInfo.appendChild(divMotIm);
-
-                var divMotImPath = document.createElement('div');
-                divMotImPath.id = 'divMotImPath-' + i;
-                divMotImPath.style.display = 'none';
-                divMotIm.appendChild(divMotImPath);
+            divMot.appendChild(divMotGen);
+
+            var divMotInfo = document.createElement('div');
+            divMotInfo.classList = "d-flex flex-column bd-highlight mb-3";
+            divMot.appendChild(divMotInfo);
+
+                var divMotAudio = document.createElement('div');
+                divMotAudio.id = 'divMotAudio-' + i;
+                divMotAudio.classList = 'p-2 bd-highlight align-self-stretch divMotCellMedia';
+                divMotAudio.innerHTML = `<button onclick="uploadAudio('`+i+`a')" type="button" class="btn btn-outline-primary js-upload-photos"><i class="fa fa-volume-up" aria-hidden="true"></i></button>`;
+                divMotAudio.innerHTML += '<small><div id="fileuploaded-'+i+'a"></div></small>';
+                divMotInfo.appendChild(divMotAudio);
+
+                // <button onclick="upload('0a')" type="button" class="btn btn-primary js-upload-photos">
+                //     <i class="fa fa-volume-up" aria-hidden="true"></i>
+                // </button>
+
+                // <input id="fileupload-0a" type="file" name="file" multiple
+                //     style="display: none;"
+                //     data-url="{% url 'uploadAudio' %}"
+                //     data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
+
+                // <div id="fileuploaded-0a"></div>
+
+                var divMotIm = document.createElement('div');
+                divMotIm.id = 'divMotIm-' + i;
+                divMotIm.classList = 'p-2 bd-highlight align-self-stretch divMotCellMedia';
+                divMotIm.innerHTML = `<button onclick="uploadImage('`+i+`b')" type="button" class="btn btn-outline-primary js-upload-photos"><i class="fa fa-picture-o" aria-hidden="true"></i></button>`;
+                divMotIm.innerHTML += '<small><div id="fileuploaded-'+i+'b"></div></small>';
+                divMotInfo.appendChild(divMotIm);
 
             var divMotPhono = document.createElement('div');
             divMotPhono.id = 'divMotPhono-' + i;
             divMotPhono.classList = 'd-flex flex-row bd-highlight mt-2';
             divMot.appendChild(divMotPhono);
 
-            getPhono(mot, divMotPhono.id);
+        getPhono(mot, divMotPhono.id);
 
-        document.getElementById('contenuSerie').appendChild(divMot);
+        
     }
 }
 
@@ -178,30 +182,30 @@ function playPhon(phonId) {
     audio.play();
 }
 
-async function getAllPhonographiesOf(phono) {
-	// ON EMBALLE TOUT ÇA
-    var colis = {
-		inText: phono,
-		lang: "fr"
-	}
-	console.log('Envoi colis:',colis);
-
-    // Paramètres d'envoi
-    const options = {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(colis)
-    };
+// async function getAllPhonographiesOf(phono) {
+// 	// ON EMBALLE TOUT ÇA
+//     var colis = {
+// 		inText: phono,
+// 		lang: "fr"
+// 	}
+// 	console.log('Envoi colis:',colis);
+
+//     // Paramètres d'envoi
+//     const options = {
+//         method: 'POST',
+//         headers: {
+//             'Content-Type': 'application/json',
+//         },
+//         body: JSON.stringify(colis)
+//     };
     
-    // ENVOI
-	const response = await fetch('http://wikicolor.alem-app.fr/getAllPhonographiesOf/', options);
-	console.log('En attente de réponse...');
-    const data = await response.json();
-    console.log(data);
-    return data;
-}
+//     // ENVOI
+// 	const response = await fetch('http://wikicolor.alem-app.fr/getAllPhonographiesOf/', options);
+// 	console.log('En attente de réponse...');
+//     const data = await response.json();
+//     console.log(data);
+//     return data;
+// }
 
 function makeSerieMots(){
     serieMots = []; // réinitialisation de serieMots
@@ -214,8 +218,8 @@ function makeSerieMots(){
         var entree = {
             "motGenerique": document.getElementById('divMotGen-'+iMot).innerHTML,
             "phono": [],
-            "audio": document.getElementById('divMotAudioPath-'+iMot).innerHTML,
-            "image": document.getElementById('divMotImPath-'+iMot).innerHTML
+            "audio": document.getElementById('fileuploaded-'+iMot+'a').firstChild.href,
+            "image": document.getElementById('fileuploaded-'+iMot+'b').firstChild.href
         };
 
         var entreeTable = []; // contiendra la liste des mots avec leurs phono sélectionnées (pour générer toutes les combi à la fin)
@@ -285,4 +289,48 @@ function makeSerieMots(){
         console.log(entree);
         serieMots.push(entree);
     }
-}
\ No newline at end of file
+}
+
+
+// UPLOAD FILES WITH JQUERY
+// https://simpleisbetterthancomplex.com/tutorial/2016/11/22/django-multiple-file-upload-using-ajax.html
+function uploadAudio(target){
+    $("#audiofileupload").click();
+    /* INITIALIZE THE FILE UPLOAD COMPONENT */
+    $("#audiofileupload").fileupload({
+        dataType: 'json',
+        done: function (e, data) {  /* 3. PROCESS THE RESPONSE FROM THE SERVER */
+        if (data.result.is_valid) {
+            console.log(data);
+            document.getElementById("fileuploaded-"+target).innerHTML = "<a href='" + data.result.url + "'>" + data.result.name + "</a>";
+            window.alert(data.result.message);
+        } else {
+            window.alert(data.result.message);
+        }
+        }
+    });
+
+    //$("#fileupload-"+target).click();
+};
+
+function uploadImage(target){
+    $("#imagefileupload").click();
+    /* INITIALIZE THE FILE UPLOAD COMPONENT */
+    $("#imagefileupload").fileupload({
+        dataType: 'json',
+        done: function (e, data) {  /* 3. PROCESS THE RESPONSE FROM THE SERVER */
+        if (data.result.is_valid) {
+            // console.log(data);
+            document.getElementById("fileuploaded-"+target).innerHTML = "<a href='" + data.result.url + "'>" + data.result.name + "</a>";
+            window.alert(data.result.message);
+        } else {
+            window.alert(data.result.message);
+        }
+        }
+    });
+
+    //$("#fileupload-"+target).click();
+};
+  
+
+  

static/js/fileup/app.js

+/*
+ * jQuery File Upload Plugin Angular JS Example
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* jshint nomen:false */
+/* global window, angular */
+
+;(function () {
+    'use strict';
+
+    var isOnGitHub = window.location.hostname === 'blueimp.github.io',
+        url = isOnGitHub ? '//jquery-file-upload.appspot.com/' : 'server/php/';
+
+    angular.module('demo', [
+        'blueimp.fileupload'
+    ])
+        .config([
+            '$httpProvider', 'fileUploadProvider',
+            function ($httpProvider, fileUploadProvider) {
+                delete $httpProvider.defaults.headers.common['X-Requested-With'];
+                fileUploadProvider.defaults.redirect = window.location.href.replace(
+                    /\/[^\/]*$/,
+                    '/cors/result.html?%s'
+                );
+                if (isOnGitHub) {
+                    // Demo settings:
+                    angular.extend(fileUploadProvider.defaults, {
+                        // Enable image resizing, except for Android and Opera,
+                        // which actually support image resizing, but fail to
+                        // send Blob objects via XHR requests:
+                        disableImageResize: /Android(?!.*Chrome)|Opera/
+                            .test(window.navigator.userAgent),
+                        maxFileSize: 999000,
+                        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
+                    });
+                }
+            }
+        ])
+
+        .controller('DemoFileUploadController', [
+            '$scope', '$http', '$filter', '$window',
+            function ($scope, $http) {
+                $scope.options = {
+                    url: url
+                };
+                if (!isOnGitHub) {
+                    $scope.loadingFiles = true;
+                    $http.get(url)
+                        .then(
+                            function (response) {
+                                $scope.loadingFiles = false;
+                                $scope.queue = response.data.files || [];
+                            },
+                            function () {
+                                $scope.loadingFiles = false;
+                            }
+                        );
+                }
+            }
+        ])
+
+        .controller('FileDestroyController', [
+            '$scope', '$http',
+            function ($scope, $http) {
+                var file = $scope.file,
+                    state;
+                if (file.url) {
+                    file.$state = function () {
+                        return state;
+                    };
+                    file.$destroy = function () {
+                        state = 'pending';
+                        return $http({
+                            url: file.deleteUrl,
+                            method: file.deleteType
+                        }).then(
+                            function () {
+                                state = 'resolved';
+                                $scope.clear(file);
+                            },
+                            function () {
+                                state = 'rejected';
+                            }
+                        );
+                    };
+                } else if (!file.$cancel && !file._index) {
+                    file.$cancel = function () {
+                        $scope.clear(file);
+                    };
+                }
+            }
+        ]);
+
+}());

static/js/fileup/jquery.fileupload-angular.js

+/*
+ * jQuery File Upload AngularJS Plugin
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/* jshint nomen:false */
+/* global define, angular, require */
+
+;(function (factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        // Register as an anonymous AMD module:
+        define([
+            'jquery',
+            'angular',
+            './jquery.fileupload-image',
+            './jquery.fileupload-audio',
+            './jquery.fileupload-video',
+            './jquery.fileupload-validate'
+        ], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS:
+        factory(
+            require('jquery'),
+            require('angular'),
+            require('./jquery.fileupload-image'),
+            require('./jquery.fileupload-audio'),
+            require('./jquery.fileupload-video'),
+            require('./jquery.fileupload-validate')
+        );
+    } else {
+        factory();
+    }
+}(function () {
+    'use strict';
+
+    angular.module('blueimp.fileupload', [])
+
+        // The fileUpload service provides configuration options
+        // for the fileUpload directive and default handlers for
+        // File Upload events:
+        .provider('fileUpload', function () {
+            var scopeEvalAsync = function (expression) {
+                    var scope = angular.element(this)
+                            .fileupload('option', 'scope');
+                    // Schedule a new $digest cycle if not already inside of one
+                    // and evaluate the given expression: