Jump to content

Chris.Smith

School User
 View Profile  See their activity

  • Posts

    139

  • Joined

  • Last visited

 Content Type 

Posts posted by Chris.Smith

    My Assignments HTML

    in Coding

    Posted

    33 minutes ago, clangstaff said:

    @Chris.Smith Apologies but not entirely sure what you'd expect the greatest value to be in terms of time - would this be the most distant deadline?

    Our time comes back in the form of EPOC (a timestamp). Therefore the greater the value, the further in the future the date. So for example, 1481621745 is my current timestamp.... and 1481708175 is now plus one day; in a descending order I would expect tomorrow to come first, then today. Here's a larger example: 

    var time_range = [
	{
		alias: 'now',
		timestamp: moment().format('X') // 1481621745
	},
	{
		alias: 'yesterday',
		timestamp: moment().subtract(1, 'day').format('X') // 1481708175
	},
	{
		alias: 'first_sept',
		timestamp: moment('01/09/16').format('X') // 1452297600
	},
	{
		alias: 'fourth_nov',
		timestamp: moment('04/10/16').format('X') // 1460242800
	},
  	{
		alias: 'first_jan',
		timestamp: moment('01/01/17').format('X') // 1483228800
	}
];

function sort(direction, a, b) {
	switch(direction) {
		case 'asc':
			return a.timestamp < b.timestamp;
		case 'desc':
			return a.timestamp > b.timestamp;
        default:
              throw new Error('Unknown direction: '+direction);
	}
}

time_range.sort(sort.bind(time_range, 'desc')); // [{first_jan}, {now}, {yesterday}, {fourth_nov}, {first_sept}]
time_range.sort(sort.bind(time_range, 'asc')); // [{first_sept}, {fourth_nov}, {yesterday}, {now}, {first_jan}]

    Hope that clears things up :)

    Chris

    My Assignments HTML

    in Coding

    Posted

    28 minutes ago, clangstaff said:

    @Chris.Smith I've not reported this as I was unsure what order you'd have expected the assignments to be listed in. Can you confirm should they be listed with the closest deadline at the top of the list?

    @clangstaff I would expect the greatest value to be first.

    My Assignments HTML

    in Coding

    Posted

    3 hours ago, clangstaff said:

    @Graham Thorpe if we could get this in for Dickens we'll be very happy - we are launching assignments including the 'Homework Portal' soon after Christmas.

    @Chris.Smith Thanks for that I'll take a look when i get some time.

     

    I've been trying to work out how we can reorder our list of assignments to show the ones with the closest deadlines rather than the assignments with the furthest away deadlines - is this possible? I can't find any other 'order' commands listed anywhere.

      

    
    var assignments = FrogOS.fdp({
        url: 'assignment/getAssigned',
        data: { status: 'open', limit: 5, order: 'start desc' }
    });

     

    @clangstaff If the order attribute in the data object is not working as intended then that's something we should probably look at... Have you reported this to the Service team?

    /cc @Graham Quince @Matt

    My Assignments HTML

    in Coding

    Posted

    On 07/12/2016 at 10:22, clangstaff said:

    @Graham Quince  @Chris.Smith Even better could we have a couple of links to the right of each assignment - Quick view to view as student and another to open within Assignment Manager.

    In the future I'll be looking to build a similar homework page for parents so if anyone has anything created already - please let me know!

    Thanks,

     

     

    @Graham Quince Yes, you need to added the assignment uuid to the command that opens Assignment (Manager|Monitor|My Childs Work).

    @clangstaff This is a modified version of the code from "My Child's Work". 

    var params = {
  site: '',
  editable: false,
  assignment_uuid: assignment.attr('assignment_uuid'),
  mode: 'readonly',
  viewAs: student // <-- Must be a Lib.Models.User model
};

Sites.Models.Assign.findOne({
  uuid: assignment.attr('assignment_uuid')
}).done(
  function(site) {
    params.site = site.attr('link');

    FrogOS.openSite(params);
  }.bind(this)
);

    It may need modifying as the data it requires is from an "opinionated" API. 

    Hope this helps,

    ~ Chris

    • Like 1

    My Assignments HTML

    in Coding

    Posted

    2 hours ago, clangstaff said:

    I've been trying to create a replica of the code below but for students rather than staff. I prefer the layout of this and find it easier to work with than the cloning table row method used in the example for students. I am however, struggling to replicate this with student data can anyone spot where I'm going wrong? @Chris.Smith @Graham Quince

    Staff Code working fine: 

    
