add reactions images to npc view

truthinquiry/routes/routes_admin.py

@@ -35,11 +35,27 @@ def npc(npc_id):
             answer_list = [answer.TEXT for answer in answer_type.TEXT_LOCALE.TEXTS]
             npc_answers.append(answer_list)
         
+        reactions = [{
+            "id": reaction.TRAIT.TRAIT_ID,
+            "name": reaction.TRAIT.NAME_LOCALE.get_text(DEFAULT_LANG).TEXT,
+            "url": "/api/v1/getReaction?uuid="+reaction.REACTION_UUID
+        } for reaction in npc_obj.REACTIONS]
+
+        reactions_to_add = []
+        for trait in db.session.query(Trait).all():
+            if trait.TRAIT_ID not in [reaction.TRAIT.TRAIT_ID for reaction in npc_obj.REACTIONS]:
+                reactions_to_add.append({
+                    "id": trait.TRAIT_ID,
+                    "name": trait.NAME_LOCALE.get_text(DEFAULT_LANG).TEXT
+                })
+
         npc_dict = {
             "id": npc_obj.NPC_ID,
             "name": npc_obj.NAME_LOCALE.get_text(DEFAULT_LANG).TEXT,
             "img": npc_obj.NPC_ID,
             "answers": npc_answers,
+            "reactions": reactions,
+            "reactions_to_add": reactions_to_add,
         }
 
         return flask.render_template("admin/npc.html", npc=npc_dict)

truthinquiry/static/js/admin_npc.js

@@ -31,3 +31,14 @@ async function deleteNpc() {
     alert("Opération effectuée avec succès");
     document.location = "/admin";
 }
+
+function changeReaction(inputNode){
+    const parentNode = inputNode.parentNode;
+    const imgNode = parentNode.querySelector('img');
+    
+    const reader = new FileReader();
+    reader.onload = (e)=>{
+        imgNode.src = e.target.result
+    }
+    reader.readAsDataURL(inputNode.files[0]);
+}

truthinquiry/templates/admin/npc.html

@@ -34,6 +34,28 @@
             <p class="info_item">Image du personnage</p>
             <img class="character_image" alt="{{'Image du personnage' + (' ' + npc.get('name') if npc.get('name') else '')}}" src="{{'/static/images/no_photography_white.svg' if npc.get('img') == None else '/api/v1/getNpcImage?npcid=' + npc.get('img')|string}}">
         </section>
+        
+        <section>
+            <h2 class="section_title">Réactions</h2>
+            
+            {%for reaction in npc.get("reactions")%}
+            <div>
+                <p> {{reaction.get('name')}} </p>
+                <img src="{{reaction.get('url')}}" style="max-width: 100; max-height: 100px">
+                <input type="file" accept="image/png, image/jpeg" onchange="changeReaction(this)">
+            </div>
+            {%endfor%}
+            
+
+            {%if npc.get("reaction_to_add")%}
+            <select>
+                {%for reaction_to_add in npc.get("reaction_to_add")%}
+                <option value="{{reaction_to_add.get('id')}}">{{reaction_to_add.get('name')}}</option>
+                {%endfor%}
+            </select>
+            {%endif%}
+        </section>
+
         <section>
             <h2 class="section_title">Réponses aux questions lors de l'interrogation</h2>
             <div class="answer_groups">