{% extends "layout.html" %} {% block content %} <script> $(function(){ $('#word').keyup(function(e){ var input = $(this).val(); $.ajax({ type: "get", url: "complete", data: {v: input}, async: true, success: function(data){ var outWords = $.parseJSON(data); $('#auto').html(''); for(x = 0; x < outWords.length; x++){ $('#auto').prepend('<option value="' + outWords[x][0] + '">'+outWords[x][1]+'</option>'); //Fills the #auto div with the options } } }) }) }); </script> <h2>Trancher un joueur</h2> <p> Ta cible sera notifiée quelle que soit l'issue de ta tentative. Question chance, c'est 50-50. </p> <form id="select" action="" method="post"> <label for="word">Écrit le nom de ta victime </label> <input type="text" name="search" id="word"> <label for="auto">et choisit-la :</label> <select id="auto" name="target_id"> <option value="none">(sélectionner un joueur)</option> {% for p in players %} <option value="{{p.id}}">{{p.name}} {{p.firstname}}</option> {% endfor %} </select> <input type="submit" value="Tchak !" /> </form> <h2> <a href="{{ url_for('home') }}">« retour à l'accueil</a> </h2> <div id="container" style="min-width: 310px; max-width: 600px; margin: 0 auto"></div> <script type="text/javascript"> $(function () { Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: 0, plotShadow: false }, title: { text: 'État du Rézo', align: 'center', verticalAlign: 'middle', y: 60 }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { dataLabels: { enabled: true, distance: -50, style: { fontWeight: 'bold', color: 'white' } }, startAngle: -90, endAngle: 90, center: ['50%', '75%'] }, }, series: [{ type: 'pie', name: 'État du Rézo', innerSize: '50%', data: [ { name: 'Tranchés', y: {{ stats[0] }}, color: '#FF0000', },{ name: 'Vivants', y: {{ stats[1] }}, color: '#FFCC00', } ] }] }); }); </script> {% endblock %}