Skip to content

Commit

Permalink
changed dropdowns to full bootstrap multiselects
Browse files Browse the repository at this point in the history
  • Loading branch information
@hcaseyal
hcaseyal committed Dec 4, 2017
1 parent 80df605 commit b698460
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 32 deletions.
2 changes: 1 addition & 1 deletion index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
table-layout: fixed;
}

td {
.analysis-cell {
vertical-align: top;
width: 1%;
padding: 15px;
Expand Down
35 changes: 22 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,18 @@
<script src="DataTables/datatables.min.js"></script>
<link rel="stylesheet" href="DataTables/datatables.css">
<link rel="stylesheet" href="node_modules/@blueprintjs/core/dist/blueprint.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> -->
<script src="jquery-ui.min.js"></script>

<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="node_modules/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>

</head>

<body>
Expand All @@ -26,16 +35,16 @@

<div class="filters">
Self:
<select class="championSelect-self"></select>
<select class="roleSelect-self"></select>
<select class="championSelect-self" multiple="multiple"></select>
<select class="roleSelect-self" multiple="multiple"></select>
<br/>
Allies:
<select class="championSelect-ally"></select>
<select class="roleSelect-ally"></select>
<select class="championSelect-ally" multiple="multiple"></select>
<select class="roleSelect-ally" multiple="multiple"></select>
<br/>
Enemies:
<select class="championSelect-enemy"></select>
<select class="roleSelect-enemy"></select>
<select class="championSelect-enemy" multiple="multiple"></select>
<select class="roleSelect-enemy" multiple="multiple"></select>
<div class="timeSliderWrapper">
<div class="timeSlider"> </div>
</div>
Expand Down Expand Up @@ -67,26 +76,26 @@
<table class="analysis-layout">
<tbody>
<tr>
<td>
<td class="analysis-cell">
<table id="enemyRoleKilled" class="display" width="100%"></table>
</td>
<td>
<td class="analysis-cell">
<table id="enemyChampKilled" class="display" width="100%"></table>
</td>
</tr>
<tr>
<td>
<td class="analysis-cell">
<table id="participatingAllyRoles" class="display" width="100%"></table>
</td>
<td>
<td class="analysis-cell">
<table id="participatingAllyChamps" class="display" width="100%"></table>
</td>
</tr>
<tr>
<td>
<td class="analysis-cell">
<table id="participatingEnemyRoles" class="display" width="100%"></table>
</td>
<td>
<td class="analysis-cell">
<table id="participatingEnemyChamps" class="display" width="100%"></table>
</td>
</tr>
Expand Down
53 changes: 38 additions & 15 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,8 +295,7 @@ function createChampionMap(data) {
}

function drawChampionSelectFilter(componentName) {
var select = d3.select(componentName)
.on('change', updateMap);
var select = d3.select(componentName);

var championArray = [];
Object.keys(championData).forEach(function(k){
Expand All @@ -307,28 +306,45 @@ function drawChampionSelectFilter(componentName) {
return d3.ascending(x.name, y.name);
});

sortedData.unshift({name: "All champions", id: 0});
var options = select
.selectAll('option')
.data(sortedData)
.enter()
.append('option')
.text(d => d.name)
.attr('value', d => d.key)
.attr('value', d => d.key);

$(componentName).multiselect({
includeSelectAllOption: true,
selectAllText: "All Champions",
onSelectAll: updateMap,
onDeselectAll: updateMap,
onChange: updateMap,
maxHeight: 200,
enableCaseInsensitiveFiltering: true
});
}

function drawRoleSelectFilter(componentName) {
var select = d3.select(componentName)
.on('change', updateMap);
var select = d3.select(componentName);

var roleArray = ["All roles", "Top", "Jungle", "Mid", "ADC", "Support"];
var roleArray = ["Top", "Jungle", "Mid", "ADC", "Support"];
var options = select
.selectAll('option')
.data(roleArray)
.enter()
.append('option')
.text(d => d)
.attr('value', d => d)
.attr('value', d => d);

$(componentName).multiselect({
includeSelectAllOption: true,
selectAllText: "All Roles",
onSelectAll: updateMap,
onDeselectAll: updateMap,
onChange: updateMap,
enableCaseInsensitiveFiltering: true
});
}

function drawRoleAndChampionFilters(championSelectName, roleSelectName) {
Expand Down Expand Up @@ -419,8 +435,15 @@ function getMatchDetails(datum) {

function filterByRoles(datum, roles, participantId) {
let details = getMatchDetails(datum).participantDetails[participantId];
return (roles[0] === "All roles" ||
roles.includes(getRole(details.role, details.lane)));
if (roles.length === 0 || roles[0].value === "All roles") {
return true;
}
for (let i = 0; i < roles.length; i++) {
if (roles[i].value === getRole(details.role, details.lane)) {
return true;
}
}
return false;
}

function filterGenericEvents(datum, champions, roles) {
Expand Down Expand Up @@ -490,11 +513,11 @@ function filterAssistsByParticipatingAllies(datum, allyChampions, allyRoles) {
}

function getSelectedChampions(componentName) {
return [d3.select(componentName).node().value];
return $(componentName + " option:selected");
}

function getSelectedRoles(componentName) {
return [d3.select(componentName).node().value];
return $(componentName + " option:selected");
}

function updateMap() {
Expand Down Expand Up @@ -587,13 +610,13 @@ function filterByTime(datum) {

function filterByChampions(datum, champions, participantId) {
let details = getMatchDetails(datum);
if (champions[0] === "All champions") {
if (champions.length === 0 || champions[0].innerText === "All champions") {
return true;
}
else {
let championPlayed = details.participantDetails[participantId].championId;
for (let i in champions) {
if(championData[champions[i]].id === championPlayed) {
for (let i = 0; i < champions.length; i++) {
if(championData[champions[i].value].id === championPlayed) {
return true;
}
}
Expand Down
10 changes: 10 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
"dependencies": {
"@blueprintjs/core": "^1.33.0",
"axios": "^0.16.2",
"bootstrap": "^3.3.7",
"bootstrap-multiselect": "^0.9.13-1",
"express": "^4.16.2",
"handlebars": "^4.0.11",
"react": "^16.1.1",
Expand Down
6 changes: 3 additions & 3 deletions server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ let express = require('express');
let app = express();
let fs = require('fs');

const port = 8080;
const port = 8082;
let baseURL = 'https://na1.api.riotgames.com/lol/';
let apiKey = 'RGAPI-dce505ed-21a4-4809-89c8-1ccc16ac1bfb';
let apiKey = 'RGAPI-39f977f6-d666-4fc0-9c90-c61e53913c6e';

const queues = {2: "5v5 Blind Pick",
4: "5v5 Ranked Solo",
Expand Down Expand Up @@ -53,7 +53,7 @@ app.listen(port, function () {
//prefetchFavoritesTimelinesData(); // these at same time because asynchronous

//prefetchMasterLeagueMatchListData();
prefetchTimelinesAndDetailsData();
//prefetchTimelinesAndDetailsData();
console.log(`Server running at http://localhost:${port}/`)
});

Expand Down

0 comments on commit b698460

Please sign in to comment.