<!DOCTYPE html>
<html lang="en">
  <head>
      <% include ../partials/head %>
  </head>
  <body>
    <% include ../partials/nav %>
    <div class="container">
      <div class="jumbotron">
        <h1 class="display-4">AIFEX </h1>
        <p class="lead">Improve the quality, efficiency and diversity of your exploratory test sessions</p>
        <hr class="my-4"></hr>
        
        <h2>Welcome <%= account.username%> !</h2>
        
        <h3>Your WebSite(s)</h3>
        <table id="web-list" class="table table-striped table-bordered">
          <thead class="thead-dark">
            <tr>
                <th scope="col" align="center">Name</th>
                <th scope="col" align="center">Update</th>
                <th scope="col" align="center">Download (Mapping)</th>
                <th scope="col" align="center">Evaluator</th>
                <th scope="col" align="center">Remove</th>
            </tr>
          </thead>
        
          <tbody>
            <% webSiteList.forEach((webSite,i) => { %>
              <tr>
                <td><%= webSite.name %> </td>
                <td><a href="/dashboard/website/update/<%=webSite.id %>"><i class="fas fa-wrench"></i></a></td>
                <td class="mapping-rule" name="<%= webSite.name %>"><a href="/" ><i class="fas fa-download"></i></a><span hidden><%= JSON.stringify(webSite.mappingList)%></span></td>
                <% if (webSite.evaluator) { %>
                  <td><a href="/dashboard/evaluation/update/<%=webSite.id %>"><i class="fas fa-tasks"></i></a></td>
                <%} else {%>
                  <td><a href="/dashboard/evaluation/create/<%=webSite.id %>"><i class="fas fa-tasks"></i></a></td>
                <% } %>
                <td><a href="/dashboard/website/remove/<%=webSite.id %>" onclick="return confirm('Are you sure you want to remove this WebSite?');"><i class="fas fa-trash-alt"></i></a></td>
              </tr>
            <% }); %>
          </tbody>
        </table>
        <a role="button" class="btn btn-primary" href="/dashboard/website/create">Create New WebSite</a>
        <br/>
        <hr class="my-4"></hr>

        <h3>Your Session(s)</h3>
        <table id="session-list" class="table table-striped table-bordered">
          <thead class="thead-dark">
            <tr>
                <th scope="col" align="center">Connection Code</th>
                <th scope="col" align="center">WebSite</th>
                <th scope="col" align="center">View</th>
                <th scope="col" align="center">Download</th>
                <th scope="col" align="center">Remove</th>
            </tr>
          </thead>
        
          <tbody>
            <% connectionCodeList.forEach((connectionCode,i) => { %>
              <tr>
                <td><%= connectionCode %></td>
                <td><%= sessionList[i].webSite.name %></td>
                <td><a href="/dashboard/session/view/<%=connectionCode %>"><i class="fas fa-chart-bar"></i></a></td>
                <td class="download-session" sessionId="<%= connectionCode %>"><a href="/" ><i class="fas fa-download"></i></a></td>
                <td><a href="/dashboard/session/remove/<%=connectionCode %>" onclick="return confirm('Are you sure you want to remove this Session?');"><i class="fas fa-trash-alt"></i></a></td>
              </tr>
            <%}); %>
          </tbody>
        </table>
        <% if (webSiteList.length > 0) { %>
          <a role="button" class="btn btn-primary" href="/dashboard/session/start">Start New Session</a>
        <% } else { %>
            <button class="btn btn-secondary" href="/dashboard/session/start" disabled>Start New Session</button>
        <% } %>
        <hr class="my-4"></hr>
      </div>
    </div>

    <script>
      window.onload = function() {
        console.log('on load');
        let ruleList = document.querySelectorAll('.mapping-rule');
        ruleList.forEach( rule => {
          let a = rule.querySelector('a');
          let span = rule.querySelector('span');
          let mappingRuleList = JSON.parse(span.innerText);
          let toSave= mappingRuleList.map(mappingRule => {
            return {
              match: mappingRule.match, 
              output:mappingRule.output
            };
          });
          let name = rule.getAttribute("name");
          let data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(toSave));
          a.href = 'data:' + data;
          a.download = name+'.json';
        });   

        let sessionList = document.querySelectorAll('.download-session');
        sessionList.forEach( session => {
          let sessionId = session.getAttribute('sessionId').split('$')[0];
          let a = session.querySelector('a');
          if (sessionId !== undefined) {
            const URL = "/dashboard/session/"+sessionId+"/json/";
            fetch(URL)
              .then(response => {
                if (response.ok) {
                  response.json()
                    .then( sessionToSave => {
                      let data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(sessionToSave));
                      a.href = 'data:' + data;
                      a.download = 'session_'+sessionId+'.json';
                    })
                }
              })
          }
        })
      }
    </script>
  </body> 
</html>