-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathknowledge-hub.html
More file actions
189 lines (178 loc) · 8.61 KB
/
Copy pathknowledge-hub.html
File metadata and controls
189 lines (178 loc) · 8.61 KB
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Tue Jan 14 2025 14:37:21 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="675257f948dd47fd917af570" data-wf-site="66e84be48d3cb4d76ee3f042">
<head>
<meta charset="utf-8">
<title>Knowledge Hub</title>
<meta content="NTU - CompHydroMet Lab" name="description">
<meta content="Knowledge Hub" property="og:title">
<meta content="Knowledge Hub" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/wangsite-ntu.webflow.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ["PT Sans:400,400italic,700,700italic", "Oswald:200,300,400,500,600,700", "Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic", "Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic", "Exo:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic", "Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic", "Source Sans Pro:200,300,regular,italic,600,700,900"]
}
});
</script>
<script type="text/javascript">
! function(o, c) {
var n = c.documentElement,
t = " w-mod-";
n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
}(window, document);
</script>
<!-- <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon"> -->
<link href="images/favicon3.ico" rel="shortcut icon" type="image/x-icon">
<!-- <link href="images/webclip.png" rel="apple-touch-icon"> -->
</head>
<body>
<div data-collapse="medium" data-animation="default" data-duration="400" data-no-scroll="1" data-easing="ease" data-easing2="ease" role="banner" class="navbar w-nav">
<div class="w-container">
<a href="index.html" class="logo-block w-nav-brand"></a><img src="images/logo_white1-03.png" alt="" class="logo">
<nav role="navigation" class="nav-menu w-nav-menu">
<a href="index.html" class="nav-link light w-nav-link">HOme</a>
<a href="members.html" class="nav-link light w-nav-link">members</a>
<a href="publication.html" class="nav-link light w-nav-link">publication</a>
<a href="projects.html" class="nav-link light w-nav-link">projects</a>
<a href="knowledge-hub.html" aria-current="page" class="nav-link light w-nav-link w--current">knowledge hub</a>
</nav>
<div class="transparant-menu-button w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
<div class="subpage-header blog-1-copy">
<div class="container w-container">
<h2 data-ix="fade-in-on-load" class="subpage-title">Knowledge Hub</h2>
<div data-ix="fade-in-on-load-2" class="page-subtitle">Explore our educational resources, research materials and open-source projects</div>
</div>
</div>
<div class="section">
<div class="container w-container">
<!-- Add filter section -->
<div class="filter-section" style="margin-bottom: 30px;">
<select id="attribute-filter" class="w-select" style="max-width: 300px; padding: 8px; border-radius: 4px; border: 1px solid #ccc; margin: 1rem auto;">
<option value="">All Categories</option>
<!-- Options will be dynamically added here -->
</select>
</div>
<div class="collection-list-wrapper w-dyn-list">
<div role="list" class="w-dyn-items" id="knowledge-hub-list">
<!-- Dynamic content will be inserted here -->
</div>
<div class="w-dyn-empty" style="display: none;">
<div>No items found.</div>
</div>
</div>
</div>
</div>
<script src="js/config.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const csvUrl = './assests/WangSiteKnowledgeHubs.csv';
const knowledgeHubList = document.getElementById('knowledge-hub-list');
const emptyState = document.querySelector('.w-dyn-empty');
const attributeFilter = document.getElementById('attribute-filter');
let allHubs = []; // Store all hubs for filtering
// Function to render hubs
function renderHubs(hubs) {
knowledgeHubList.innerHTML = ''; // Clear current list
if (hubs.length > 0) {
hubs.forEach(hub => {
if (!hub.Title) return; // Skip empty rows
const hubHtml = `
<div role="listitem" class="w-dyn-item">
<div class="project-container">
<a href="${hub.Link || '#'}" target="_blank" class="project-snapshot w-inline-block w-clearfix">
<img src="${hub.Image || 'images/placeholder.jpg'}" loading="lazy" alt="${hub.Title}" class="project-image">
</a>
<div class="project-content">
<div class="text-block-2">${hub.Year || ''}</div>
<a href="${hub.Link || '#'}" target="_blank" class="project-title">${hub.Title}</a>
<div>${hub.Author || ''}</div>
<div class="team-member-tag">${hub.Hashtages || ''}</div>
<div>${hub.Description || ''}</div>
</div>
</div>
</div>
`;
knowledgeHubList.insertAdjacentHTML('beforeend', hubHtml);
});
emptyState.style.display = 'none';
} else {
emptyState.style.display = 'block';
}
}
// Fetch and parse CSV data
fetch(csvUrl)
.then(response => response.text())
.then(csvText => {
// Parse CSV function that handles quoted fields
function parseCSVLine(text) {
const result = [];
let cell = '';
let inQuotes = false;
for (let i = 0; i < text.length; i++) {
const char = text[i];
if (char === '"') {
if (inQuotes && text[i + 1] === '"') {
cell += '"';
i++;
} else {
inQuotes = !inQuotes;
}
} else if (char === ',' && !inQuotes) {
result.push(cell.trim());
cell = '';
} else {
cell += char;
}
}
result.push(cell.trim());
return result;
}
const rows = csvText.split('\n').map(row => parseCSVLine(row));
const headers = rows[0];
allHubs = rows.slice(1).map(row => {
const hub = {};
headers.forEach((header, index) => {
hub[header.trim()] = row[index]?.trim() || '';
});
return hub;
});
// Get unique attributes and populate the filter dropdown
const attributes = [...new Set(allHubs.map(hub => hub.Attribute).filter(attr => attr))];
attributes.sort().forEach(attribute => {
const option = document.createElement('option');
option.value = attribute;
option.textContent = attribute;
attributeFilter.appendChild(option);
});
// Initial render
renderHubs(allHubs);
// Add filter event listener
attributeFilter.addEventListener('change', function() {
const selectedAttribute = this.value;
const filteredHubs = selectedAttribute
? allHubs.filter(hub => hub.Attribute === selectedAttribute)
: allHubs;
renderHubs(filteredHubs);
});
})
.catch(error => {
console.error('Error loading knowledge hubs:', error);
emptyState.style.display = 'block';
});
});
</script>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=66e84be48d3cb4d76ee3f042" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
</body>
</html>