Jump to content
clangstaff

My Assignments HTML

Recommended Posts

Hi @clangstaff

This tutorial has some code to display student assignments: https://www.frogcommunity.com/understanding-api

And i think this was the code by the end of discussion you were asking about:

@John Elliott's code:

<style>
    .headp {font-size:14px; color:#0b81cc; font-weight:bold;}
    #my_recent_homework .table th {font-weight:bold; font-size:14px;}
    #my_recent_homework .table th, #my_recent_homework .table td {height:25px;}
    #my_recent_homework tr:hover {background-color: #f5f5f5; cursor: pointer;}
    #my_recent_homework th { background-color:#0b81cc; color:#ffffff; height: }
    #my_recent_homework .width100 {width:100px;}
    #my_recent_homework .width200 {width:200px;}
    
    #my_recent_homework .ui-app-icon-assignments {
        width: 26px;    height: 26px;
        background-size: 405px 377.5px;
        float: left;
        margin-right: 10px;
        background-position: 0px -222px;
    }
        
</style>
<div class='headp'>My recent homeworks:</div>
<table id="my_recent_homework" class='table'>
    <thead>
        <tr>
            <th>Title</th><th>Description</th><th>Assigned</th><th>Due</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script>
//if you want to test on a student without logging in as them, get their UUID and replace data below with:
// data:        { status: 'open', assigned_user: 'UUID OF STUDENT HERE' }

//send off the API call:
var assignments = FrogOS.fdp({
    url:        'assignment/getAssigned',
    data:        { status: 'open', limit: 5, order: 'start desc' } //we want open assignments for the currently logged in student
});

//now add a function to handle the response from the API
assignments.done(function(data) { //the response from frog is in the var 'data'
    //to see what is all there press F12 in chrome (or IE, i guess) and view the console then:
    console.log(data);
    
    //make sure there are some assignments to loop through!
    if (typeof data.response.total_count !== 'undefined' && data.response.total_count > 0) {
        var assignments = data.response.assignments;        
        for (var uuid in assignments) {
            if (assignments.hasOwnProperty(uuid)) { //make sure this is an assignment
                console.log(assignments[uuid]);
                var a = assignments[uuid].assignment;
                var start = moment(a.start, 'X').format('Do MMM YYYY');
                var end = moment(a.end, 'X').format('Do MMM YYYY');
                
                $('#my_recent_homework tbody').append(
                    '<tr data-link="'+ a.link +'" data-uuid="'+ a.uuid +'" class="recent_assignment">'+
                        '<td class="width200"><div class="widget-icon-wrapper"><div class="widget-icon ui-app-icon ui-app-icon-assignments"></div></div>'+ a.name +'</td>'+
                        '<td>'+ a.description +'</td>'+
                        '<td class="width100">'+ start +'</td>'+
                        '<td class="width100">'+ end +'</td>'+
                    '</tr>'
                );
            }
        }
    }
});

$('body')
    .on('click', '#my_recent_homework tr.recent_assignment td', function() {
        var data = $(this).parent().data();
        console.log(data);
        $('<a href="#" style="display: none;" data-site-link="'+ data.link +'" data-site-uuid-cke="'+ data.uuid +'"></a>').appendTo('#my_recent_homework').click().remove();
    })
;
        
</script>

Which produced this look:

jelliot.png

 

@shutterm added a variation

image_495.pngimage_494.png

<style>
.HomeworkTable{
    border-collapse: collapse;
    width: 100%;
    font-family: 'lato',sans-serif;
    text-align: left;
    overflow: hidden;
    cursor: default;
}

.HomeworkTable, td {
    padding: 8px;
}

.HomeworkRow{
 font-weight: 400;
 font-size: 12.5px;
 color: #888888;
 word-break:keep-all;
    border-top: 1px solid #ebebeb;
    background: #fff;

}
.HomeworkRow:hover{
        background: #f6f6f6;
        cursor: pointer;
}
.icon{
        padding:0 0 0 5px!important;
        width:30px;
    }
   