<style>
.trs-staff-current-assignments-widget {
background-color: #ffffff;
border-radius: 5px;
overflow: hidden;
}
.trs-staff-current-assignments-widget .assignment-widget-header {
background-color: #231f20;
padding: 1em;
position: relative;
text-align: left;
}
.trs-staff-current-assignments-widget .assignment-widget-header::after {
content: "";
width: 98%;
height: 60%;
position: absolute;
top: 3%;
left: 1%;
border-radius: 5px;
}
.trs-staff-current-assignments-widget .assignment-widget-header h1 {
color: #fff;
font-size: 20px;
margin: 0;
}   
.trs-staff-current-assignments-widget .no-homework {
padding: 1em;
text-align: center;
}
.trs-staff-current-assignments-widget .assignment-list {
list-style: none;
padding: 0 1em;
}    
    
.trs-staff-current-assignments-widget .assignment-list :hover{
background-color:#ededed;
}        
    
.trs-staff-current-assignments-widget .assignment-list .assignement-link {
border-bottom: 1px solid #ddd;
padding: 10px 10px  10px 10px;
margin: 0.5em 0;
cursor: pointer;
}
    
.trs-staff-current-assignments-widget .assignment-list .assignement-link p {
margin: 0;
}
.trs-staff-current-assignments-widget .assignment-list .assignement-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;
}
.trs-staff-current-assignments-widget .assignment-list .assignement-link .assign-details {
padding: 0 1em;
float: left;
}
</style>

<div class="trs-staff-current-assignments-widget">
    <div class="assignment-widget-header">
        <h1>My Recent Homework</h1>
    </div>
    <p class="no-homework">You've not set any homework yet</p>
    <ul class="assignment-list" style="display: none;">
        
    </ul>
</div>

<script>

    var getHTMLElem = arguments[0];
    
    var assignments = FrogOS.fdp({
        url: 'assignment/getCreated',
        data: { status: 'open', limit: 5, order: 'start desc' }
    });

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

    Student code attempt: 

    
<style>
.trs-student-current-assignments-widget {
background-color: #ffffff;
border-radius: 5px;
overflow: hidden;
}
.trs-student-current-assignments-widget .assignment-widget-header {
background-color: #231f20;
padding: 1em;
position: relative;
text-align: left;
}
.trs-student-current-assignments-widget .assignment-widget-header::after {
content: "";
width: 98%;
height: 60%;
position: absolute;
top: 3%;
left: 1%;
border-radius: 5px;
}
.trs-student-current-assignments-widget .assignment-widget-header h1 {
color: #fff;
font-size: 20px;
margin: 0;
}   
.trs-student-current-assignments-widget .no-homework {
padding: 1em;
text-align: center;
}
.trs-student-current-assignments-widget .assignment-list {
list-style: none;
padding: 0 1em;
}    
    
.trs-student-current-assignments-widget .assignment-list :hover{
background-color:#ededed;
}        
    
.trs-student-current-assignments-widget .assignment-list .assignement-link {
border-bottom: 1px solid #ddd;
padding: 10px 10px  10px 10px;
margin: 0.5em 0;
cursor: pointer;
}
    
.trs-student-current-assignments-widget .assignment-list .assignement-link p {
margin: 0;
}
.trs-student-current-assignments-widget .assignment-list .assignement-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;
}
.trs-student-current-assignments-widget .assignment-list .assignement-link .assign-details {
padding: 0 1em;
float: left;
}
</style>

<div class="trs-student-current-assignments-widget">
    <div class="assignment-widget-header">
        <h1>My Recent Homework</h1>
    </div>
    <p class="no-homework">You've not been set any homework yet</p>
    <ul class="assignment-list" style="display: none;">
        
    </ul>
</div>

