Creating CMP pages in Revolution 2.3 - Adding Snippets

<?php
 
 global $modx;
 $arrData; // Holds information about jobs with applications
 
 
$results = $modx->query("SELECT * FROM grade_results");
if (!is_object($results)) {
$modx->log(MODX::LOG_LEVEL_ERROR, '[[UserApplications]] Database error 1');
}else {
while ($r = $results->fetch(PDO::FETCH_ASSOC)) {
$arrData = $arrData. "['".$r[username] ."', '".$r[X1] . "'],";
  
 } 
 $arrData = substr($arrData, 0, -1);
}
 

 
 // Create arrays for javascript to use later
 echo '<script type="text/javascript">';
 echo "var arrayFromPHP = [" . $arrData . "];";

echo '</script>'; 

?>

 

<?php
class QuestionnaireresultsHomeManagerController extends modExtraManagerController {
    public function process(array $scriptProperties = array()) {

//edit the snippet path
$f = MODX_CORE_PATH.'components/questionnaireresults/snippet.questionnaireresults.php';
		if (file_exists($f)) {
		   include $f;
		} else {
		   $modx->setLogTarget('ECHO');
		   $modx->log(modX::LOG_LEVEL_ERROR,'StoreFinder not found at: '.$f);
		}
}
    public function getPageTitle() {
        return 'Questionnaire Results';
    }

 /**
     * Register needed assets. Using this method, it will automatically
     * combine and compress them if that is enabled in system settings.
     */
    public function loadCustomCssJs() {
		
        $this->addCss(MODX_CORE_PATH.'components/questionnaireresults/assets/jquery-ui.css');
		$this->addCss(MODX_CORE_PATH.'components/questionnaireresults/assets/pqgrid.min.css');
		$this->addCss(MODX_CORE_PATH.'components/questionnaireresults/assets/themes/Office/pqgrid.css');
        $this->addJavascript(MODX_CORE_PATH.'components/questionnaireresults/assets/jquery.min.js');
		$this->addJavascript(MODX_CORE_PATH.'components/questionnaireresults/assets/jquery-ui.min.js');
		$this->addLastJavascript(MODX_CORE_PATH.'components/questionnaireresults/assets/pqgrid.min.js');
        $this->addHtml('<script type="text/javascript">
		Ext.onReady(function() {
         // We could run some javascript here
       });
       </script>');
    }


//you dont need to specify this path
   // public function getTemplateFile() {
      // return 'home.tpl';
   // }
//}
	public function getTemplateFile() { return MODX_CORE_PATH.'components/questionnaireresults/templates/default/home.tpl'; }
}

<div class="container">
<h2>Welcome!</h2>
</div>

<script>
	$(function () {		
	    
	    // First job Table
	    var obj = {
	    	topVisible:false,
			numberCell:false,
			flexHeight:true,
			flexWidth:true
	    };

	    obj.colModel = [{ title: "Company", width: 300, dataType: "string" },
	    	{ title: "Cohort", width: 250, dataType: "string" }];
	    
	    obj.dataModel = { data: arrayFromPHP }; // arrayFromPHP is (shoddily) defines in snippet.questionnairedata.php
	    $("#grid_array").pqGrid(obj);

		// Jobs dropdown
		var select = document.getElementById("jobs"); 
		
		
		for (var i = 0; i < arrayFromPHP.length; i++) {
			var item = arrayFromPHP[i];
			
		    var el = document.createElement("option");
		    el.textContent = item[1] + " (" + item[3] + " application(s))";
		    el.value = item[2];
		    select.appendChild(el);
		}
		
		// Second, applications table
		if (applicationsDataFromPHP != ""){
			document.getElementById("applications_div").style.display = "block";
			
			var objTwo = {
				topVisible:false,
				numberCell:false,
				flexHeight:true,
				flexWidth:true,
				width: 850
			};
			
			objTwo.colModel = [{ title: "Recruiter", width: 150, dataType: "string" },{ title: "E-Mail", width: 200, dataType: "string" },
	    	{ title: "CV", width: 300, dataType: "string" },
	    	{ title: "Application Time", width: 150, dataType: "string" }];
	    
		    objTwo.dataModel = { data: applicationsDataFromPHP }; // arrayFromPHP is (shoddily) defines in snippet.userapplications.php
		    $("#job_grid_array").pqGrid(objTwo);
		}
	});
	
	window.onload = function() {		
		// Did we just deletesomething?
		if (deleteMessage != ""){
			var div = document.getElementById("result-message"); 
			var el = document.createElement("div");
			el.setAttribute("style","color: #3c763d;background-color: #dff0d8;border-color: #d6e9c6;padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;");
			el.textContent = deleteMessage;
			div.appendChild(el);
			
		}
	};
	
	function validateForm() {
    var x = document.forms["deleteApplications"]["delete_string"].value;
    var y = document.forms["deleteApplications"]["confirm_check"].checked;
    if (x != "DELETE" || Boolean(y) == false) {
        alert("Please ensure you type DELETE in the textbox and check the box to confirm deletion.");
        return false;
    }
    return true;   
}
</script>    
<br/><br/>
<h2 class="modx-page-header">Companies & Cohorts</h2>

<h3 class="modx-page-header">Select Your Cohort to see Users</h3>
<div id="grid_array"></div>

<br/><br/>
<h3 class="modx-page-header">View individual applications</h3>
<form name="applicationForm" method="POST" action="">
	<select name="jobID" id="jobs">
	</select>
	<button class="button" type="submit"  name="submit">View Applications</button>
</form>


<div id="applications_div" style="display:none;">
	<br/><br/>
	<h3 class="modx-page-header">Individual Applications</h3>
	<div id="job_grid_array"></div>

</div>

<br/><br/>
<h3 class="modx-page-header">Delete applications</h3>
<div id="result-message"></div>
<form name="deleteApplications" method="POST" onsubmit="return validateForm()" action="">
	<p>Clear all applications older than 3 months? (Before <script>var d = new Date();d.setMonth(d.getMonth() - 3 );document.write(d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear());</script>)</p>
	<p>Tick the box and type DELETE in the textbox to confirm, then click</p>
	<input type="text" name="delete_string">
	<input type="checkbox" name="confirm_check" value="1">
	<br>
	<button class="button" type="submit"  name="submit">Confirm Delete</button>
</form>