</style>


<table id="my_recent_homework" class='HomeworkTable'>
    <tbody>
    </tbody>
</table>

<script>
//if you want to test on a student without logging in as them, get their UUID and replace data below with:
// data:        { status: 'open', assigned_user: 'UUID OF STUDENT HERE' }

//send off the API call:
var assignments = FrogOS.fdp({
    url:  'assignment/getAssigned',
    data: { status: 'open', limit: 3, order: 'start desc' } //we want open assignments for the currently logged in student
});

//now add a function to handle the response from the API
assignments.done(function(data) { //the response from frog is in the var 'data'
    //to see what is all there press F12 in chrome (or IE, i guess) and view the console then:
    console.log(data);
   
    //make sure there are some assignments to loop through!
    if (typeof data.response.total_count !== 'undefined' && data.response.total_count > 0) {
        var assignments = data.response.assignments;       
        for (var uuid in assignments) {
            if (assignments.hasOwnProperty(uuid)) { //make sure this is an assignment
                console.log(assignments[uuid]);
                var a = assignments[uuid].assignment;
                var start = moment(a.start, 'X').format('Do MMM');
                var end = moment(a.end, 'X').format('Do MMM');
                $('#my_recent_homework tbody').append('\
                    <tr data-link="'+ a.link +'" data-uuid="'+ a.uuid +'" class="recent_assignment HomeworkRow"> \
                        <td class="icon"><div><img style="width:100%;" src="INSERT_ICON_URL"></td> \
                        <td><strong>'+ a.subject.name + '</strong>'+'<br/>' + a.name + '</td> \
                        <td style="text-align: center;">Due:'+ '<br/>'+ end +'</td> \
                    </tr> \
                ');
            }
        }
    }
});

$('body')
    .on('click', '#my_recent_homework tr.recent_assignment td', function() {
        var data = $(this).parent().data();
        console.log(data);
        $('<a href="#" style="display: none;" data-site-link="'+ data.link +'" data-site-uuid-cke="'+ data.uuid +'"></a>').appendTo('#my_recent_homework').click().remove();
    })
;       
</script>

You came on with a variation:

image_495.png

<style>
    #my_recent_homework .outerdiv {background-color:#ffffff; padding:10px 10px 0 10px;}
    #my_recent_homework .headp {font-size:14px; color:#0b81cc; font-weight:bold; padding-bottom:10px; text-transform:uppercase;}
    #my_recent_homework .table th {font-weight:bold; font-size:14px; color:#444444;}
    #my_recent_homework .table th, #my_recent_homework .table td {height:20px;}
    #my_recent_homework tr:hover {background-color: #dcebf4; cursor: pointer;}
    #my_recent_homework .redcol {color:red; text-align:left;}
    
    #my_recent_homework .assappicon {height:100%;}
    #my_recent_homework .ui-app-icon-assignments {
        width: 26px;    height: 26px;
        background-size: 405px 377.5px;
        float: left;
        margin-right: 10px;
        background-position: 0px -222px;
    }
    
    
        
</style>


<div id="my_recent_homework">
<div class="outerdiv">
    <div class='headp'>Latest Assignments:</div>
<table id="my_recent_homework" class='table'>
    <thead>
        <tr>
            
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
     </div><!--outerdiv-->
    </div><!--my_recent_homework-->
    
<script>
//if you want to test on a student without logging in as them, get their UUID and replace data below with:
// data:        { status: 'open', assigned_user: 'UUID OF STUDENT HERE' }

//send off the API call:
var assignments = FrogOS.fdp({
    url:        'assignment/getAssigned',
    data:        { status: 'open', limit: 5, order: 'start desc' } //we want open assignments for the currently logged in student
});

