[chronojump-server] Implemented image display in player update form

[Max Ros i Morejon <maxros src gnome org>]

commit d5f936fd4f6e978279226f77aef2fd8c2051a069
Author: Max Ros i Morejon <mros33 gmail com>
Date:   Fri Apr 5 14:03:08 2019 +0200

    Implemented image display in player update form

 .../chronojump_networks/organizations/api/views.py |  2 +-
 .../players/add_edit_player_form.html              | 13 ++++++++-----
 .../organizations/players/players_list.html        | 22 +++++++---------------
 3 files changed, 16 insertions(+), 21 deletions(-)
---
diff --git a/chronojumpserver-django/chronojump_networks/organizations/api/views.py 
b/chronojumpserver-django/chronojump_networks/organizations/api/views.py
index 29f410c..b15afb0 100644
--- a/chronojumpserver-django/chronojump_networks/organizations/api/views.py
+++ b/chronojumpserver-django/chronojump_networks/organizations/api/views.py
@@ -129,9 +129,9 @@ class PlayerListView(ListCreateAPIView):
             newimage = '../static/images/no_image.png'
         else:
             print("yes photo")
-            newimage = 'players/' + new_photo
             photo = data['image'][0]
             new_photo = photo.name + '_' + str(int(time()))
+            newimage = 'players/' + new_photo
             full_path = os.path.join(settings.MEDIA_ROOT, 'players', new_photo)
             path = default_storage.save(full_path, ContentFile(photo.read()))
             print(new_photo)
diff --git 
a/chronojumpserver-django/chronojump_networks/templates/organizations/players/add_edit_player_form.html 
b/chronojumpserver-django/chronojump_networks/templates/organizations/players/add_edit_player_form.html
index ad76e85..8189c80 100644
--- a/chronojumpserver-django/chronojump_networks/templates/organizations/players/add_edit_player_form.html
+++ b/chronojumpserver-django/chronojump_networks/templates/organizations/players/add_edit_player_form.html
@@ -17,16 +17,15 @@
        <form>
                                        <div class="row">
           <div class="col-sm-4">
+                        <div class="form-group">
+                            <img id="imgView" src="{% static 'images/no_image.png' %}" alt="player_image" 
style="width:100%;
+                            height:100%; object-fit: contain">
+                        </div>
                                                <div class="form-group col-sm-4">
-                                                       <label for="photo">{% trans 'Photography' %}</label>
                                                        <p>
                                 <input id="id_image" type="file" class="" name="image" 
enctype='multipart/form-data'>
                             </p>
                                                </div>
-                                               <div class="form-group">
-                                                       <label for="number">{% trans 'Number' %}</label>
-                                                       <input name="number" class="form-control" id="number" 
type="number">
-                                               </div>
           </div>
           <div class="col-sm-8">
                         <div class="form-group">
@@ -44,6 +43,10 @@
                                                        </div>
                                                </div>
                                                <div class="form-group">
+                                                       <label for="number">{% trans 'Number' %}</label>
+                                                       <input name="number" class="form-control" id="number" 
type="number">
+                                               </div>
+                                               <div class="form-group">
                             <label for="rfid">{% trans 'Rfid' %}</label>
                             <div class="form-row">
                                 <div class="col-sm-10">
diff --git a/chronojumpserver-django/chronojump_networks/templates/organizations/players/players_list.html 
b/chronojumpserver-django/chronojump_networks/templates/organizations/players/players_list.html
index c037953..f3b45d0 100644
--- a/chronojumpserver-django/chronojump_networks/templates/organizations/players/players_list.html
+++ b/chronojumpserver-django/chronojump_networks/templates/organizations/players/players_list.html
@@ -221,7 +221,8 @@
       $('#weight').val('');
       $('#number').val('');
       $('#input_rfid').val('');
-      $('#id_image').val('');
+      $('#id_image').val(null);
+      $("#imgView").attr("src", 'http://localhost:8000/static/images/no_image.png');
     }
     
     $('#btn_read_rfid').click(function() {
@@ -256,6 +257,10 @@
         }
     })
     
+    $('#id_image').on('change', function() {
+        //$("#imgView").attr("src", $('#id_image')[0].files[0]);
+    })
+    
      // Get all the values in the form into json object 
     function serializePlayer() {
         console.log("id = " + $('#personId').val());
@@ -277,16 +282,6 @@
         formdata.append('number',player_number);
         formdata.append('rfid',player_rfid);
         console.log(formdata);
-        //if(player_image=='') player_image = 'chronojump_networks/static/images/no_image.png'
-        /*var player = {
-            'id': player_id,
-            'name': player_name,
-            'height': player_height,
-            'weight': player_weight,
-            'image': player_image,
-            'number': player_number,
-            'rfid': player_rfid
-        }*/
         return formdata;
     }
     
@@ -300,10 +295,7 @@
       $('#number').val(player.number);
       $('#input_rfid').val(player.rfid);
       console.log(player.image);      
-      /*if(player.image.url=='chronojump_networks/static/images/no_image.png') $('#id_image').val('');
-      else $('#id_image').val(player.image.url);*/
-      
-      $('#image').val(player.image);
+      $("#imgView").attr("src", player.image);
     }
     
     function putPlayer(player) {