Jump to content

Parents - List of their child's assignments


Graham Quince

Recommended Posts

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: 'closed', 
            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'+child.uuid).show();
            
                var assignSubject = '<p><strong>' + assignment.subject.name + '</strong></p>';
                var assignTitle = '<p>' + assignment.name + '</p>';
                var assignEnd = '<span style="color: red;"><strong>Due: ' + moment(assignment.end, 'X').format('Do MMM YYYY') + '</strong></span>';
                var assignLink = assignment.link;
                var activity = ' | Activities done: <b>'+assignments[uuid].activities.complete+' / '+assignments[uuid].activities.total+'</b>';
                
                var status = ' | Status: ';
                switch(assignments[uuid].user_info.status) {
                    case 'notdone':
                        status = status+' Not done';
                        break;
                    case 'ontime':
                        status = status+' Handed in';
                        break;
                    case 'late':
                        status = status+' Late';
                        break;
                    default:
                        break;
                }
            
                var liElem = '<li class="assignment-link clearfix" data-assignment-link="' + assignLink + '"><div class="assign-icon"></div>'+
                             '<div class="assign-details">' + assignSubject + '' + assignTitle + '' + assignEnd + activity + status +'</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 comment
Share on other sites

 

 

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 comment
Share on other sites

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 comment
Share on other sites

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 comment
Share on other sites

  • 3 months later...

A slightly different version, this code mimics the Assignments Menu in the Frog Bar

<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',
            is_completed: false,
            limit: 15, 
            order: 'start desc',
            assigned_user: child.uuid
        }
    });

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

        for (var uuid in assignments) {
        	if (assignments.hasOwnProperty(uuid)) {
		        assignment = assignments[uuid].assignment;
                user_info = assignments[uuid].user_info;
                
                getHTMLElem.find('.assignment-list'+child.uuid).show();
            
                var assignSubject = '<p><strong>' + assignment.subject.name + '</strong></p>';
                var assignTitle = '<p>' + assignment.name + '</p>';
                var assignEnd = '<span style="color: red;"><strong>Due: ' + moment(assignment.end, 'X').format('Do MMM YYYY') + '</strong></span>';
                var assignLink = assignment.link;
                var activity = ' | Activities done: <b>'+assignments[uuid].activities.complete+' / '+assignments[uuid].activities.total+'</b>';
                
                var status = ' | Status: ';
                switch(assignments[uuid].user_info.status) {
                    case 'notdone':
                        status = status+' Not done';
                        break;
                    case 'ontime':
                        status = status+' Handed in';
                        break;
                    case 'late':
                        status = status+' Late';
                        break;
                    default:
                        break;
                }
            
                var liElem = '<li class="assignment-link clearfix" data-assignment-link="' + assignLink + '"><div class="assign-icon"></div>'+
                             '<div class="assign-details">' + assignSubject + '' + assignTitle + '' + assignEnd + activity + status +'</div></li>';
                

                if (user_info.completed == null) {
                    getHTMLElem.find('.assignment-list'+child.uuid).append(liElem);
                }        
                //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>

 

Link to comment
Share on other sites

12 minutes ago, Graham Quince said:

A slightly different version, this code mimics the Assignments Menu in the Frog Bar


<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',
            is_completed: false,
            limit: 15, 
            order: 'start desc',
            assigned_user: child.uuid
        }
    });

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

        for (var uuid in assignments) {
        	if (assignments.hasOwnProperty(uuid)) {
		        assignment = assignments[uuid].assignment;
                user_info = assignments[uuid].user_info;
                
                getHTMLElem.find('.assignment-list'+child.uuid).show();
            
                var assignSubject = '<p><strong>' + assignment.subject.name + '</strong></p>';
                var assignTitle = '<p>' + assignment.name + '</p>';
                var assignEnd = '<span style="color: red;"><strong>Due: ' + moment(assignment.end, 'X').format('Do MMM YYYY') + '</strong></span>';
                var assignLink = assignment.link;
                var activity = ' | Activities done: <b>'+assignments[uuid].activities.complete+' / '+assignments[uuid].activities.total+'</b>';
                
                var status = ' | Status: ';
                switch(assignments[uuid].user_info.status) {
                    case 'notdone':
                        status = status+' Not done';
                        break;
                    case 'ontime':
                        status = status+' Handed in';
                        break;
                    case 'late':
                        status = status+' Late';
                        break;
                    default:
                        break;
                }
            
                var liElem = '<li class="assignment-link clearfix" data-assignment-link="' + assignLink + '"><div class="assign-icon"></div>'+
                             '<div class="assign-details">' + assignSubject + '' + assignTitle + '' + assignEnd + activity + status +'</div></li>';
                

                if (user_info.completed == null) {
                    getHTMLElem.find('.assignment-list'+child.uuid).append(liElem);
                }        
                //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 thought you were turning this into a widget..... ?

Link to comment
Share on other sites

16 hours ago, Graham Quince said:

Do you have any idea the hoops I have to jump through these days to get widget code approved ?

Do they still not trust you? ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...