//now add a function to handle the response from the API
assignments.done(function(data) { //the response from frog is in the var 'data'
    //to see what is all there press F12 in chrome (or IE, i guess) and view the console then:
    console.log(data);
    
    //make sure there are some assignments to loop through!
    if (typeof data.response.total_count !== 'undefined' && data.response.total_count > 0) {
        var assignments = data.response.assignments;        
        for (var uuid in assignments) {
            if (assignments.hasOwnProperty(uuid)) { //make sure this is an assignment
                console.log(assignments[uuid]);
                var a = assignments[uuid].assignment;
                var end = moment(a.end, 'X').format('Do MMM');
                

                $('#my_recent_homework tbody').append('\
                    <tr data-link="'+ a.link +'" data-uuid="'+ a.uuid +'" class="recent_assignment"> \
                        <td><div class="widget-icon-wrapper"><div class="widget-icon ui-app-icon ui-app-icon-assignments"></div></div></div></td> \
                        <td><b>'+ a.subject.name + '</b></br>'+ a.name +' </br> <div class="redcol"> Due: '+ end +'</div></td> \
                    </tr> \
                ');
            }
        }
    }
});

$('body')
    .on('click', '#my_recent_homework tr.recent_assignment td', function() {
        var data = $(this).parent().data();
        console.log(data);
        $('<a href="#" style="display: none;" data-site-link="'+ data.link +'" data-site-uuid-cke="'+ data.uuid +'"></a>').appendTo('#my_recent_homework').click().remove();
    })
;
        
</script>

 

Link to comment
Share on other sites

@AdamPorter then asked if it was possible to have a compressed and expanded version of the code all in one:

@John Elliott replied:

Quote

you need to have a unique id on the table for each site it may be open in. Also, I only expected for this code to be used on a dashboard, so the last bit of the code which opens the homework if you click on it will be really buggy if opened in a different site. for every time the site is opened (during a single login), it'll open the homework that many times. So, if I open the site, close it, open it again and then click on a homework row, that homework will open twice. Not really ideal.

I did think that I should probably bind the click event to the actual TR as it was being made to avoid this, but didn't take the time to write it slightly different. I was lazy and let it propagate down to the body.

If you give me some time, I'll think of something more portable that doesn't have these issues.

EDIT: just realised you mentioned on multiple pages of the same dashboard. This shouldn't be too bad. I'd just make sure that your <table> tag have a unique ID, and then replace all occurrences of #my_homework_table in the second version with the new id like #new_table_id. Still think the click bind is sloppy, but it'll still work here.

just adding _2 to the id in the expanded version:

<style>
    .headp {font-size:14px; color:#DD353C; font-weight:bold;}
    #my_recent_homework_2 .table th {font-weight:bold; font-size:14px;}
    #my_recent_homework_2 .table th, #my_recent_homework_2 .table td {height:25px;}
    #my_recent_homework_2 tr:hover {background-color: #f5f5f5; cursor: pointer;}
    #my_recent_homework_2 th { background-color:#DD353C; color:#ffffff; height: }
    #my_recent_homework_2 .width100 {width:100px;}
    #my_recent_homework_2 .width200 {width:200px;}
    
    #my_recent_homework_2 .ui-app-icon-assignments {
        width: 26px;    height: 26px;
        background-size: 405px 377.5px;
        float: left;
        margin-right: 10px;
        background-position: 0px -222px;
    }
        
</style>
<div class='headp'>My recent homeworks:</div>
<table id="my_recent_homework_2" class='table'>
    <thead>
        <tr>
            <th>Title</th><th>Description</th><th>Assigned</th><th>Due</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script>
//if you want to test on a student without logging in as them, get their UUID and replace data below with:
// data:        { status: 'open', assigned_user: 'UUID OF STUDENT HERE' }

//send off the API call:
var assignments = FrogOS.fdp({
    url:        'assignment/getAssigned',
    data:        { status: 'open', limit: 15, order: 'start desc' } //we want open assignments for the currently logged in student
});

