edgware/edgware/static/js/files/browse.js

$(function() {
//  alert("hi");

  var selectHTML = $('#id_category').html();
  $('#moveSelectedSelect').html(selectHTML);

  $('#filterForm').submit(function(e) {
    e.preventDefault();
    var formData = $(this).serializeArray();
    $('#submitFilter').val("Loading...").attr("disabled", "disabled");
    $('#previewPane').empty();
    $.post("files/json_list", formData, function(data) {
      $('#submitFilter').val("Submit").removeAttr("disabled");
//      MAAKICHUT = response;
      var files = data.files;
//      console.log(files);
      $('#fileList').empty();
      $('#noOfPages').text(data.noOfPages);
      $('#noOfResults').text(data.noOfResults);
      $('#currentPageNo').text($('#page_no').val());
      for (var i=0; i<files.length; i++) {
//        console.log(files[i]);
        var $file = getJQ(files[i]);
        $('#fileList').append($file);
      }
    }, "json");
  });

  $('#prevBtn').click(function() {
    var $page_no = $('#page_no');
    var currPage = parseInt($page_no.val());
    if (currPage > 1) {
      $page_no.val(currPage - 1);
      $('#filterForm').submit();
    }
  });

  $('#nextBtn').click(function() {
    var $page_no = $('#page_no');
    var currPage = parseInt($page_no.val());
    $page_no.val(currPage + 1);
    $('#filterForm').submit();
  });

  $('#deleteSelectedBtn').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.attr("disabled", "disabled");
    var ids = getSelectedIds();
    var url = "/files/deleteFiles/";
    var params = {'ids': JSON.stringify(ids)};
    $.post(url, params, function(response) {
      $this.removeAttr("disabled");
      $('#filterForm').submit();
    });
  });

  $('#moveSelectedBtn').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.attr("disabled", "disabled");
    var ids = getSelectedIds();
    var url = "/files/moveFiles/";
    var study_id = $('#moveSelectedSelect').val();
    var params = {
      'ids': JSON.stringify(ids),
      'study': study_id
    }

    $.post(url, params, function(response) {
      $this.removeAttr("disabled");
      $('#filterForm').submit();
    }, "json");

  });

  $(window).resize(function() {
    var minuser = 400;
    var winHeight = $(window).height();
    var listHeight = winHeight - minuser;
    $('#fileList').css("height", listHeight + "px");
  });

  $(window).resize();
});

function getJQ(f) {
  var jq = getListElement(f);
//  var jq = $("<div />").data("data", f).addClass("fileItem").text(f.type + ": " + f.title);
  jq.click(function() {
    var $this = $(this);
    $('.selectedItem').removeClass("selectedItem");
    $this.addClass("selectedItem");
    var d = $this.data("data");
    var $pane = $('<div />').addClass("previewPane");
    var $previewObj = $('<div />').addClass("previewObject").appendTo($pane);
    var html = '';
    switch (d.type) {
      case "image":
        html += "<img width='400' src='" + d.thumbnail + "' />";
        break;
      case "video":
        html += "<video controls='controls' width='400' src='" + d.url + "' />";
        break;
      case "audio":
        html += "<audio controls='controls' width='400' src='" + d.url + "' />";
        break;
      default:
        html += "";
        break;    
    };
    html += "<br />";
    html += "<a href='" + d.url + "' target='_blank'>View Original</a>"; 
    $previewObj.html(html);
    $itemForm = getItemForm(f);
    $itemForm.appendTo($pane);
    $('#previewPane').empty();
    $('#previewPane').append($pane);
  });
  return jq;
}

function getItemForm(f) {
  var $form = $('<div />').addClass("itemForm");
  var $titleP = $('<p />').appendTo($form);
  var $titleLabel = $('<span />').addClass("itemFormLabel").text("Title: ").appendTo($titleP);
  var $titleInput = $('<input />').addClass("itemTitle").val(f.title).appendTo($titleP);
  var $descriptionP = $('<p />').appendTo($form);
  var $descriptionLabel = $('<span />').addClass("itemFormLabel").text("Description: ").appendTo($descriptionP);
  var $descriptionInput = $('<textarea />').addClass("itemDescription").val(f.description).appendTo($descriptionP);
  var $hiddenInput = $('<input />').addClass("itemId").attr("type", "hidden").val(f.id).appendTo($descriptionP);
  var $submitP = $('<p />').appendTo($form);
  var $submit = $('<input />').addClass("submitItem").attr("type", "submit").val("Submit").appendTo($submitP);
  var $submitStatus = $('<span />').addClass("submitStatus").appendTo($submitP);
  $submit.click(function(e) {
    var url = "/files/editFile/";
    var parent = $(this).parents('.itemForm');
    $('.submitStatus').text("Submitting...");
    $('.submitItem').attr("disabled", "disabled");
    var params = {
      'id': parent.find('.itemId').val(),
      'title': parent.find('.itemTitle').val(),
      'description': parent.find('.itemDescription').val()
    }
    $.post(url, params, function(response) {
      $('.submitStatus').text('Saved');
      $('.submitItem').removeAttr("disabled");
    }, "json");
  });
  return $form; 
}

function getListElement(f) {
//  console.log(f);
  var $item = $('<div />').addClass("fileItem").data("data", f);
  var $checkbox = $('<input />').attr("type", "checkbox").addClass("fileCheckbox").appendTo($item);
  var $icon = $('<img />').addClass("fileIcon").attr("src", "/static/images/icons2/" + f.type.toLowerCase() + ".jpg").appendTo($item); 
  var $study = $('<span />').addClass("fileStudy").text(f.studies[0].name + ": ").appendTo($item);
  var $title = $('<span />').addClass("fileTitle").text(f.title).appendTo($item);  
  return $item;
}

function getSelectedIds() {
  var ids = [];
  $('.fileItem').each(function() {
    var $this = $(this);
    var checked = $this.find(".fileCheckbox").is(":checked");
    if (checked) {
      var id = $this.data("data").id;
      ids.push(id);
    }
  });
  return ids;
}