AutolabJS/AutolabJS

View on GitHub
deploy/plays/templates/main_server/public/index.html.j2

Summary

Maintainability
Test Coverage
<html>

  <head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <meta charset="utf-8">
   <title>AutolabJS - auto evaluation for collaborative programmers</title>
    <link href="css/icon.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>

  <script src="/socket.io/socket.io.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script type="text/javascript" src="js/FileSaver.min.js"></script>
  <script src="js/userlogic.js"> </script>

  <body>
    <nav class="light-blue darken-3" role="navigation" style="position: fixed; z-index: 1000">
      <div class="nav-wrapper container"><a id="logo-container" href="/" class="brand-logo">{{ course_number ~ ":" ~ course_name }}</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a target="_blank" href="https://{{ gitlab_hostname }}">GitLab</a></li>
        <ul class="right hide-on-med-and-down">
          <ul id="dropdown1" class="dropdown-content">
            <li><a target="_blank" href="{{ submission_url }}">Submission</a></li>
            <li class="divider"></li>
            <li><a target="_blank" href="{{ self_evaluation_url }}">Post Lab</a></li>
          </ul>
          <li><a class="dropdown-button" href="" data-activates="dropdown1">Guides<i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
      </ul>
      </div>
    </nav>
    <main>
      <div class = "container">

        <div id = "loadingDiv" class = "centered">
          <br><br><br><br><br><br><br>
          <h4 class = "header light">Fetching Lab Data...</h4>
          <br><br>
          <div class="preloader-wrapper big active">
            <div class="spinner-layer spinner-blue">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div><div class="gap-patch">
                <div class="circle"></div>
              </div><div class="circle-clipper right">
                <div class="circle"></div>
              </div>
            </div>

            <div class="spinner-layer spinner-red">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div><div class="gap-patch">
                <div class="circle"></div>
              </div><div class="circle-clipper right">
                <div class="circle"></div>
              </div>
            </div>

            <div class="spinner-layer spinner-yellow">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div><div class="gap-patch">
                <div class="circle"></div>
              </div><div class="circle-clipper right">
                <div class="circle"></div>
              </div>
            </div>

            <div class="spinner-layer spinner-green">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div><div class="gap-patch">
                <div class="circle"></div>
              </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
            </div>
        </div>
      </div>

      <div id="labs">
        <br><br><br><br><br>
        <div id="labContainer">
          <h4> Active Labs </h4>
          <div id="activeLabContainer">
            <div class="row">
            </div>
            <div class="collection">
            <p class="collection-item">No labs to show.</p>
            </div>
          </div>
          <br>
          <h4> Archived Labs </h4>
          <div id="inactiveLabContainer">
            <div class="row">
            </div>
            <div class="collection">
            <p class="collection-item">No labs to show.</p>
            </div>
          </div>
          </div>
        </div>

        <div id="submission">
          <br><br><br><br><br><br>
          <div class="row">
            <div id="formDiv">
            <div class = "input-field width-20">
              <input id = "nameField" type="text" class = "validate">
              <label for="nameField">ID Number (eg. 2015A7PS001G)</label>
            </div>
            <div class = "input-field width-20">
              <input id = "commitHash" type="text" class = "validate">
              <label for="commitHash">Commit Hash (leave blank for latest commit in master)</label>
            </div>
            <div class = "input-field width-20">
              <select id="language">
                <option value="java">Java</option>
                <option value="c">C</option>
                <option value="cpp">C++</option>
                <option value="cpp14">C++ 14</option>
                <option value="python2">Python 2</option>
                <option value="python3">Python 3</option>
              </select>
              <label for="language">Language</label>
            </div>
              <a id="submitButton" class="btn waves-effect waves-light light-blue darken-3" style = "width: 100%;">Submit</a>
            </div>
          </div>
        </div>

        <div id = "evaluating" class = "centered">
          <br><br><br><br><br><br><br>
          <h4 class = "header light">Evaluating...</h4>
          <br><br>
          <div class="preloader-wrapper big active">
            <div class="spinner-layer spinner-blue">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div><div class="gap-patch">
                <div class="circle"></div>
              </div><div class="circle-clipper right">
                <div class="circle"></div>
              </div>
            </div>

            <div class="spinner-layer spinner-red">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div><div class="gap-patch">
                <div class="circle"></div>
              </div><div class="circle-clipper right">
                <div class="circle"></div>
              </div>
            </div>

            <div class="spinner-layer spinner-yellow">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div><div class="gap-patch">
                <div class="circle"></div>
              </div><div class="circle-clipper right">
                <div class="circle"></div>
              </div>
            </div>

            <div class="spinner-layer spinner-green">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div><div class="gap-patch">
                <div class="circle"></div>
              </div><div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
            </div>
        </div>
      </div>

        <div id="marks">
          <br><br><br>
          <table class="striped">
            <thead>
              <tr>
                <th data-field="testcase">Test Case #</th>
                <th data-field="status">Status</th>
                <th data-field="score">Score</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
          <br>
          <br>
          <div>
            <pre id="log"></pre>
          </div>
        </div>

        <div id="scorecard">
          <br><br><br><br>
          <div id="download">
          </div>
          <table class="striped">
            <thead>
              <tr>
                <th data-field="rank">Position</th>
                <th data-field="id">ID Number</th>
                <th data-field="score">Score</th>
                <th data-field="time">Time</th>
              </tr>
            </thead>

            <tbody>
            </tbody>
          </table>
        </div>

        <div id="invalidLab">
          <br><br><br><br><br><br><br>
          <h4 class = "header light">Access Denied.</h4>
          <p class = "header light">Please try submitting again.</p>
        </div>
        <div id="submission_pending">
          <br><br><br><br><br><br><br>
          <h4 class = "header light">You have a pending submission</h4>
          <p class = "header light">Please try after some time.</p>
        </div>
    </div>
    </main>

    <footer class="page-footer light-blue darken-3">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">About</h5>
            <p class="grey-text text-lighten-4">This is an auto evaluation service.<br>
              Please report any bugs to the <a class="grey-text text-lighten-4" target="_blank" href="https://github.com/AutolabJS/AutolabJS/issues/new">development team</a>. <br>
              Interested in contributing? Find the source code <a class="grey-text text-lighten-4" target="_blank" href="https://github.com/AutolabJS/AutolabJS"><b>here</b></a>.
            </p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Instructors</h5>
            <ul id = "instructors">

              <!-- <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li> -->
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        <a class="grey-text text-lighten-4" target="_blank" href="https://github.com/AutolabJS/AutolabJS/graphs/contributors"><b>Contributors</b></a>
        </div>
      </div>
    </footer>

  </body>

</html>