REST Demo API "Batch Job Management"

Working with the test request handler ( http://bsp.mits.ch/buch/job )

by goldfingerxyz

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<h1>Manage jobs</h1>
<div id="msg"></div>
<fieldset id="jobdata">
    <label for="ID">ID</label>
    <input id="ID" disabled>
    <br>
    <label for="REPID">Report</label>
    <input id="REPID">
    <br>    
    <label for="VARID">Variant</label>
    <select id="VARID"></select>
    <br>    
    <label for="PRIO">Priority</label>
    <select id="PRIO">
        <option value="1">High</option>
        <option value="2">Medium</option>
        <option value="3">Low</option>
    </select>
    <br>    
    <label for="RESTART">Restartable</label>
    <input type="checkbox" id="RESTART">
    <br>    
    <label for="DESCR">Description</label>
    <input id="DESCR">
    <br>    
    <label for="CONTACT">Responsible</label>
    <input id="CONTACT">
</fieldset>

<div id="buttonArea">    
    <button id="save">Save</button>
    <button id="new">New Job</button>
    <button id="copy">Copy</button>
    <button id="delete">Delete</button>
    <button id="reset">Reset Database</button>
</div>

<table id="result"></table>

CSS

body {
  font: 80%/1.45em "Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  }

#msg {
  font-weight:bold;
  margin-bottom:5px;  
  }

#msg.E { color:red; }
#msg.W { color:orange; }
#msg.I, #msg.S { color:blue; }

#result {
    margin-top:2.5em;
    } 

#reset {
    font-style:oblique;
    }

#result td { 
    padding:3px 10px; 
    }

table#result tr.even.row_selected td {
    background-color: #B0BED9;
}
table#result tr.odd.row_selected td {
    background-color: #9FAFD1;
}

#buttonArea {
    margin:1em;
    }

fieldset#jobdata {
    background: #f7f7f7; 
    font: normal 11px sans-serif; 
    width: 550px; 
    border: none; 
    padding: 5px;
    }

legend {
    font-style: italic;
    }

#jobdata label {
    background: #cecece;
    display:inline-block;    
    width: 20%; 
    font-weight: bold; 
    text-align: right; 
    border-bottom: 0.2em solid #cecece; 
    line-height: 30px; padding-right: 2px; 
    border-bottom: 2px solid #f7f7f7;
    }

#jobdata input, #jobdata select {
    width: 70%; 
    line-height: 20px;
    }

#jobdata #RESTART {
    width:0px;
    }

JavaScript

// Using a REST demo API "Job management"
// - Use the HTTP methods PUT, POST, DELETE, GET for specifying the operation
// - item id as part of URL makes URL a representation of a server side item
// - "Accept:application/json" header field: requests JSON for data transport
// - Additionally shows how to use cross domain requests

// The "global players" : 

var jobs, server,            // Model parts (client and stub for server)
    controller,              // Controller
    events,                  // A tiny event registration service
    table, inputArea, msg    // View parts
    ; 

// --- A representation of the job data on client side 
jobs = {
  JOBS:{},
  get:function(id) {
    return id ? this.JOBS[id] : this.JOBS;
    },
  getLength:function(jobData) {
    var length = 0;  
    $.each( jobData || this.JOBS, function() { length++ } );
    return length;
    },
  getFirstID:function(jobData) {  
    for (var id in (jobData || this.JOBS)) {
      return id;
      }
    },
  update: function(jobData) {
    var self = this, update = false;
    $.each( jobData, function(id,job) {
      if (id) self.JOBS[id] = job;
      update = true;
      });
    if (update) events.raise( "update", jobData );  
    },
  replace:function(jobData) {
    this.JOBS = jobData;
    events.raise("replace", jobData);
    },
  deleteSingle:function(id) {
    delete this.JOBS[id];
    events.raise( "deleteSingle", id );
    },
  fields: {
    REPID:   "Report",
    VARID:   "Variant",
    PRIO:    "Prio",
    RESTART: "Restart",
    DESCR:   "Description",
    CONTACT: "Contact"
    }
  };

// --- The area containing the input fields
inputArea = {    
    fillFromJob:function(id,job) {
      $.each( jobs.fields, function(name) {
        if (name == "RESTART")
          $("#RESTART").prop("checked",job.RESTART == "X");  
        else
          $("#"+name).val( job[name] );
        });
      $("#ID").val(id);
      },        
    fillVariants:function(variants,selected) {
      var...