<script>

    var getHTMLElem = arguments[0];
    
    var assignments = FrogOS.fdp({
        url: 'assignment/getAssigned',
        data: { status: 'open', limit: 5, order: 'start desc' }
    });

    assignments.done(function(data) {
        var assignments = data.response.assignments;
        for (var uuid in assignments) {
            if (assignments.hasOwnProperty(uuid)) {
                
                getHTMLElem.find('.assignment-list').show();
                getHTMLElem.find('.trs-student-current-assignments-widget .no-homework').hide();
            
                var assignSubject = '<p><strong>' + assignments[uuid].subject.name + '</strong></p>';
                var assignTitle = '<p>' + assignments[uuid].name + '</p>';
                var assignEnd = '<p style="color: red;"><strong>Due: ' + moment(assignments[uuid].end, 'X').format('Do MMM YYYY') + '</strong></p>';
                var assignLink = assignments[uuid].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('.trs-student-current-assignments-widget .assignment-list').append(liElem);
                
            }
        }
    });
    
    $(getHTMLElem).on('click', '.assignment-link', function(el){
        $(this).trigger('os.app.siteviewer', {
            data: { site: el.currentTarget.dataset.assignmentLink }
        });
    });
    </script>

     

    Hi @clangstaff

    This is due to the nested data structure. You are one level lower than you need to be...  

    {
    "assignments": { 
        "EC17261D200034DE79F32F10EA83CE0469E09D9CA1235592": { "has_feedback": 0 },
        "EC157C3320003748A5E0DFFDF4C73908258D99FC1028A058": { "has_feedback": 0 },
        "EC1649BA20003437A9827F2363E912060B3CFE6C71F0AB70": { "has_feedback": 0 },
        "EC1788C52000355DDC814F9C192B3603FF9B18FC15015FD9": { "has_feedback": 0 },
        "EC17261D200034DE79F32F10EA83CE0469E09D9CA1235592": { "has_feedback": 0 },
        "EC173C4220032A07A20DDF3FFF98E106AC26534C1C45D3F6": { // <-- You are here!!
            "activities": { "total": "1", "complete": 1 },
            "assignment": { "uuid": "EC17261D200034DE79F32F10EA83CE0469E09D9CA1235592", "name": "Script Generated Assignment 49" }, // <-- You need to be here
            "user_info": {
                "comments": "0",
                "creator": { "uuid": "EBDD2A0E20005F222E730F4EF076FD08ED03276CE5A4B047", "username": "admin1" },
                "has_feedback": 0,
                "user_info": {
                    "closed": null,
                    "comment": null,
                    "completed": 1481043676,
                    "mark": null,
                    "returned": null,
                    "self_assessment_comment": null,
                    "self_assessment_score": "1",
                    "uuid": "EC173C4220032A07A20DDF3FFF98E106AC26534C1C45D3F6",
                }
            }
        }
    },
    "total_count": 4
}

    Let me know if you need any further help on this, all the code you need is in the tutorial and previous posts. This code snippet may help: 

    var assignments = data.response.assignments,
    assignment;

