Untitled

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="/static/style.css">
  <link rel="stylesheet" type="text/css" href="/static/weather_card.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/static/snap.svg-min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
  <script type="text/javascript" src="/static/simulator.js"></script>
</head>
<body>

  <div class="container">
    <div class="row">
       <div class="col-md-10">
          <h1>ALZ-E Companion </h1>
          <h3>Interface pour tester le corpus d'ELZA.</h3>
          <div id="chatbox">
            <!--<p class="botText"><span>Bonjour! Je suis ELZA, votre compagnon personnalisé.</span></p>-->
          </div>
          <div id="userInput">
            <input id="textInput" type="text" name="msg" placeholder="Message">
            <input id="buttonInput" class="btn btn-light" type="submit" value="Envoyer">
          </div>
           <div id="weatherContent"></div>
          <script>
            var idleTime, idle = 0;
            $(document).ready(function () {
                //Increment the idle time counter every minute.
                var idleInterval = setInterval(timerIncrement, 60000); // 30 minute
                //Zero the idle timer on mouse movement.
                $(this).mousemove(function (e) {
                    idleTime = 0;
                });
                $(this).keypress(function (e) {
                    idleTime = 0;
                });
            });

            function timerIncrement() {
                idleTime = idleTime + 1;
                if (idleTime > 1) { // 2 minutes
                    validation();
                }
            }

            function validation() {
                idle++;
                console.log(idle);
                if (idle == 3) {
                  $("#textInput").val('[temp:silence_mode_2]');
                  getBotResponse();
                }else if (idle < 3) {
                  $("#textInput").val('[temp:silence_mode]');
                  getBotResponse();
                }
            }
            function getBotResponse() {
              var rawText = $("#textInput").val();
              var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
              $("#textInput").val("");
              console.log(rawText);
              if( !(rawText.startsWith("[") && rawText.endsWith("]")) ){
                  $("#chatbox").append(userHtml);
              }
              document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
              $.get("/getResponse", { msg: rawText }).done(function(data) {
                var botHtml = '<p class="botText"><span>' + data + '</span></p>';
                $("#chatbox").append(botHtml);
                document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
              });
            }

            $("#textInput").keypress(function(e) {
                if(e.which == 13) {
                    getBotResponse();
                }
            });
            $("#buttonInput").click(function() {
               getBotResponse();
            })
          </script>
        </div>
        <div class="col-md-2 selector">
            <select id="select" class="custom-select">
              <optgroup label="Nutrition">
                <option value="nutrition un">Scénario 1</option>
                <option value="nutrition deux">Scénario 2</option>
              </optgroup>
              <optgroup label="Meteo">
                  <option value="weather_card"></option>
              </optgroup>
            </select>

            <p id="description">Dans ce scénario ELZA essaye de savoir les repas préférables du patient. elle commence la discussion sous forme des questions qui demandent des réponses oui/non pour construire une idée sur les préférences du patient.</p>
            <input id="button" class="btn btn-info" type="submit" value="Simuler">
            <script>
              function getDescription(value) {
                    descriptions=[{
                             "value":"nutrition un",
                             "text":"Dans ce scénario ELZA essaye de savoir les repas préférables du patient. elle commence la discussion sous forme des questions qui demandent des réponses oui/non pour construire une idée sur les préférences du patient."},
                             {
                             "value":"nutrition deux",
                             "text":"Dans ce scénario ELZA demande le patient s’il est faim ou non. S’il a dit non elle lui demande quand il va manger et qu’est ce qu’il aime manger."}

                             ];
                    for (var i = 0; i < 9; i++) {
                      if(descriptions[i].value == value){
                        return descriptions[i].text ;
                      }
                      if( value == "weather_card") {
                          $("#weatherContent").load("weather_card.html");
                      }
                    }
                    return "Pas de description"

              }
              $("#select").change(function() {
                var e = document.getElementById("select");
                var value = e.options[e.selectedIndex].value;
                $("#description").html(getDescription(value));
              });
              $("#button").click(function() {
                 initiate();
              })
            </script>

        </div>
    </div>
  </div>

</body>
</html>