× Tips & Tricks

Please do NOT use this section of the forum to request help if Joomdle does not work for you in some particular way. Your post will be deleted.

New Layout for Student's My Grades view

3 weeks 17 hours ago 3 weeks 15 hours ago by Web Buster UK Ltd.
Web Buster UK Ltd
Posts: 78
More
Topic Author
New Layout for Student's My Grades view #1
We find the mygrades view quite difficult to find a specific course, hence we did a few tweaks and added some functionality to the view.



There might besome errors and unfinished code here, but this is the raw code:

tmpl/default_cats.php
<?php 
/**
  * @package      Joomdle
  * @copyright    Qontori Pte Ltd
  * @license      http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
  */

defined('_JEXEC') or die('Restricted access'); ?>

<div class="joomdle-gradelist<?php echo $this->pageclass_sfx;?>">
    <?php if ($this->params->get('show_page_heading', 1)) : ?>
    <?php 

		$student = $_GET['student'];

		$db = JFactory::getDbo();
		$query = $db->getQuery(true);
		$query->select('id');
		$query->from($db->quoteName('#__users'));
		$query->where($db->quoteName('username'). " = '" . $student . "'");
		$db->setQuery($query);
		$studentid = $db->loadResult();

		$db = JFactory::getDbo();
		$query = $db->getQuery(true);
		$query->select(array('firstname', 'lastname', 'cb_class'));
		$query->from($db->quoteName('#__comprofiler'));
		$query->where($db->quoteName('id')." = " . $studentid);
		$db->setQuery($query);
		$row = $db->loadRow();
		echo "<h1>" . $row[0] . " " . $row[1];
		echo "<span style='float:right'>" . $row[2] . "</span></h1>";


?>
	
	
	
            <input id="gradecourse" type="text" placeholder="Search Course">
            <input id="gradeassessment" type="text" placeholder="Search Assessment">
<div style="
    padding: 10px;
    margin: 0 1rem 1.5rem;
    background: #f5f7f9;
    font-size: 1rem;
    box-shadow: 2px 2px 3px #888;
">The pass mark for all courses and assessments is <b>55%</b>. Marks below 55% will be highlighted in <span style="color:red; font-weight:bold;">RED</span><span class="btn btn-blue" style="float:right" id="showall">Show All</span></div>
    <?php endif; ?>

<?php
/* Para cada curso, mostramos sus tareas */
foreach ($this->tasks as  $this->course) :
		if (count ($this->course['grades']['data']) == 0)
			continue;
		echo $this->loadTemplate('course');
endforeach; ?>

</div>

<script type="application/javascript">
var acc = document.querySelectorAll(".joomdle-gradelist h1");
var i;

for (i = 0; i < acc.length; i++) {
  var panel = acc[i].nextElementSibling;
      panel.style.maxHeight = null;
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  };
}

// Show/Hide all button
jQuery('#showall').click(function() {
	if (jQuery(this).hasClass('btn-blue') ) {
		jQuery(this).text("Hide All").removeClass('btn-blue').addClass('btn-red');
	    var divheight = jQuery('.joomdle-gradelist .joomdle-gradelist div')[0].scrollHeight;
	    jQuery(".joomdle-gradelist .joomdle-gradelist h1").toggleClass("active").next().css("max-height", divheight);
	} else {
		jQuery(this).text("Show All").removeClass('btn-red').addClass('btn-blue');
	    jQuery(".joomdle-gradelist .joomdle-gradelist h1").removeClass("active");
	    jQuery(".joomdle-gradelist .joomdle-gradelist div").css("max-height", "");
	}
});

	

jQuery(document).ready(function(){
  jQuery("#gradecourse").on("keyup", function() {
    jQuery(".joomdle-gradelist .joomdle-gradelist h1.active").removeClass("active").next().css("max-height", "");
    var value = jQuery(this).val().toLowerCase();
	jQuery(".joomdle-gradelist .joomdle-gradelist h1").each(function() {
		if (jQuery(this).text().toLowerCase().indexOf(value) > -1) {
			jQuery(this).parent(".joomdle-gradelist").show();
		} else {
			jQuery(this).parent(".joomdle-gradelist").hide();
		}
    });
  });
	
  jQuery("#gradeassessment").on("keyup", function() {

    var divheight = jQuery('.joomdle-gradelist .joomdle-gradelist div')[0].scrollHeight;
    jQuery(".joomdle-gradelist .joomdle-gradelist h1:not(.active)").toggleClass("active").next().css("max-height", divheight);

    var value = jQuery(this).val().toLowerCase();

	jQuery(".joomdle-gradelist .joomdle-gradelist tr:not(:first-child)").filter(function() {
    	jQuery(this).toggle(jQuery(this).text().toLowerCase().indexOf(value) > -1);
    });
	
	// Hide if table empty	  
	jQuery(".joomdle-gradelist .joomdle-gradelist tr:first-child").each(function() {
		if (jQuery(this).siblings('tr:not([style="display: none;"])').length) {
		jQuery(this).show();
		jQuery(this).closest(".joomdle-gradelist").show();
		} else {
		jQuery(this).hide();
		jQuery(this).closest(".joomdle-gradelist").hide();
		}
	});

	// Show if seach field empty
   if( jQuery(this).val().length === 0 ) {
     jQuery(".joomdle-gradelist .joomdle-gradelist h1.active").toggleClass("active");
     jQuery(".joomdle-gradelist .joomdle-gradelist div").show().css("max-height", "");
     jQuery(".joomdle-gradelist, .joomdle-gradelist .joomdle-gradelist tr:first-child, .joomdle-gradelist .joomdle-gradelist tr:nth-last-child(-n+2), .joomdle-gradelist p").show();
    }

// Remove transition then adding it back to smoothen filtering
    jQuery(".joomdle-gradelist .joomdle-gradelist div").css("transition", "none");
    setTimeout(function() {
      jQuery(".joomdle-gradelist .joomdle-gradelist div").css("transition", "all 0.2s ease");
      }, 10);




  });
});

</script>

Changes:
  1. Added collapsing sliders to the tables.
  2. Added search course and assessment functionality.

Be happy to get any comments or criticisms.
Attachments:
Cron Job Starts