Skip to content

Commit f95f513

Browse files
cajogoscajogos
committed
Resources Table working with JSON
1 parent fe3ae48 commit f95f513

File tree

13 files changed

+768
-6
lines changed

13 files changed

+768
-6
lines changed

‎README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
### Website
88

9-
* TODO: Resources pages
109
* TODO: Supporters pages
1110
* TODO: Add Google Analytics tag
1211

‎_includes/partials/resources-table.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<div class="resources-table-container" data-type="{{ include.type }}">
2+
<span id="loading-data"><i class="fa fa-spin fa-spinner"></i> Loading, please wait...</span>
3+
<table id="resources-data" class="table table-striped table-condensed" cellspacing="0" width="100%"></table>
4+
</div>
5+
6+
<script type="text/javascript">
7+
var MIN_HEIGHT = 0;
8+
9+
$(document).ready(function()
10+
{
11+
var tableContainer = $('div.resources-table-container');
12+
var fetchType = tableContainer.data('type');
13+
var ajaxUrl = '/resources/' + fetchType + '.json';
14+
15+
$.getJSON(ajaxUrl, function(response)
16+
{
17+
var dataSet = [];
18+
for (var i = 0; i < response.results.length; i++)
19+
{
20+
21+
var curResult = response.results[i];
22+
var verifiedIcon = curResult.verified ? '<i class="fa fa-check"></i>' : '';
23+
var level = 'Starting Out';
24+
switch (curResult.level)
25+
{
26+
case 1: level = 'Some Experience'; break;
27+
case 2: level = 'Very Experienced'; break;
28+
}
29+
30+
var curData = [];
31+
curData.push(curResult.title);
32+
curData.push(level);
33+
curData.push(curResult.description);
34+
curData.push(curResult.type);
35+
curData.push(verifiedIcon);
36+
curData.push('<a href="' + curResult.link + '" class="btn" target="_blank">Get</a>');
37+
dataSet.push(curData);
38+
}
39+
var dataTablesOptions = {
40+
data: dataSet,
41+
columns: [
42+
{
43+
title: 'Title',
44+
className: 'col-title'
45+
}, {
46+
title: 'Level',
47+
className: 'col-level'
48+
}, {
49+
title: 'Description',
50+
className: 'col-description'
51+
}, {
52+
title: 'Type',
53+
className: 'col-type'
54+
}, {
55+
title: 'Verified',
56+
className: 'col-verified',
57+
searchable: false
58+
}, {
59+
title: '',
60+
className: 'col-getbtn',
61+
orderable: false,
62+
searchable: false
63+
}
64+
],
65+
drawCallback: function()
66+
{
67+
if (MIN_HEIGHT === 0)
68+
{
69+
setTimeout(function()
70+
{
71+
MIN_HEIGHT = $('div.resources-table-container').height();
72+
$('div.resources-table-container').css('min-height', MIN_HEIGHT);
73+
}, 1000);
74+
}
75+
}
76+
};
77+
$('#loading-data').fadeOut();
78+
$('#resources-data').DataTable(dataTablesOptions);
79+
});
80+
});
81+
</script>

‎_layouts/main.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,16 @@
99

1010
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
1111
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/paper/bootstrap.min.css" />
12+
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
13+
1214
<link rel="stylesheet" href="{{ 'assets/css/styles.css' | relative_url }}" />
1315

1416
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
1517
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
18+
19+
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
20+
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
21+
1622
<script type="text/javascript" src="{{ 'assets/js/utils.js' | relative_url }}"></script>
1723
<script type="text/javascript" src="{{ 'assets/js/scripts.js' | relative_url }}"></script>
1824
</head>

‎pages/resources/idea.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ <h3>Getting Started</h3>
4646
<h3>Coding Cards</h3>
4747
</div>
4848
<div class="col-xs-12">
49-
{include file="partials/resources_table.tpl" type="idea"} TODO
49+
{%- include partials/resources-table.html type="idea" -%}
5050
</div>
5151
</div>
5252

‎pages/resources/javascript.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ <h4>Lets do some loggin</h4>
5555
<h3>Coding Cards</h3>
5656
</div>
5757
<div class="col-xs-12">
58-
{include file="partials/resources_table.tpl" type="javascript"} TODO
58+
{%- include partials/resources-table.html type="javascript" -%}
5959
</div>
6060
</div>
6161
</div>

‎pages/resources/python.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ <h4>Install Python and try this</h4>
5555
<h3>Coding Cards</h3>
5656
</div>
5757
<div class="col-xs-12">
58-
{include file="partials/resources_table.tpl" type="python"} TODO
58+
{%- include partials/resources-table.html type="python" -%}
5959
</div>
6060
</div>
6161
</div>

‎pages/resources/raspberry-pi.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ <h3>Getting Started</h3>
5050
<h3>Coding Cards</h3>
5151
</div>
5252
<div class="col-xs-12">
53-
{include file="partials/resources_table.tpl" type="raspberrypi"} TODO
53+
{%- include partials/resources-table.html type="javascript" -%}
5454
</div>
5555
</div>
5656

‎pages/resources/scratch.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ <h3>Getting Started</h3>
4949
<hr />
5050
<div class="coding-cards-container">
5151
<h3>Coding Cards</h3>
52-
{include file="partials/resources_table.tpl" type="scratch"} TODO
52+
{%- include partials/resources-table.html type="scratch" -%}
5353
</div>
5454

5555
<hr />

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy