Jump to content
Followers 0
Graham Quince

Parents - List of their child's assignments

By Graham Quince, in Coding

Recommended Posts

Graham Quince

Graham Quince 619

Posted
Posted

So we know that the latest version of the MyFrog app no longer lists assignments for parents.  We added in the assignment calendar instead within the My Child section, but if you're in MyFrog and wanting a list of the work, it's not possible.  On a desktop or logging into FrogLearn on your phone makes this simple enough as you have access to the Assignment menu in the FrogBar (and My Child's Work on a desktop).

I've dug out some code from Chris Smith and adapted it for parents: 

<style>
    .row-template {
        display: none;
    }
.assignment-widget-header {
background-color: #231f20;
padding: 1em;
position: relative;
text-align: left;
}
.assignment-widget-header::after {
content: "";
width: 98%;
height: 60%;
position: absolute;
top: 3%;
left: 1%;
border-radius: 5px;
}
.assignment-widget-header h1 {
color: #fff;
font-size: 20px;
margin: 0;
}   
.no-homework {
padding: 1em;
text-align: center;
}
.assignment-list {
list-style: none;
padding: 0 1em;
margin:0 0 0 0;
}    
    

    
.assignment-list :hover{
background-color:#ededed;
}        
    
.assignment-list .assignment-link {
border-bottom: 1px solid #ddd;
padding: 10px 10px  10px 10px;
margin: 0.5em 0;
cursor: pointer;
}
    
.assignment-list .assignment-link p {
margin: 0;
}
.assignment-list .assignment-link .assign-icon {
width: 32px;
height: 32px;
display: block;
float: left;
margin-top: 2px;
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDtfAvgzxT8eoW8W6j4l1meW+1Gb+0JYvEE9rFp0PmSYIhSRQkKJGQPU8euNH4N/DrQPFXxs8a6Hea54t8R+GdI8PrqVkLXxBqEcs7/AGmVCy7ZgzFkQKFJwTyBzXk/w/8AAvjDXtA05NG8W6nZQ6rPLYR2dtpsTxEtcOfJMh+8CVL4bsCegr0n4D/DPx1p/wC0B4w0WD4nz+GdU0vw7E15qaaXZzKY1upB5ZDAoFUgtuGDzg9K+TwdWUsY1zN6vvbytpY8LDzlLEWu3q+//DHRLqHwyYA/8Kn/AGgf+/8Aq/8A8l1p3Z0rwp4Hi+JXgKw+JHgjVNF8Q6fYTaf4zvb1o9SguJ4opEaC4lkDJtl4YYIZa7b7Vq3/AEeFpP8A4B6NXGfHDQ/E198KW1g/HiP4kaFa67pMVzp9pp1gImc30G0NLANylSytjPOOeDX1R7p4f8L/AI1eOfAPgxtL8P8Ah3WJrK6M6C5gltiu4zSDzYA0gZHwSmcZx26EdX+zh488QaD8aPEzQfCjxB4imuPDUVnc6PHPZiVY/tUu55PNlClWJZduScg5GOaZ4D+IWj/A2zufDXjXwu6eKtFvZprNru0nG2YSyeW5KqRLbkOJFwfvD8RqfAr45eGNM+OHjLxH4p8T3FjFrXhuO0/taGynVvtJuZWYIBEdrKrKRxjp1r5XB05Rxl5Rf2v5rLXz018jwsPFrEarv30/T7j1UabonT/hiuT/AMAtC/8Aj1ct8ZPEFxpfwnfQdN/Z+1L4X6Pe69pM9zfxjTYrZZFvoMM6W8pYs21UB2nqM4FKPEnwz/6Oo+Kf/fw//INTa94h8P8AjjwHB8OPA/j3xb8WfEWteIdNu/P12GR/7Ot4LiKWV3l8iNUiCxHrklnGK+qPdP/Z) no-repeat;
}
    
.assignment-list .assignment-link .assign-details {
padding: 0 1em;
float: left;
}
    
    .list-header {
        width: 100%;
        height:50px;
        line-height:50px;
        vertical-align:top;
        padding-left: 20px;
        box-sizing: border-box;
        background-color: #0497da;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border: 1px solid #cccccc;
        border-bottom-width: 0;
        color: #ffffff;
        font-size:12pt;
        
    background: #0497da; /* Old browsers */
    background: -moz-linear-gradient(top,  #0497da 0%, #0064cd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #0497da 0%,#0064cd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #0497da 0%,#0064cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0497da', endColorstr='#0064cd',GradientType=0 ); /* IE6-9 */

        
    }
    .list-body {
        background-color: white;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border: 1px solid #cccccc;
        border-top-width: 0;
    }
</style>
<div class="Assignments"></div>


<script>
var getHTMLElem = this.element.find('.Assignments');
var getAssignments = function(child) {
    var assignments = FrogOS.fdp({
        url: 'assignment/getAssigned',
        data: { 
            status: 'open', 
            limit: 5, 
            order: 'start desc',
            assigned_user: child.uuid
        }
    });

    assignments.done(function(data) {
       var assignments = data.response.assignments,
           assignment;

        for (var uuid in assignments) {
        	if (assignments.hasOwnProperty(uuid)) {
		        assignment = assignments[uuid].assignment;
                getHTMLElem.find('.assignment-list'+child.uuid).show();
            
                var assignSubject = '<p><strong>' + assignment.subject.name + '</strong></p>';
                var assignTitle = '<p>' + assignment.name + '</p>';
                var assignEnd = '<p style="color: red;"><strong>Due: ' + moment(assignment.end, 'X').format('Do MMM YYYY') + '</strong></p>';
                var assignLink = assignment.link;
            
                var liElem = '<li class="assignment-link clearfix" data-assignment-link="' + assignLink + '"><div class="assign-icon"></div><div class="assign-details">' + assignSubject + '' + assignTitle + '' + assignEnd + '</div></li>';
            
                getHTMLElem.find('.assignment-list'+child.uuid).append(liElem);
                
            }
        }
    });
};
    
$(getHTMLElem).on('click', '.assignment-link', function(el){
    $(this).trigger('os.app.siteviewer', {
        data: { site: el.currentTarget.dataset.assignmentLink }
    });
});

Frog.Model.api('users.getChildren').done(function(listResponse) {
        var children = listResponse.data;
        $.each(children, function(index,child) {
            getHTMLElem.append(
                '<div class="list">'+
                "<div class='list-header'>"+child.displayname+"'s recent homeworks</div>"+
                '<div class="list-body">'+
                '<ul class="assignment-list assignment-list'+child.uuid+'" style="display: none;"></ul>'+
                '</div><hr>'
            );
            getAssignments(child);
       });
});

</script>

I'll most likely turn this into a widget at some point, but in the meantime adding this to the Parent Portal will list each child and all their assignments.  Change the limit from 15 if that's not enough.

assignment list.PNG

Link to post
Share on other sites
ADT

ADT 1,271

Posted
Posted

 

 

6 minutes ago, Graham Quince said:

So we know that the latest version of the MyFrog app no longer lists assignments for parents.  We added in the assignment calendar instead within the My Child section, but if you're in MyFrog and wanting a list of the work, it's not possible.  On a desktop or logging into FrogLearn on your phone makes this simple enough as you have access to the Assignment menu in the FrogBar (and My Child's Work on a desktop).

I've dug out some code from Chris Smith and adapted it for parents: 



<style>
    .row-template {
        display: none;
    }
.assignment-widget-header {
background-color: #231f20;
padding: 1em;
position: relative;
text-align: left;
}
.assignment-widget-header::after {
content: "";
width: 98%;
height: 60%;
position: absolute;
top: 3%;
left: 1%;
border-radius: 5px;
}
.assignment-widget-header h1 {
color: #fff;
font-size: 20px;
margin: 0;
}   
.no-homework {
padding: 1em;
text-align: center;
}
.assignment-list {
list-style: none;
padding: 0 1em;
margin:0 0 0 0;
}    
    

    
.assignment-list :hover{
background-color:#ededed;
}        
    
.assignment-list .assignment-link {
border-bottom: 1px solid #ddd;
padding: 10px 10px  10px 10px;
margin: 0.5em 0;
cursor: pointer;
}
    
.assignment-list .assignment-link p {
margin: 0;
}
.assignment-list .assignment-link .assign-icon {
width: 32px;
height: 32px;
display: block;
float: left;
margin-top: 2px;
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDtfAvgzxT8eoW8W6j4l1meW+1Gb+0JYvEE9rFp0PmSYIhSRQkKJGQPU8euNH4N/DrQPFXxs8a6Hea54t8R+GdI8PrqVkLXxBqEcs7/AGmVCy7ZgzFkQKFJwTyBzXk/w/8AAvjDXtA05NG8W6nZQ6rPLYR2dtpsTxEtcOfJMh+8CVL4bsCegr0n4D/DPx1p/wC0B4w0WD4nz+GdU0vw7E15qaaXZzKY1upB5ZDAoFUgtuGDzg9K+TwdWUsY1zN6vvbytpY8LDzlLEWu3q+//DHRLqHwyYA/8Kn/AGgf+/8Aq/8A8l1p3Z0rwp4Hi+JXgKw+JHgjVNF8Q6fYTaf4zvb1o9SguJ4opEaC4lkDJtl4YYIZa7b7Vq3/AEeFpP8A4B6NXGfHDQ/E198KW1g/HiP4kaFa67pMVzp9pp1gImc30G0NLANylSytjPOOeDX1R7p4f8L/AI1eOfAPgxtL8P8Ah3WJrK6M6C5gltiu4zSDzYA0gZHwSmcZx26EdX+zh488QaD8aPEzQfCjxB4imuPDUVnc6PHPZiVY/tUu55PNlClWJZduScg5GOaZ4D+IWj/A2zufDXjXwu6eKtFvZprNru0nG2YSyeW5KqRLbkOJFwfvD8RqfAr45eGNM+OHjLxH4p8T3FjFrXhuO0/taGynVvtJuZWYIBEdrKrKRxjp1r5XB05Rxl5Rf2v5rLXz018jwsPFrEarv30/T7j1UabonT/hiuT/AMAtC/8Aj1ct8ZPEFxpfwnfQdN/Z+1L4X6Pe69pM9zfxjTYrZZFvoMM6W8pYs21UB2nqM4FKPEnwz/6Oo+Kf/fw//INTa94h8P8AjjwHB8OPA/j3xb8WfEWteIdNu/P12GR/7Ot4LiKWV3l8iNUiCxHrklnGK+qPdP/Z) no-repeat;
}
    
.assignment-list .assignment-link .assign-details {
padding: 0 1em;
float: left;
}
    
    .list-header {
        width: 100%;
        height:50px;
        line-height:50px;
        vertical-align:top;
        padding-left: 20px;
        box-sizing: border-box;
        background-color: #0497da;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border: 1px solid #cccccc;
        border-bottom-width: 0;
        color: #ffffff;
        font-size:12pt;
        
    background: #0497da; /* Old browsers */
    background: -moz-linear-gradient(top,  #0497da 0%, #0064cd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #0497da 0%,#0064cd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #0497da 0%,#0064cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0497da', endColorstr='#0064cd',GradientType=0 ); /* IE6-9 */

        
    }
    .list-body {
        background-color: white;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border: 1px solid #cccccc;
        border-top-width: 0;
    }
</style>
<div class="Assignments"></div>


<script>
var getHTMLElem = this.element.find('.Assignments');
var getAssignments = function(child) {
    var assignments = FrogOS.fdp({
        url: 'assignment/getAssigned',
        data: { 
            status: 'open', 
            limit: 15, 
            order: 'start desc',
            assigned_user: child.uuid
        }
    });

    assignments.done(function(data) {
       var assignments = data.response.assignments,
           assignment;

        for (var uuid in assignments) {
        	if (assignments.hasOwnProperty(uuid)) {
		        assignment = assignments[uuid].assignment;
                getHTMLElem.find('.assignment-list').show();
            
                var assignSubject = '<p><strong>' + assignment.subject.name + '</strong></p>';
                var assignTitle = '<p>' + assignment.name + '</p>';
                var assignEnd = '<p style="color: red;"><strong>Due: ' + moment(assignment.end, 'X').format('Do MMM YYYY') + '</strong></p>';
                var assignLink = assignment.link;
            
                var liElem = '<li class="assignment-link clearfix" data-assignment-link="' + assignLink + '"><div class="assign-icon"></div><div class="assign-details">' + assignSubject + '' + assignTitle + '' + assignEnd + '</div></li>';
            
                getHTMLElem.find('.assignment-list').append(liElem);
                
            }
        }
    });
};
    
$(getHTMLElem).on('click', '.assignment-link', function(el){
    $(this).trigger('os.app.siteviewer', {
        data: { site: el.currentTarget.dataset.assignmentLink }
    });
});

Frog.Model.api('users.getChildren').done(function(listResponse) {
        var children = listResponse.data;
        $.each(children, function(index,child) {
            getHTMLElem.append(
                '<div class="list">'+
                "<div class='list-header'>"+child.displayname+"'s recent homeworks</div>"+
                '<div class="list-body">'+
                '<ul class="assignment-list" style="display: none;"></ul>'+
                '</div><hr>'
            );
            getAssignments(child);
       });
});

</script>

I'll most likely turn this into a widget at some point, but in the meantime adding this to the Parent Portal will list each child and all their assignments.  Change the limit from 15 if that's not enough.

So my first question is why did you remove it?

Link to post
Share on other sites
Graham Quince

Graham Quince 619

Posted
  • Author
Posted
Just now, ADT said:

 

 

So my first question is why did you remove it?

Honestly, it was unintended consequences.  The My Child section loads in the separate Frog Application, My Child.  This required its own child selector, so the original child selector was deprecated and no one anticipated that some parents would prefer the assignment list over the calendar.

Link to post
Share on other sites
ADT

ADT 1,271

Posted
Posted
2 minutes ago, Graham Quince said:

Honestly, it was unintended consequences.  The My Child section loads in the separate Frog Application, My Child.  This required its own child selector, so the original child selector was deprecated and no one anticipated that some parents would prefer the assignment list over the calendar.

See I would say the list is easier to access and also give you a quick overview compared to the calendar....  but who am i??? 😜

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
Followers 0
Go to topic listing
×
×
  • Create New...