IM-932 : File Metadata Distinction/Template Design

airtime_mvc/application/views/scripts/playouthistory/template-contents.phtml

@@ -9,13 +9,12 @@
     Name
     <input id="template_name" type="text" value="<?php echo $this->template_name; ?>">
   </label>
-</div>
 
-<?php $i = 0; 
+	<?php $i = 0; 
 		$usedFileMD = array();
-?>
+	?>
 	
-<ul class="template_item_list">
+	<ul class="template_item_list">
 	  <?php foreach ($this->template_fields as $field): ?>
 	
 	    <?php if($field["isFileMd"]) {
@@ -27,7 +26,8 @@
 	  	data-name="<?php echo $field["name"]?>"
 	  	data-label="<?php echo $field["label"]?>"
 	  	data-type="<?php echo $field["type"]?>"
-  	data-filemd="<?php echo var_export($field["isFileMd"], true)?>">
+	  	data-filemd="<?php echo var_export($field["isFileMd"], true)?>"
+	  	class="<?php echo ($field["isFileMd"]) ? 'field_filemd' : 'field_other' ?>">
 	    <span><?php echo $field["label"]?></span>
 	    <span><?php echo $field["type"]?></span>
 	    <?php if(!in_array($field["name"], $this->required_fields)): ?>
@@ -39,11 +39,13 @@
 	  <?php $i++; ?>
 	
 	  <?php endforeach; ?>
-</ul>
+	</ul>
+</div>
+<div class="add_more">
 
-<p>Add more elements:</p>
+	<p>Add more elements:</p>
 	
-<ul class="template_file_md">
+	<ul class="template_file_md">
 	  <?php foreach ($this->fileMD as $md): ?>
 	
 	  <?php if(in_array($md["name"], $usedFileMD)) {
@@ -58,7 +60,7 @@
 	  	<a class="field_add" href="#"><i class="icon icon-plus"></i></a>
 	  </li>
 	  <?php endforeach; ?>
-</ul>
+	</ul>
 	
 	  <?php if ($this->template_type !== Application_Service_HistoryService::TEMPLATE_TYPE_FILE): ?>
 	  <div class="template_item_add">
@@ -71,6 +73,7 @@
 	    <button class="btn"><i class="icon-white icon-plus"></i> Add</button>
 	  </div>
 	  <?php endif; ?>
+</div>
 
 <div>
   <?php if (!in_array($this->template_id, $this->configured)): ?>

airtime_mvc/public/css/history_styles.css

@@ -135,3 +135,49 @@
 .bootstrap-datetimepicker-widget thead tr:first-child th:hover {
 	background: #5C5C5C !important;
 }
+
+#configure_item_template {
+	width: 100%;
+	max-width: 620px;
+}
+
+.add_more {
+	float: right;
+}
+
+#configure_item_template #template_name {
+	margin-bottom: 14px;
+}
+
+#configure_item_template .template_item_list li {
+	width: 270px;
+}
+
+#configure_item_template li {
+	width: 270px;
+}
+
+#configure_item_template .template_item_list li.field_other {
+	background-color: #CACACA;
+}
+
+.ui-widget-content {
+	background: #C0C0C0 !important;
+}
+
+#history_content .btn-toolbar {
+	margin: 10px;
+}
+
+#history_content div.DTTT_container {
+	margin-top: 8px;
+}
+
+#history_content .dataTables_length {
+	margin-top: 9px;
+	margin-right: 10px;
+}
+
+.btn [class^="icon-"] {
+	margin-top: 0;
+}

airtime_mvc/public/js/airtime/playouthistory/configuretemplate.js

@@ -18,6 +18,7 @@ var AIRTIME = (function(AIRTIME) {
     		  "data-type='<%= type %>' " +
     		  "data-filemd='<%= filemd %>'" +
     		  "data-label='<%= label %>'" +
+    		  "class='<%= (filemd) ? 'field_filemd' : 'field_other'  %>'" +
     		 ">" +
     			"<span><%= label %></span>" +
     			"<span><%= type %></span>" +
@@ -29,6 +30,7 @@ var AIRTIME = (function(AIRTIME) {
     		  "data-type='<%= type %>' " +
     		  "data-filemd='<%= filemd %>'" +
     		  "data-label='<%= label %>'" +
+    		  "class='<%= (filemd) ? 'field_filemd' : 'field_other'  %>'" +
     		">" +
     			"<span><%= label %></span>" +
     			"<span><%= type %></span>" +