-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
96 lines (88 loc) · 4.09 KB
/
index.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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Stanford Research Computing Resource Explorer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="What kind of resource are you looking for?">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="icon" type="image/png" href="favicon.ico">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom" id="mainNav">
<div class="container-fluid" id="logo-navbar">
<a class="navbar-brand navbar-brand-logo" href="https://us-rse.org">
<img id="logo" alt="logo" src="img/SRCC-square-red.png" style="height:80%"></a>
<a class="navbar-brand" href="">Recommend-o-matic
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<!--><li><a href="about/">About</a></li>-->
</ul>
</div>
</div>
</nav>
<div class="container-fluid" style="padding:50px; padding-top:100px" id="app">
<h3>Resource Recommendation Tool</h3>
<div class="row" v-for="row in rows">
<div class="col-md-3" v-for="question in row">
<div class="form-group">
<label>{{ question.question }}</label>
<select class="form-control question" @change="filterOptions" v-bind:id="question.unique_id" required>
<option>--</option>
<option v-for="option in question.options" v-bind:value="option">{{option}}</option>
</select>
</div>
</div>
</div>
<div class="row" style="padding-top:20px">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-light">
<tr>
</tr>
</thead>
<tbody>
<tr v-for="resource in resources" @mouseover="showResourceIndex = resource.unique_id" @mouseout="showResourceIndex = null">
<th scope="row" :id="'row-resource-' + resource.unique_id">
<div class="person-name">{{ resource.name }} <a :href="resource.url" target="_blank"><i style="color:#CCC" class="fas fa-external-link-alt"></i></a>
<div class="description" v-show="showResourceIndex === resource.unique_id" style="font-weight:400">
<i style="color:#CCC" class="fas fa-question"></i> {{ resource.description }}
</div>
</div>
</th>
<td v-for="(items, key, index) in resource" v-if="key.includes('question_')" colspan='5' :class="'bg-success text-white cell row-resource-' + resource.unique_id" :id="'cell-question-' + key + '-resource-' + resource.unique_id">
<div class="issue-details"><div class="details" v-for="item in items">{{ item }}</div>
</div>
</td>
</tr>
</tbody>
</table>
<button @click="resetOptions" class="btn btn-danger" style="margin-top:30px">Reset</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/g/filesaver.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="recommend-o-matic.js"></script>
<script>
// Load the data file created for the recommend-o-matic
$.getJSON( "resources-and-options.json", function(data) {
Recommendomatic(data, "#app")
})
</script>
</body>
</html>