//now add a function to handle the response from the API
assignments.done(function(data) { //the response from frog is in the var 'data'
    //to see what is all there press F12 in chrome (or IE, i guess) and view the console then:
    console.log(data);
    
    //make sure there are some assignments to loop through!
    if (typeof data.response.total_count !== 'undefined' && data.response.total_count > 0) {
        var assignments = data.response.assignments;        
        for (var uuid in assignments) {
            if (assignments.hasOwnProperty(uuid)) { //make sure this is an assignment
                console.log(assignments[uuid]);
                var a = assignments[uuid].assignment;
                var start = moment(a.start, 'X').format('Do MMM YYYY');
                var end = moment(a.end, 'X').format('Do MMM YYYY');
                
                $('#my_recent_homework_2 tbody').append(
                    '<tr data-link="'+ a.link +'" data-uuid="'+ a.uuid +'" class="recent_assignment">'+
                        '<td class="width200"><div class="widget-icon-wrapper"><div class="widget-icon ui-app-icon ui-app-icon-assignments"></div></div>'+ a.name +'</td>'+
                        '<td>'+ a.description +'</td>'+
                        '<td class="width100">'+ start +'</td>'+
                        '<td class="width100">'+ end +'</td>'+
                    '</tr>'
                );
            }
        }
    }
});

$('body')
    .on('click', '#my_recent_homework_2 tr.recent_assignment td', function() {
        var data = $(this).parent().data();
        console.log(data);
        $('<a href="#" style="display: none;" data-site-link="'+ data.link +'" data-site-uuid-cke="'+ data.uuid +'"></a>').appendTo('#my_recent_homework_2').click().remove();
    })
;
        
</script>

 

Link to comment
Share on other sites

Finally @Chris.Smith came on and posted a slightly updated version of the code:

Quote

As mentioned there are a number of fixes + improvements to the HTML Widget and FDP going into Curie RC2 and RC3. When Curie is widely available; I will rewrite the tutorial and the attached code to match the most up-to-date version of the API's which should remove some of the complicated parts of the above.

<style>
    .row-template {
        display: none;
    }
    .widget-header {
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
        background-color: #6cbe44;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border: 1px solid #000;
        border-bottom-width: 0;
        color: white;
    }
    .widget-body {
        background-color: white;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border: 1px solid;
        border-top-width: 0;
    }
    .row-no-data td {
        text-align: center;
    }
    tr + .row-no-data {
        display: none;
    }
</style>
<div class="widget-header">
    <h4>Homework List</h4>
</div>
<div class="widget-body">
    <table class="table table-striped">
        <thead>
            <tr>
                <th> </th>
                <th>Title</th>
                <th>Description</th>
                <th>Available on</th>
                <th>Due</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row-no-data">
                <td colspan="5">
                    You have no homework
                </td>
            </tr>
            <tr class="row-template">
                <td><!-- icon --></td>
                <td class="title"></td>
                <td class="description"></td>
                <td class="start_date"></td>
                <td class="due_date"></td>
            </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    FrogOS.fdp({
        url: 'assignment/getAssigned',
        data: {
            status: 'open',
            limit: 5,
            order: 'start desc'
        },
        dataType: 'json assignments',
        converters: {
            /*
             * Instructions for how to deserialize the network response
             * See: https://api.jquery.com/jQuery.ajax/#using-converters
             *
             * @param jqXHr Network Response
             * @returns Frog.Model.List List of Assignments
             */
            'json assignments': function(resp) {
                return Frog.Model.models(
                    Object.values(resp.response.assignments)
                        .map(function(assignment) {
                            return assignment.assignment;
                        })
                    );
            }
        }
    }).done(function(assignments) {
        // Cache the elements we require. We'll use the principle of hoisting
        // to access them when we need them.
        var $template = this.element.find('.row-template'),
            $table = this.element.find('table');

        // Iterate over the collection of assignments
        // See: http://frogasia.github.io/javascriptmvc-3.2-docs/#!jQuery.Model.List.prototype.each
        assignments.reverse().each(function(idx, assignment) {
            var $row = $template.clone().removeClass('row-template'); // Clone the template

            $row.data('link', assignment.attr('link')); // Encapsulate the data we will need later
            // Place the data in the table row in the correct cells
            $row.children('.title').text(assignment.attr('name'));
            $row.children('.description').html(assignment.attr('description'));
            $row.children('.start_date').text(
                moment(assignment.attr('start'), 'X').format('Do MMM YYYY')
            );
            $row.children('.due_date').text(
                moment(assignment.attr('end'), 'X').format('Do MMM YYYY')
            );

            // Before we append row onto the table, add the "click" listener.
            $row.on('click', function(el, ev) {
                // Fire an OS level event to launch the site.
                this.element.trigger('os.app.siteviewer', {
                    data: {
                        site: el.data('link') // Get the data from the element we clicked
                    }
                });
            }.bind(this, $row)); // Apply the current scope, and set the first parameter to the current row

            $table.find('tbody').prepend($row); // Finally, prepend the row.
        }.bind(this)); // Apply the current scope to the iterator.

    }.bind({
        element: arguments[0] // This is the jQuery reference to the HTML Widget
    }));
</script>

 

Link to comment
Share on other sites

Cheers @Graham Quince that's the one.

 

Does anyone have any idea how we can get Assignments to disappear from the list when the due date has passed? This is the code I am currently using on our platform.

 

<style>
    #my_recent_homework .outerdiv {background-color:#ffffff; padding:10px 10px 0 10px;}
    #my_recent_homework .headp {font-size:14px; color:#0b81cc; font-weight:bold; padding-bottom:10px; text-transform:uppercase;}
    #my_recent_homework .table th {font-weight:bold; font-size:14px; color:#444444;}
    #my_recent_homework .table th, #my_recent_homework .table td {height:20px;}
    #my_recent_homework tr:hover {background-color: #dcebf4; cursor: pointer;}
    #my_recent_homework .redcol {color:red; font-size:12px; font-weight:bold; text-align:left;}
    
    #my_recent_homework .assappicon {height:100%;}
    #my_recent_homework .ui-app-icon-assignments {
        width: 45px;    height: 45px;
        background-size: 600px 586px;
        float: left;
        margin-right: 10px;
        margin-top:7px;
        background-position: -45px -372px;
    }
    
    
        
</style>


<div id="my_recent_homework">
<div class="outerdiv">
    <div class='headp'>Latest Assignments:</div>
<table id="my_recent_homework" class='table'>
    <thead>
        <tr>
            
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
     </div><!--outerdiv-->
    </div><!--my_recent_homework-->
    
<script>
//if you want to test on a student without logging in as them, get their UUID and replace data below with:
// data:        { status: 'open', assigned_user: 'UUID OF STUDENT HERE' }

//send off the API call:
var assignments = FrogOS.fdp({
    url:        'assignment/getAssigned',
    data:        { status: 'open', limit: 6, order: 'start desc' } //we want open assignments for the currently logged in student
});

//now add a function to handle the response from the API
assignments.done(function(data) { //the response from frog is in the var 'data'
    //to see what is all there press F12 in chrome (or IE, i guess) and view the console then:
    console.log(data);
    
    //make sure there are some assignments to loop through!
    if (typeof data.response.total_count !== 'undefined' && data.response.total_count > 0) {
        var assignments = data.response.assignments;        
        for (var uuid in assignments) {
            if (assignments.hasOwnProperty(uuid)) { //make sure this is an assignment
                console.log(assignments[uuid]);
                var a = assignments[uuid].assignment;
                var end = moment(a.end, 'X').format('Do MMM');
                

                $('#my_recent_homework tbody').append('\
                    <tr data-link="'+ a.link +'" data-uuid="'+ a.uuid +'" class="recent_assignment"> \
                        <td><div class="widget-icon-wrapper"><div class="widget-icon ui-app-icon ui-app-icon-assignments"></div></div></div></td> \
                        <td><b>'+ a.subject.name + '</b></br>'+ a.name +' </br> <div class="redcol"> Due: '+ end +'</div></td> \
                    </tr> \
                ');
            }
        }
    }
});

$('body')
    .on('click', '#my_recent_homework tr.recent_assignment td', function() {
        var data = $(this).parent().data();
        console.log(data);
        $('<a href="#" style="display: none;" data-site-link="'+ data.link +'" data-site-uuid-cke="'+ data.uuid +'"></a>').appendTo('#my_recent_homework').click().remove();
    })
;
        
</script>

The code above creates the view attached. Although this is just a test account I am looking at you can see that a number of the assignments have expired sometime ago, they are still displaying as teachers are yet to close them (something they need to get in to the habit of eventually).

Thanks,

Chris

 

latest-assignments.jpg

Edited by clangstaff
  • Like 1
Link to comment
Share on other sites

@clangstaff - for your Assignment widget above,I'm interested in potentially adapting something like that for our school as it ticks a lot of boxes for us. However, when trying it on a Student Dashboard and clicking on assignments, you get a 'Sorry, you no longer have access to this site'. Was there anything in particular within the code which needs tweaking to be used on other school platforms?

Link to comment
Share on other sites

@johnmorris01 If you are using the latest version of the script available here. Then all should be fine... The only thing I would advise is that if you are experiencing this when you are logged in as yourself (i.e. not the student) then the platform is enforcing the sharing permissions set against the site. I will have a chat with @Graham Quince and see if we can get to the bottom of this in-house.

Stay tuned :)

/cc @John Elliott @clangstaff

Link to comment
Share on other sites

