changes

[lolstats] / html / index.html
diff --git a/html/index.html b/html/index.html

index 25d8fce19075ac55c5e92a7b1a7943d114efd36b..e39dec9c4f769e833b2a4d39ec4471cd08afe582 100644 (file)
--- a/html/index.html
+++ b/html/index.html
@@ -11,6 +11,8 @@
      <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.js"></script>
    </head>
    <body style="">
      <div id="background"></div>
    </head>
    <body style="">
      <div id="background"></div>
@@ -20,7 +22,7 @@
        <div id="start">
          <!-- Main panel -->
          <!--
        <div id="start">
          <!-- Main panel -->
          <!--
-        <span id="title">Enter Your Summoner Name</span>
+          <span id="title">Enter Your Summoner Name</span>
          -->
          <div id="inputpanel">
            <select id="regionselect">
          -->
          <div id="inputpanel">
            <select id="regionselect">
@@ -34,32 +36,46 @@
        <div id="matchhistory" style="display: none">
          <div id="historyfilters">
            <button id="statsbutton" v-on:click="historyToStats">Statistics</button>
        <div id="matchhistory" style="display: none">
          <div id="historyfilters">
            <button id="statsbutton" v-on:click="historyToStats">Statistics</button>
-          <label for="champselect">Champion</label>
-          <select id="champselect">
-            <option>All</option>
-            <option v-for="c in champions">{{ c }}</option>
-          </select>
+          <div id="champselect">
+            <button class="champselect" v-on:click="selectAll">All</button>
+            <button class="champselect" v-on:click="selectNone">None</button><br />
+            <span v-for="c in champions"><input class="champselectcb" type="checkbox" />{{ c }}<br /></span>
+          </div>
            <button id="refreshbutton" v-on:click="refreshHistory">Refresh</button>
          </div>
          <hr />
            <button id="refreshbutton" v-on:click="refreshHistory">Refresh</button>
          </div>
          <hr />
-        <div id="matchlist">
-          <table>
-            <tr>
-              <th v-for="c in matchprops">{{ c.text }}</th>
-            </tr>
-            <tr v-for="m in matches">
-              <td v-for="c in matchprops">{{ m[c.name] }}</td>
-            </tr>
-          </table>
+        <div id="matchlist" class="clusterize">
+          <div style="position: relative; width: 100%; height: 100%; max-height: 100%" id="scrollArea" class="clusterize-scroll">
+            <table>
+              <tbody id="contentArea" class="clusterize-content">
+                <tr>
+                  <th>Icon</th>
+                  <th v-for="c in matchprops">{{ c.text }}</th>
+                </tr>
+                <tr v-for="m in matches">
+                  <td><img class="championIcon" :src="'http://ddragon.leagueoflegends.com/cdn/8.24.1/img/champion/' + m.championString + '.png'"></img></td>
+                  <td v-for="c in matchprops">{{ m[c.name] }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
          </div>
        </div>
        <div id="stats" style="display: none">
          </div>
        </div>
        <div id="stats" style="display: none">
+        <div id="statsfilters">
          <button id="historybutton" v-on:click="statsToHistory">Match history</button>
          <button id="historybutton" v-on:click="statsToHistory">Match history</button>
+        </div>
        </div>
  
      </div>
  
      <!-- Vue.js Script -->
      <script src="lol/script.js"></script>
        </div>
  
      </div>
  
      <!-- Vue.js Script -->
      <script src="lol/script.js"></script>
+    <script>
+      var clusterize = new Clusterize({
+        scrollId: 'scrollArea',
+        contentId: 'contentArea',
+      });
+    </script>
    </body>
  </html>
    </body>
  </html>