diff options
| author | Patrick Schönberger | 2018-12-13 20:44:24 +0100 |
|---|---|---|
| committer | Patrick Schönberger | 2018-12-13 20:44:24 +0100 |
| commit | 836aefac5aba1a288561cf1bd5a2cdb9a060097e (patch) | |
| tree | e5d87bd5e51b67e61ec831d918ddd393db3da435 /html/index.html | |
| parent | 76d1ea9033c64619e80e38890e50cf023a8bd971 (diff) | |
| download | lolstats-836aefac5aba1a288561cf1bd5a2cdb9a060097e.tar.gz lolstats-836aefac5aba1a288561cf1bd5a2cdb9a060097e.zip | |
changes
Diffstat (limited to 'html/index.html')
| -rw-r--r-- | html/index.html | 46 |
1 files changed, 31 insertions, 15 deletions
diff --git a/html/index.html b/html/index.html index 25d8fce..e39dec9 100644 --- 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> + <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> @@ -20,7 +22,7 @@ <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"> @@ -34,32 +36,46 @@ <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 /> - <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 id="statsfilters"> <button id="historybutton" v-on:click="statsToHistory">Match history</button> + </div> </div> </div> <!-- Vue.js Script --> <script src="lol/script.js"></script> + <script> + var clusterize = new Clusterize({ + scrollId: 'scrollArea', + contentId: 'contentArea', + }); + </script> </body> </html> |