@Chris.Smith - I was actually trying @clangstaff's version as I've been after a simpler version with just the Title/Subject/Due date and also the ability for the pupils to then click through to the assignment. The first part works great visually but the click through takes you to the permission error when opening the assignment on a student account. I tried adapting the code from the Tutorial on the Frog Community site to not show the description and instead show the subject name instead but it would always just show a blank instead :(

Link to comment
Share on other sites

4 minutes ago, Chris.Smith said:

@johnmorris01 That's weird.. Hmm. If I get chance this week I will update the tutorial code and "kick the tires" a little; see if I can figure out whats going on for you :). Hopefully someone on the community might have a few ideas...

 

/cc @clangstaff @Graham Quince

That would be great - ideally we would like to get the teacher who assigned the work on the widget as well but having just the subject name being able to be added would be fine.

Link to comment
Share on other sites

Sorry to high-jack this thread, but was having a read a noticed the image from @Graham Quince's 2nd post which showed a Student notices, is it just a customised Timeline or something else very cunning? Looks very slick, and prefer it to the standard notice system and was hoping to have a go at replicating it. How do you post to, are they images or is it text inputted?

Thanks and sorry again for thread-jacking!

Gareth

Link to comment
Share on other sites

Just in case anyone who is a bit of a code whizz, this is the code we have used to try and display the subject name in place of the description:

<style>
    .row-template {
        display: none;
    }
    .widget-header {
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
        background-color: #000000;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border: 1px solid #000;
        border-bottom-width: 0;
        color: #f2d300;
    }
    .widget-body {
        background-color: white;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border: 1px solid;
        border-top-width: 0;
    }
    .row-no-data td {
        text-align: center;
    }
    tr + .row-no-data {
        display: none;
    }
</style>
<div class="widget-header">
    <h4>My most recent homeworks:</h4>
</div>
<div class="widget-body">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Title</th>
                <th>Subject</th>
                <th>Available on</th>
                <th>Due</th>
            </tr>
        </thead>
    <tbody>
            <tr class="row-no-data">
                <td colspan="6">
                    You have no homework currently set
                </td>
            </tr>
            <tr class="row-template">
                <td><!-- icon --></td>
                <td class="title"></td>
                <td class="subject"></td>
                <td class="start_date"></td>
                <td class="due_date"></td>
            </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    FrogOS.fdp({
        url: 'assignment/getAssigned',
        data: {
            status: 'open',
            limit: 4,
            order: 'start desc'
        },
        dataType: 'json assignments',
        converters: {
            /*
             * Instructions for how to deserialize the network response
             * See: https://api.jquery.com/jQuery.ajax/#using-converters
             *
             * @param jqXHr Network Response
             * @returns Frog.Model.List List of Assignments
             */
            'json assignments': function(resp) {
                return Frog.Model.models(
                    Object.values(resp.response.assignments)
                        .map(function(assignment) {
                            return assignment.assignment;
                        })
                    );
            }
        }
 }).done(function(assignments) {
        // Cache the elements we require. We'll use the principle of hoisting
        // to access them when we need them.
        var $template = this.element.find('.row-template'),
            $table = this.element.find('table');

        // Iterate over the collection of assignments
        // See: http://frogasia.github.io/javascriptmvc-3.2-docs/#!jQuery.Model.List.prototype.each
        assignments.reverse().each(function(idx, assignment) {
            var $row = $template.clone().removeClass('row-template'); // Clone the template

            $row.data('link', assignment.attr('link')); // Encapsulate the data we will need later
            // Place the data in the table row in the correct cells
            $row.children('.title').text(assignment.attr('name'));
            $row.children('.subject').text(assignment.attr('subject_name'));
            $row.children('.start_date').text(
                moment(assignment.attr('start'), 'X').format('Do MMM YYYY')
            );
            $row.children('.due_date').text(
                moment(assignment.attr('end'), 'X').format('Do MMM YYYY')
            );

            // Before we append row onto the table, add the "click" listener.
            $row.on('click', function(el, ev) {
                // Fire an OS level event to launch the site.
                this.element.trigger('os.app.siteviewer', {
                    data: {
                        site: el.data('link') // Get the data from the element we clicked
                    }
                });
            }.bind(this, $row)); // Apply the current scope, and set the first parameter to the current row

            $table.find('tbody').prepend($row); // Finally, prepend the row.
        }.bind(this)); // Apply the current scope to the iterator.

  }.bind({
        element: arguments[0] // This is the jQuery reference to the HTML Widget
    }));
</script>

I'm pretty sure its something really dumb that somebody could correct in about 30 secs - if anyone could then that would be great!

Link to comment
Share on other sites

Hi @johnmorris01

Here is the fix for your problem; I have also provided a little update to use the latest API's. 

<style>
    .row-template {
        display: none;
    }
    .widget-header {
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
        background-color: #000000;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border: 1px solid #000;
        border-bottom-width: 0;
        color: #f2d300;
    }
    .widget-body {
        background-color: white;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border: 1px solid;
        border-top-width: 0;
    }
    .row-no-data td {
        text-align: center;
    }
    tr + .row-no-data {
        display: none;
    }
</style>
<div class="widget-header">
    <h4>My most recent homeworks:</h4>
</div>
<div class="widget-body">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Title</th>
                <th>Subject</th>
                <th>Available on</th>
                <th>Due</th>
            </tr>
        </thead>
    <tbody>
            <tr class="row-no-data">
                <td colspan="6">
                    You have no homework currently set
                </td>
            </tr>
            <tr class="row-template">
                <td><!-- icon --></td>
                <td class="title"></td>
                <td class="subject"></td>
                <td class="start_date"></td>
                <td class="due_date"></td>
            </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    FrogOS.fdp({
        url: 'assignment/getAssigned',
        data: {
            status: 'open',
            limit: 4,
            order: 'start desc'
        },
        dataType: 'json assignments',
        converters: {
            /*
             * Instructions for how to deserialize the network response
             * See: https://api.jquery.com/jQuery.ajax/#using-converters
             *
             * @param jqXHr Network Response
             * @returns Frog.Model.List List of Assignments
             */
            'json assignments': function(resp) {
                return Frog.Model.models(
                    Object.values(resp.response.assignments)
                        .map(function(assignment) {
                            return assignment.assignment;
                        })
                    );
            }
        }
 }).done(function(assignments) {
        // Cache the elements we require. We'll use the principle of hoisting
        // to access them when we need them.
        var $template = this.element.find('.row-template'),
            $table = this.element.find('table');

        // Iterate over the collection of assignments
        // See: http://frogasia.github.io/javascriptmvc-3.2-docs/#!jQuery.Model.List.prototype.each
        assignments.reverse().each(function(idx, assignment) {
            var $row = $template.clone().removeClass('row-template'); // Clone the template

            $row.data('link', assignment.attr('link')); // Encapsulate the data we will need later
            // Place the data in the table row in the correct cells
            $row.children('.title').text(assignment.attr('name'));
            $row.children('.subject').text(assignment.attr('subject').name);
            $row.children('.start_date').text(
                moment(assignment.attr('start'), 'X').format('Do MMM YYYY')
            );
            $row.children('.due_date').text(
                moment(assignment.attr('end'), 'X').format('Do MMM YYYY')
            );

            // Before we append row onto the table, add the "click" listener.
            $row.on('click', function(el, ev) {
                FrogOS.openSite({
                    site: el.data('link') // Get the data from the element we clicked
                });
            }.bind(this, $row)); // Apply the current scope, and set the first parameter to the current row

            $table.find('tbody').prepend($row); // Finally, prepend the row.
        }.bind(this)); // Apply the current scope to the iterator.

  }.bind(this));
</script>

Hope this helps,

~ Chris

/cc @Graham Quince @shutterm

  • Like 1
Link to comment
Share on other sites

@Chris.Smith I wonder if you could offer any help.

Basically the old code we were using gave us a much cleaner table where the content was kept in one column rather than multiple table columns. This allowed us to use the code in a much smaller space on the student area.

I've attached a screenshot of your new and updated code next to our old code and I'm just wondering if this would be achievable.

I've attempted to recreate this myself by making changes however, if I attempt to get the data in one column it disappears. 

Thanks,

Chris

assignments.png

Link to comment
Share on other sites

1 hour ago, clangstaff said:

@Chris.Smith I wonder if you could offer any help.

Basically the old code we were using gave us a much cleaner table where the content was kept in one column rather than multiple table columns. This allowed us to use the code in a much smaller space on the student area.

I've attached a screenshot of your new and updated code next to our old code and I'm just wondering if this would be achievable.

I've attempted to recreate this myself by making changes however, if I attempt to get the data in one column it disappears. 

Thanks,

Chris

assignments.png

Hey @clangstaff

This is totally achievable, in fact, if you swap out the new table HTML with your old one, this *should* work.

Failing that, abandon the table as actually; what you want can be better constructed using <ul>, <li> and CSS.

Have a go, and let me know how you get on!

~ Chris

 

Link to comment
Share on other sites

Can I ask what code/HTML needs to chage so I can place the HTML on a subject page and only display the subject specific homework set on that page? I know we did have a discussion thread about this but just want to double check with this code update. Thanks in advance.

Link to comment
Share on other sites

Hi @Sue Busher

So, to add a completed filter we need to add to the converters section:

converters: {
            /*
             * Instructions for how to deserialize the network response
             * See: https://api.jquery.com/jQuery.ajax/#using-converters
             *
             * @param jqXHr Network Response
             * @returns Frog.Model.List List of Assignments
             */
            'json assignments': function(resp) {
                return Frog.Model.models(
                    Object.values(resp.response.assignments)
                        .map(function(assignment) {
                            return assignment.assignment;
                        })
                    );
            }
        }

After the .map function, let's add a filter to return a result if the assignment is not marked as completed:

.map(function(assignment) {
    return assignment.assignment;
}).filter(function(assignment){
    return !assignment.complete;
})

And we can add another filters for a specific subject:

.map(function(assignment) {
    return assignment.assignment;
}).filter(function(assignment){
    return !assignment.complete;
}).filter(function(assignment){
    return assignment.attr('subject').name==="Geography";
})

Does that make sense?

Link to comment
Share on other sites

Thanks Graham. I think it does, but just to double check. The main thread of this gives is the baseline code, but if I add the above elements, based on what I want it to do, it should work? In other words you need the main code first - these elements don't work without it? 

Link to comment
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.



×
×
  • Create New...