-
Notifications
You must be signed in to change notification settings - Fork 0
/
studies.html
137 lines (127 loc) · 8.05 KB
/
studies.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
---
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Treemap Survey</title>
<meta content="Treemap Survey" name="description"/>
<meta content="VARG" name="author"/>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- TODO replace with local imports -->
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" rel="stylesheet"/>
<!-- Bootstrap CSS CDN -->
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" rel="stylesheet">
<!-- Scrollbar Custom CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="{{ 'css/sidebar.css' | relative_url }}">
<!-- Font Awesome JS -->
<script crossorigin="anonymous" defer integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"></script>
<script crossorigin="anonymous" defer integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<!-- Based on: https://bootstrapious.com/p/bootstrap-sidebar -->
<nav id="sidebar">
<div id="dismiss">
<i class="fas fa-arrow-left"></i>
</div>
<div class="sidebar-header">
<h2>Settings</h2>
</div>
<ul class="list-unstyled components">
<h3>Visibility</h3>
{% for header in site.data.tableStructure%}
<li class="active">
<a aria-expanded="false" class="dropdown-toggle" data-toggle="collapse" href="#{{header.id}}">{{header.title}}</a>
<ul class="collapse list-unstyled" id="{{header.id}}">
{% for subheader in header.items %}
<li><a href="#" onclick="toggleColumn({%increment i%}, this)">{{subheader.title}}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
<button type="button" class="btn btn-outline-light" onclick="handleRowButtonClicked(this)">Hide unselected rows</button>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" class="btn btn-outline-dark mr-4" onclick="window.location.href='index.html';">Back</button>
<button class="btn btn-info" id="sidebarCollapse" type="button">
<i class="fas fa-align-left"></i>
<span>Settings</span>
</button>
<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="btn btn-dark d-inline-block d-lg-none ml-auto" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<h1>Treemap Studies</h1>
</div>
</div>
</nav>
<table class="table table-striped table-bordered" id="table">
<thead>
<tr>
{% for header in site.data.tableStructure %}
<th colspan="{{header.items.size}}">{{header.title}}</th>
{% endfor %}
</tr>
<tr>
{% assign last = site.data.tableStructure.size | minus: 1 %}
{% for index in (0 .. last) %}
{% assign header = site.data.tableStructure[index] %}
{% for subheader in header.items %}
<th topLevelColumnIndex="{{index}}">{{subheader.title}}</th>
{% endfor %}
{% endfor %}
</tr>
</thead>
<tbody>
{% for survey in site.data.studies["user studies"] %}
<tr onclick="selectRow({{forloop.index0}})">
{% for header in site.data.tableStructure %}
{% for subheader in header.items %}
<td>
{% assign id = subheader.id %}
{% if subheader.path.size == 1 %}
{% assign key = subheader.path[0] %}
{% assign values = survey[key] | compact %}
{% include table-content.html %}
{% elsif subheader.path.size == 2 %}
{% assign key1 = subheader.path[0] %}
{% assign key2 = subheader.path[1] %}
{% assign values = survey[key1][key2] | compact %}
{% include table-content.html %}
{% elsif subheader.path.size == 3 %}
{% assign key1 = subheader.path[0] %}
{% assign key2 = subheader.path[1] %}
{% assign key3 = subheader.path[2] %}
{% assign values = survey[key1][key2][key3] | compact %}
{% include table-content.html %}
{% else %}
ERROR
{% endif %}
</td>
{% endfor %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script crossorigin="anonymous" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- Popper.JS -->
<script crossorigin="anonymous" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script crossorigin="anonymous" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="{{ 'js/filter_table.js' | relative_url }}"></script>
</body>
</html>