Jump to content

My Assignments HTML


clangstaff

Recommended Posts

Hi @Chris.Smith thanks for taking a look at this. Am I right in thinking the code below

$(getHTMLElem).on('click', '.assignment-link', function(el){
        $(this).trigger('os.app.siteviewer', {
            data: { site: el.currentTarget.dataset.assignmentLink }
        });
    });

would need to be replaced with your updated code below?

var $assignment = $(el.currentTarget);

FrogOS.openSite({
  site: $assignment.data('assignment-link'),
  assignment_uuid: $assignment.data('assignment-uuid')
});

I gave this a go but get a malformed java error.

Link to comment
Share on other sites

42 minutes ago, Chris.Smith said:

@pconkie,

So you want the File Uploader to appear, upload a file, and then pass the resulting uuid to something afterwards?

Yep.

I would like to code a button like this:

Capture.PNG.bed3dd4803b8eaf8d4d1eec3c151356c.PNG

To open this:

Capture2.PNG.44c3d61a53add8f4760d77511dfd9f48.PNG

 

And return the uuid(s) of any file(s) uploaded.

 

I assume the file up-loader needs somewhere to put the files?  But if this can all be done without using a filedrop at all, then even better.

Thanks, I know your busy.  Any hint what the "top secret" stuff is your working on?

Paul

Link to comment
Share on other sites

51 minutes ago, pconkie said:

Yep.

I would like to code a button like this:

Capture.PNG.bed3dd4803b8eaf8d4d1eec3c151356c.PNG

To open this:

Capture2.PNG.44c3d61a53add8f4760d77511dfd9f48.PNG

 

And return the uuid(s) of any file(s) uploaded.

 

I assume the file up-loader needs somewhere to put the files?  But if this can all be done without using a filedrop at all, then even better.

Thanks, I know your busy.  Any hint what the "top secret" stuff is your working on?

Paul

It's been one of our most requested features for a long time, you'll find out at Conference ;)

~ Chris

Link to comment
Share on other sites

17 hours ago, pconkie said:

Yep.

I would like to code a button like this:

Capture.PNG.bed3dd4803b8eaf8d4d1eec3c151356c.PNG

To open this:

Capture2.PNG.44c3d61a53add8f4760d77511dfd9f48.PNG

 

And return the uuid(s) of any file(s) uploaded.

 

I assume the file up-loader needs somewhere to put the files?  But if this can all be done without using a filedrop at all, then even better.

Thanks, I know your busy.  Any hint what the "top secret" stuff is your working on?

Paul

Hi Paul,

Try this...

<button class="btn btn-default" role="button" data-action="launch-uploader">
  Upload
</button>

<script type="text/javascript">
  var you_want_models = false,
      just_uuids = true;
  
  this.element.find('button[data-action=launch-uploader]')
    .on('click', function(ev) {
      var site_uuid = this.elements.site.find('[data-site-uuid]:first').data('site-uuid');

      ev.stopPropagation();
    
      $('.os_core:first').trigger('os.app.upload', {
        "data": {
          "upload_type": "asset",
          "site_uuid": site_uuid,
          "focusApp": this.element.closest('div.app_dialog'),
          "callback": function(result) {
            var files, uuids;

            if (result.files && result.files.length) {
              if (you_want_models) {
                files = Sites.Models.Assets.models(result.files);
                uuids = Array.prototype.map.call(files, function(file) {
                  return file.attr('uuid');
                });
              } else if (just_uuids) {
                uuids = result.files.map(function(file) {
                  return file.uuid;
                });
              }

              // uuids = Array('uuid 1', 'uuid 2');            
            }
          }
        }
      });
    }.bind(this));
</script>

This will pop the uploaded files in the sites assets meaning you can manage them from the Site Assets Manager. You will notice that I have included two options for processing. It is preset just to return uuids, however if you change the boolean values at the top of the script tag then it can return a list of asset models which will give you more information about the file.

Hope this helps,

 

~ Chris

  • Like 1
Link to comment
Share on other sites

On 5/17/2017 at 08:21, Chris.Smith said:

Hi @clangstaff,

It would need to go inside the event callback:


$(getHTMLElem).on('click', function(ev) {
  /* code goes here */
});

You would also need to make sure the assignments uuid is added to the html markup the same way you have added the "assignment-link"

Hope that helps,

~ Chris

Unfortunately with my little knowledge of coding I'm struggling to find the time to look at this - anyone have the skill to quickly resolve this? I've included my code below. Thank you in advance!

<style>
.trs-student-current-assignments-widget {
background-color: #ffffff;
border-radius: 5px;
overflow: hidden;
}
.trs-student-current-assignments-widget .assignment-widget-header {
background-color: #3f274e;
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: 19px;
margin: 0;
line-height:35px;
}   
.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;
margin:0 0 0 0;
}    
    

    
.trs-student-current-assignments-widget .assignment-list :hover{
background-color:#ededed;
}        
    
.trs-student-current-assignments-widget .assignment-list .assignment-link {
border-bottom: 1px solid #ddd;
padding: 10px 10px  10px 10px;
margin: 0.5em 0;
cursor: pointer;
}
    
.trs-student-current-assignments-widget .assignment-list .assignment-link p {
margin: 0;
}
.trs-student-current-assignments-widget .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;
}
    
.trs-student-current-assignments-widget .assignment-list .assignment-link .assign-details {
padding: 0 1em;
float: left;
}
</style>

<div class="trs-student-current-assignments-widget">
    <div class="assignment-widget-header">
        <h1>My Upcoming 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: 7, order: 'end asc' }
    });

    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();
                getHTMLElem.find('.trs-student-current-assignments-widget .no-homework').hide();
            
                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('.trs-student-current-assignments-widget .assignment-list').append(liElem);
                
            }
        }
    });
    
    $(getHTMLElem).on('click', '.assignment-link', function(el){
        var $assignment = $(el.currentTarget);

FrogOS.openSite({
  site: $assignment.data('assignment-link'),
  assignment_uuid: $assignment.data('assignment-uuid')
});
    });
    </script>

 

Link to comment
Share on other sites

5 hours ago, Chris.Smith said:

Hi Paul,

Try this...


<button class="btn btn-default" role="button" data-action="launch-uploader">
  Upload
</button>

<script type="text/javascript">
  var you_want_models = false,
      just_uuids = true;
  
  this.element.find('button[data-action=launch-uploader]')
    .on('click', function(ev) {
      var site_uuid = this.elements.site.find('[data-site-uuid]:first').data('site-uuid');

      ev.stopPropagation();
    
      $('.os_core:first').trigger('os.app.upload', {
        "data": {
          "upload_type": "asset",
          "site_uuid": site_uuid,
          "focusApp": this.element.closest('div.app_dialog'),
          "callback": function(result) {
            var files, uuids;

            if (result.files && result.files.length) {
              if (you_want_models) {
                files = Sites.Models.Assets.models(result.files);
                uuids = Array.prototype.map.call(files, function(file) {
                  return file.attr('uuid');
                });
              } else if (just_uuids) {
                uuids = result.files.map(function(file) {
                  return file.uuid;
                });
              }

              // uuids = Array('uuid 1', 'uuid 2');            
            }
          }
        }
      });
    }.bind(this));
</script>

This will pop the uploaded files in the sites assets meaning you can manage them from the Site Assets Manager. You will notice that I have included two options for processing. It is preset just to return uuids, however if you change the boolean values at the top of the script tag then it can return a list of asset models which will give you more information about the file.

Hope this helps,

 

~ Chris

AMAZING.

Took me two hours to get this far...

<button id="btn1" type="button">Click Me!</button>

<script>
$('#btn1').on('click', function(ev) {
        $(this).trigger('os.app.upload', {
            data: { folder: 'C02427692002F19993597F2E4A88B90FAE7026CCA52EF2A9', method: 'resources.files.add', type: 'staff' }
        });
});
</script>

With no call back for grabbing the file uuids. And at first had no idea where my files were going (until i  looked in my frogdrive).

I'm looking forward to finding some time to try your code out......already got a really great idea for it.

Thanks Chris.

Paul

Link to comment
Share on other sites

  • 4 months later...
On 11/29/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

Did you ever get this working?

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...