× 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

7 months 2 weeks ago 7 months 2 weeks ago by Web Buster UK Ltd.
Web Buster UK Ltd
Posts: 87
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:

Please Log in or Create an account to join the conversation.

5 months 1 week ago
Antonio Durán
Posts: 7129
More
New Layout for Student's My Grades view #2
Hi.

I finally found some time to test this:
- Search course worked fine. Seems like a nice feature
- Search assignment did not work
- I don't get the collapsing sliders to show

I am not any good a jquery, so after some time looking at it I still don't know what happens :)

Please Log in or Create an account to join the conversation.

5 months 1 week ago
Web Buster UK Ltd
Posts: 87
More
Topic Author
New Layout for Student's My Grades view #3
Sorry I've not had time to test it on other sites, there might be some scripts missing on the original post. We'll refine it and post an updated one at some point.

Please Log in or Create an account to join the conversation.

5 months 6 days ago
Antonio Durán
Posts: 7129
More
New Layout for Student's My Grades view #4
Great, thank you.

Please Log in or Create an account to join the conversation.