for (var uuid in assignments) {
	if (assignments.hasOwnProperty(uuid)) {
		assignment = assignments[uuid].assignment;
      
      	var assignSubject = '<p><strong>' + assignment.subject.name + '</strong></p>';
      	// etc, etc, etc
    }
}

    Hope this helps,

    Chris

    • Like 1

    My Assignments HTML

    in Coding

    Posted

    On 29/11/2016 at 13:19, mnicholson said:

    I have tried to code and the widget is great, although I have encountered an issue this week.

    We have staff setting assignments on the weekend (they are setting the available from dates correctly (i.e. for next lesson not today's date) and when in the assignments app these assignments are not showing until that selected date.  The widget is showing them however - meaning students are attempting homework without input form staff (which isn't wanted).

    Want I am asking is there anyway to filter these assignment being shown (in the similar way to subject) - so that the start date/avaible from date isn't great than today's date?

    hope that makes sense.

    Mark

    Hi Mark,

    I have had a quick look at the FDP documentation and it confused me... There are two filters, "start_from" and "start_to". They are intended to help you limit the range of start dates. Here is an exert from the Docs...

    Quote
    Optional: start_from Int

    A timestamp used to limit the number of returned assignments. For example, to only get assignments created between the dates of 01/01/2016 and 07/01/2016, you would use 1451606400(01/01/2016) in the 'start_from' parameter, and 1452124800(07/01/2016) in the 'start_to' parameter below.

    Optional: start_to Int

    See 'start_from' description.

     After some consideration I figured out (rather ashamed of how long it took me) that if you set "start_from" to say, the beginning of time (or one year in the past maybe) and then "start_to" to the beginning of the current day, only the assignments you want will appear. I haven't tried it, but I have a sneaking suspicion that you might be able to get away without specifying "start_from".

    To get the "start_to" try the following: 

    moment().startOf('day').format('X')

     

    Hope this helps,

     

    Chris

    My Assignments HTML

    in Coding

    Posted

    On 07/11/2016 at 16:27, Corinne said:

    I meant, if assignment is complete..

    Hi Corinne,

    Sorry for the delay in getting to you; its been full steam ahead here at Frog Towers recently. The completed attribute is present in one of the response objects we filtered out earlier; Whoops. Here is an example data structure - Hopefully this looks familiar 

    {
    "assignments": { 
        "EC17261D200034DE79F32F10EA83CE0469E09D9CA1235592": { "has_feedback": 0 },
        "EC157C3320003748A5E0DFFDF4C73908258D99FC1028A058": { "has_feedback": 0 },
        "EC1649BA20003437A9827F2363E912060B3CFE6C71F0AB70": { "has_feedback": 0 },
        "EC1788C52000355DDC814F9C192B3603FF9B18FC15015FD9": { "has_feedback": 0 },
        "EC17261D200034DE79F32F10EA83CE0469E09D9CA1235592": { "has_feedback": 0 },
        "EC173C4220032A07A20DDF3FFF98E106AC26534C1C45D3F6": {
            "activities": { "total": "1", "complete": 1 },
            "assignment": { "uuid": "EC17261D200034DE79F32F10EA83CE0469E09D9CA1235592", "name": "Script Generated Assignment 49" },
            "user_info": {
                "comments": "0",
                "creator": { "uuid": "EBDD2A0E20005F222E730F4EF076FD08ED03276CE5A4B047", "username": "admin1" },
                "has_feedback": 0,
                "user_info": {
                    "closed": null,
                    "comment": null,
                    "completed": 1481043676,
                    "mark": null,
                    "returned": null,
                    "self_assessment_comment": null,
                    "self_assessment_score": "1",
                    "uuid": "EC173C4220032A07A20DDF3FFF98E106AC26534C1C45D3F6",
                }
            }
        }
    },
    "total_count": 4
}

    The problem lies here: 

    .map(function(assignment) {
    return assignment.assignment; // <-- Here be the start of ye problams, arrh
}).filter(function(assignment){
    return !assignment.complete;
})

    Here we are taking that top level aggregation, and grabbing the assignment object. So we need to access some of the data from the "user_info" object. Usually I would say rewrite the widget to accommodate the structure returned from the FDP however in your case, we can do the following as we don't require access to the information after this point. 

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

    Hope this helps,

     

    Chris

     

    My Assignments HTML

    in Coding

    Posted

    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

     

    Custom Assignment Widget

    in Coding

    Posted

    Hey @johnmorris01,

    My best recommendation is to inspect the API response and look at the data structure to find the data you want. If your not sure how to do this, I really recommend @Graham Quince's tutorial on Understanding API's.
     

    For example, to get the subject name, on inspection of the API response you would see that there is a subject object on the assignment object, and within that a name attribute. 

    {
  "assignment": {
    "subject": {
      "name": "English"
    }
  }
}

    So in our code we would say: 

    assignment.attr('subject').name

    Interestingly, the creator is not included as part of the assignment object. it is in fact a sibling attribute. I recommend that in the data converter, you move the creator into the assignment as an attribute of the assignment. 

    return Object.values(response).map(function(assignment) {
  assignment.assignment.creator = assignment.creator;
  
  return assignment.assignment;
});


    This particular endpoint happens to be covered on the old FDP site. http://fdp.frogcommunity.com/questions/view/485/get-assignments-assigned-to-a-user
    It's worth saying that we are updating our FDP API reference.

     

    Hope this helps,

    ~Chris

     

    My Assignments HTML

    in Coding

    Posted

    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

    Launching the Assignment Monitor with jQuery

    in Coding

    Posted

    21 minutes ago, sfoster said:

    Thanks Chris :)

    Is there anywhere we can get a list of endpoints please?

    Simon

    Hi Simon,

    We don't typically give out these endpoints, we are looking to augment them and present them in a cleaner way, hence FrogOS.js

    Whilst the official documentation is a few months away; here is a quick summary of the endpoints available to you as of the Dickens Release. 

    /**
 * Get the current user
 * @method getUser
 * @version 2015-06-29
 * @author Chris Smith
 *
 * @codestart javascript
 *
 * var element = jQuery('.welcome-msg'),
 *     user = FrogOS.getUser();
 *
 * element.text(
 *      sprintf('Hello <strong>%s</strong>', user.attr('displayname'))
 * );
 *
 * @codeend
 *
 * @return {Lib.Model.User} An instance of the User Class
 */
