datatable and changePlan now working

Author: danielcjacobs

app/javascript/packs/myjs.js

@@ -2,19 +2,36 @@ var currPlan = false;
 var plan = false;
 var selectedMajor = "Comp. Sci.";
 var selectedCatalogYear = 2017;
+var catalogLoaded = false;
 
-$(function(){
+$(getPlans);
+
+// changes plan, triggered on selection of new plan in dropdown
+$(document).on('change', '#planSelect', function (){
+    var selected = $(this).find("option:selected").text();
+	console.log(selected);
+    selected = selected.split(", ");
+    console.log(selected);
+    selectedMajor = selected[0];
+    selectedCatalogYear = parseInt(selected[1]);
+   
+    // send request to load new plan
+    getPlans();
+
+});
+
+function getPlans(){
 	$.get("plans.json", function(plans){
-		console.log(plans);
+		//console.log(plans);
         plan = false;
-        $(".dropdown-content").empty();
+        $(".dropdown").html("<option selected disabled>Change Plan</option>");
         for (let i in plans){
             if (plans[i].major === selectedMajor && plans[i].catalog.year === selectedCatalogYear){
                 plan = plans[i];
             }
             else{
                 // Put other plan options in dropdown menu on nav bar
-                $(".dropdown-content").append("<a onclick='changePlan(this.text)'>" + plans[i].major + ", " + plans[i].catalog.year + "</a>");
+                $(".dropdown").append("<option>" + plans[i].major + ", " + plans[i].catalog.year + "</option>");
             }
         }
         if (plan === false){
@@ -31,20 +48,27 @@ $(function(){
         $("#hrsCurrent").html("Current Hours: " + currPlan.hrsCurrent);
         $("#hrsPlanned").html("Total Hours Planned: " + currPlan.hrsPlanned);
 
-		$("#catalogTable").DataTable( {
-           	"dom": '<"top"if>t',
-           	"data": plan.catalog.courses,
-           	"columns": [
-               		{ "data": "designator" },
-               		{ "data": "name" },
-               		{ "data": "description" },
-               		{ "data": "credits"}
-           	],
-           	"scrollY": "95px",
-           	"paging": false,
-           	"scrollCollapse": false 
+		let courses = [];
+		for (let c in plan.catalog.courses){
+			courses.push(plan.catalog.courses[c]);
+		}
+		if (!catalogLoaded){
+			$("#catalogTable").DataTable( {
+				"dom": '<"top"if>t',
+				"data": courses,
+				"columns": [
+						{ "data": "designator" },
+						{ "data": "name" },
+						{ "data": "description" },
+						{ "data": "credits"}
+				],
+				"scrollY": "95px",
+				"paging": false,
+				"scrollCollapse": false 
         	});
         	$('.dataTables_scrollHeadInner').css('padding', '0');
+			catalogLoaded = true;
+		}
 
 
         var requirements = plan.requirements;
@@ -59,7 +83,7 @@ $(function(){
             $('#accordion').append('<h3><a href="#">' + requirements[i].name + '</a></h3><div>' + itemHtml + '</div>').accordion('refresh');
         }
 	});
-});
+}
 
 class Course {
     constructor(desig, year, term){
@@ -232,16 +256,3 @@ class Year {
         }
     }
 }
-
-// changes plan, triggered on selection of new plan in dropdown
-function changePlan(selected){
-    console.log(selected);
-    selected = selected.split(", ");
-    console.log(selected);
-    selectedMajor = selected[0];
-    selectedCatalogYear = parseInt(selected[1]);
-   
-    // send request to load new plan
-    planRequest = sendRequest("GET", 'http://judah.cedarville.edu/~jacobs/TermProject/php/getCombined.php', planCallback);
-
-}

app/views/plans/_plan.json.jbuilder

@@ -9,6 +9,7 @@ json.curr_year plan.curr_year
 json.curr_term plan.curr_term
 json.courses do
 	plan.plan_courses.each{ |planCourse| json.set! planCourse.course.designator do
+		json.designator planCourse.course.designator
 		json.year planCourse.year
 		json.term planCourse.term
 	end
@@ -19,6 +20,8 @@ json.catalog do
 	json.year plan.catalog.year
 	json.courses do 
 		plan.catalog.catalog_courses.each{ |catalogCourse| json.set! catalogCourse.course.designator do
+			json.id catalogCourse.course.id
+			json.designator catalogCourse.course.designator
 			json.name catalogCourse.course.name
 			json.description catalogCourse.course.description
 			json.credits catalogCourse.course.credits

app/views/plans/index.html.erb

@@ -12,16 +12,9 @@
 
     </div>
     <div>
-        <div class="dropdown">
-            <button class="dropbtn">
-                <a><i class="fa fa-caret-down"></i>Change Plan</a>
-            </button>
-            <div class="dropdown-content">
-                <a href="#">Link 1</a>
-                <a href="#">Link 2</a>
-                <a href="#">Link 3</a>
-            </div>
-        </div>
+        <select id = "planSelect" class="dropdown">
+			<option selected disabled>Change Plan</option>
+        </select>
 		<% if user_signed_in?%>
 			<form name="logout" action="logout.php" method="post">
 				<button type="submit" value="Submit">

db/seeds.rb

@@ -187,7 +187,7 @@
 course15.credits = 3
 course15.save!
 course16 = Course.new
-course16.designator = "CS-4810"
+course16.designator = "CS-4820"
 course16.name = "Software Engr II"
 course16.description = "Love Senior Design!!"
 course16.credits = 3