Resources Tables and JS PDFs locally

README.md

@@ -6,7 +6,6 @@
 
 ### Website
 
-* TODO: Resources pages
 * TODO: Supporters pages
 * TODO: Add Google Analytics tag
 

_includes/partials/resources-table.html

@@ -0,0 +1,81 @@
+<div class="resources-table-container" data-type="{{ include.type }}">
+    <span id="loading-data"><i class="fa fa-spin fa-spinner"></i> Loading, please wait...</span>
+    <table id="resources-data" class="table table-striped table-condensed" cellspacing="0" width="100%"></table>
+</div>
+
+<script type="text/javascript">
+    var MIN_HEIGHT = 0;
+
+    $(document).ready(function()
+    {
+        var tableContainer = $('div.resources-table-container');
+        var fetchType = tableContainer.data('type');
+        var ajaxUrl = '/resources/' + fetchType + '.json';
+
+        $.getJSON(ajaxUrl, function(response)
+        {
+            var dataSet = [];
+            for (var i = 0; i < response.results.length; i++)
+            {
+
+                var curResult = response.results[i];
+                var verifiedIcon = curResult.verified ? '<i class="fa fa-check"></i>' : '';
+                var level = 'Starting Out';
+                switch (curResult.level)
+                {
+                    case 1: level = 'Some Experience'; break;
+                    case 2: level = 'Very Experienced'; break;
+                }
+
+                var curData = [];
+                curData.push(curResult.title);
+                curData.push(level);
+                curData.push(curResult.description);
+                curData.push(curResult.type);
+                curData.push(verifiedIcon);
+                curData.push('<a href="' + curResult.link + '" class="btn" target="_blank">Get</a>');
+                dataSet.push(curData);
+            }
+            var dataTablesOptions = {
+                data: dataSet,
+                columns: [
+                {
+                    title: 'Title',
+                    className: 'col-title'
+                }, {
+                    title: 'Level',
+                    className: 'col-level'
+                }, {
+                    title: 'Description',
+                    className: 'col-description'
+                }, {
+                    title: 'Type',
+                    className: 'col-type'
+                }, {
+                    title: 'Verified',
+                    className: 'col-verified',
+                    searchable: false
+                }, {
+                    title: '',
+                    className: 'col-getbtn',
+                    orderable: false,
+                    searchable: false
+                }
+                ],
+                drawCallback: function()
+                {
+                    if (MIN_HEIGHT === 0)
+                    {
+                        setTimeout(function()
+                        {
+                            MIN_HEIGHT = $('div.resources-table-container').height();
+                            $('div.resources-table-container').css('min-height', MIN_HEIGHT);
+                        }, 1000);
+                    }
+                }
+            };
+            $('#loading-data').fadeOut();
+            $('#resources-data').DataTable(dataTablesOptions);
+        });
+    });
+</script>

_layouts/main.html

@@ -9,10 +9,16 @@
 
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/paper/bootstrap.min.css" />
+        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
+
         <link rel="stylesheet" href="{{ 'assets/css/styles.css' | relative_url }}" />
 
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+        <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
+        <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
+
         <script type="text/javascript" src="{{ 'assets/js/utils.js' | relative_url }}"></script>
         <script type="text/javascript" src="{{ 'assets/js/scripts.js' | relative_url }}"></script>
     </head>

pages/resources/idea.html

@@ -46,7 +46,7 @@ <h3>Getting Started</h3>
 			<h3>Coding Cards</h3>
 		</div>
 		<div class="col-xs-12">
-			{include file="partials/resources_table.tpl" type="idea"} TODO
+			{%- include partials/resources-table.html type="idea" -%}
 		</div>
 	</div>
 

pages/resources/javascript.html

@@ -55,7 +55,7 @@ <h4>Lets do some loggin</h4>
             <h3>Coding Cards</h3>
         </div>
         <div class="col-xs-12">
-            {include file="partials/resources_table.tpl" type="javascript"} TODO
+			{%- include partials/resources-table.html type="javascript" -%}
         </div>
     </div>
 </div>

pages/resources/python.html

@@ -55,7 +55,7 @@ <h4>Install Python and try this</h4>
 			<h3>Coding Cards</h3>
 		</div>
 		<div class="col-xs-12">
-			{include file="partials/resources_table.tpl" type="python"} TODO
+			{%- include partials/resources-table.html type="python" -%}
 		</div>
 	</div>
 </div>

pages/resources/raspberry-pi.html

@@ -50,7 +50,7 @@ <h3>Getting Started</h3>
 			<h3>Coding Cards</h3>
 		</div>
 		<div class="col-xs-12">
-			{include file="partials/resources_table.tpl" type="raspberrypi"} TODO
+			{%- include partials/resources-table.html type="javascript" -%}
 		</div>
 	</div>
 

pages/resources/scratch.html

@@ -49,7 +49,7 @@ <h3>Getting Started</h3>
 	<hr />
 	<div class="coding-cards-container">
         <h3>Coding Cards</h3>
-		{include file="partials/resources_table.tpl" type="scratch"} TODO
+        {%- include partials/resources-table.html type="scratch" -%}
 	</div>
 
 	<hr />