meteor-admin-site version 0.4.0

We released today the version 0.4.0 of the meteor-admin-site package.

In this version we are introducing the concept of field edit plugins, pluggable components to edit some kinds of fields, like tags and adresses array fields.

Products list with a filter, pagination and ordered by name 

Product edit screen with a custom tags array field

User edit screen with a custom addresses array field

node-django-admin version 0.0.8

Since this version we are using Twitter Bootstrap in the demo app.

The ref (lookup) and select widgets are basic, but operational, as we can see in the following image.

Release 0.0.6

Release notes

• Socket.io reconnect ok. Moved the for loop that emits subscribe events for the cameras into the connect event. After reconnect this event is fired again.
• Alert box to show client disconnect.
• Fixed a bug in using the '(new Date()).toISOString().substr(0,10)' expression to get the date folder name where the recordings are saved. The time returned did not consider the  timezone.
• Added -y option in ffmpeg command to overwrite output files without asking.

Let's rock the client

The next image shows how the cameras were displayed in the client browser. So annoying, the image of each camera after the previous, all the same size. Without possibility of any sort of customization. Really very annoying!

So, let's start with a little of rock and roll in this project. Let's use tiny drops of jQuery UI to move and resize the camera images the way we want.

For the times they are a-changin. In the next image we can see how the presentation is now. We can freely move and resize each camera image regardless of the other cameras sizes and positions. We may even overlap then.

The coolest thing is that we can do it all with very few new lines of code.

Some relevant parts of the Jade script:

doctype 5
html
  head
    ...
    link(rel='stylesheet', href='http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css')
    script(src='/javascripts/jquery.min.js')
    script(src='/javascripts/jquery-ui.custom.min.js')
    ...
    script
      $(function() {
        $(".draggable").draggable();
        $(".resizable").resizable({
          aspectRatio: 320 / 240
        });        
      });
  body
    #grid
      .linha
        #cam01.camera.draggable
          .image
            img#img01.resizable(src='#', width=320, height=240) 
          .info
        ...