getUser: function() {},

/**
 * Alias Sprintf into our namespace.
 * @method sprintf
 * @version 2015-06-29
 * @author Chris Smith
 * @type {Function}
 *
 * @codestart javascript
 *
 * var date = moment().format('dddd MMMM YYYY'),
 *     element = jQuery('.welcome-msg');
 *
 * element.text(
 *      sprintf('Here\'s the schedule for %s', date);
 * );
 *
 * @codeend
 */
sprintf: sprintf,

/**
 * Alias FDP api method
 * @method fdp
 * @version 2015-07-02
 * @author Chris Smith
 * @type {Function}
 *
 * @codestart javascript
 *
 * FrogOS.fdp({
 *     url: 'notification/send',
 *     path: '/api/fdp/2/',
 *     type: 'POST',
 *     data: {
 *         recipients: recipients_list,
 *         message: my_message
 *     }
 * }).done(function(response) {
 *     // Do things
 * }).fail(function(e) {
 *     // Report Error
 * });
 *
 * @codeend
 *
 * @returns {jQuery.Promise} Promise Object
 */
fdp: function(options) {},

/**
 * Open a Site or Assignment
 * @method openSite
 * @version 2016-06-20
 * @author  Chris Smith
 *
 * @codestart javascript
 *
 * FrogOS.openSite({
 *     site: '/a_user/example_site'
 * });
 *
 * @codeend
 * @return this
 */
openSite: function(options) {},

/**
 * Open an application
 * @param  {String} appName Name of App
 * @param  {Object} options Application Info
 *
 * @codestart javascript
 *
 * // Open Student App
 * FrogOS.openApp(
 *     'assignmentreports',
 *     {
 *         view: student
 *     }
 * );
 *
 * @codend
 *
 * @note options parameter currently broken @chris.smith - 06/10/2016
 *
 * @return this
 */
openApp: function(appName, options) {}

    Hope this helps :)

    • Like 1

    Launching the Assignment Monitor with jQuery

    in Coding

    Posted

    Hi @sclough,

    You can open the Assignment Monitor app using the new endpoints in FrogOS.js

    Normally we would do this; 

    FrogOS.openApp(
    'assignmentreports',
    { view: "monitor" }
);

    But it doesn't seem to be behaving itself at the moment, so lets pull apart what this does under the hood. 

    $('.os_core:first').trigger('os.internal.launchapp', {
    data: {
        name: 'assignmentreports',
        view: 'monitor'
    }
});

    The above code will give you the desired result. I will be logging a bug to fix the FrogOS.js and hopefully that will go out in one of the next few hotfixes :)

    • Like 1

    Events

    in Coding

    Posted

    Hi Sue,

    This won't be working as to prevent Cross Site Scripting attacks, we actively remove <script> tags from the HTML Widget; there is of course a way around this. 

    <div data-tockify-component="calendar" data-tockify-calendar="events.kennet"></div>
<script>
    var $script = $(document.createElement('script'));

    $script.attr('data-tockify-script', 'embed')
        .attr('src', 'https://public.tockify.com/browser/embed.js');
    
    this.element.append($script);
</script>

    Here we are manually creating the script element. We have to do this, as the HTML Widget uses a regex which removes instances of '<script>' and '</script>'. This is also why we can't use jQuery to create the element for us.

     

    Hope this helps

     

    ~ Chris

    • Like 1
×
×
  • Create New...