edit_contacts.html.erb in flapjack-0.8.5

- old
+ new

@@ -1,14 +1,15 @@
 <%
   require_css 'select2'
+  require_css 'select2-bootstrap'
 
   require_js  'underscore'
   require_js  'jquery-1.10.2'
-  require_js  'select2'
   require_js  'backbone'
   require_js  'backbone.jsonapi'
   require_js  'bootstrap.min'
+  require_js  'select2'
   require_js  'contacts'
 %>
 
 <script type="text/template" id="contact-actions-template">
   <button class="btn btn-success" id="addContact">
@@ -17,30 +18,76 @@
 </script>
 
 <script type="text/template" id="contact-list-item-template">
   <td><@- first_name @></td>
   <td><@- last_name @></td>
-  <td><@- email @></td>
+  <td>
+    <button type="button" class="close button delete delete-contact" aria-hidden="true">&minus;</button>
+  </td>
 </script>
 
-<div id="data-api-url" data-api-url="<%= @api_url %>">
-    <div class="page-header">
-      <h2>Edit Contacts</h2>
+<script type="text/template" id="contact-entities-list-item-template">
+  <td><@- name @></td>
+  <td><button type="button" class="close button delete delete-entity" aria-hidden="true">&minus;</button></td>
+</script>
+
+<script type="text/template" id="contact-media-list-item-template">
+  <td>
+    <@- labels[type] @>
+  </td>
+  <td>
+    <input type="text" data-attr="address" class="form-control" value="<@- address @>">
+  </td>
+  <td>
+    <input type="text" data-attr="interval" class="form-control" value="<@- interval @>">
+  </td>
+  <td>
+    <input type="text" data-attr="rollup_threshold" class="form-control" value="<@- rollup_threshold @>">
+  </td>
+</script>
+
+<script type="text/template" id="contact-template">
+  <div class="form-group">
+    <label class="col-sm-3 control-label" for="contact_first_name">First name</label>
+    <div class="col-sm-9">
+      <input type="text" autofocus="autofocus" name="contact_first_name" class="form-control" value="<@- first_name @>">
     </div>
-    <div id="container">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>First Name</th>
-            <th>Last Name</th>
-            <th>Email</th>
-          </tr>
-        </thead>
-        <tbody id="contactList">
-        </tbody>
-      </table>
+  </div>
+  <div class="form-group">
+    <label class="col-sm-3 control-label" for="contact_last_name">Last name</label>
+    <div class="col-sm-9">
+      <input type="text" name="contact_last_name" class="form-control" value="<@- last_name @>">
+    </div>
+  </div>
+</script>
 
+<script type="text/template" id="contact-entity-chooser">
+  <input type="hidden" id="entityChooser" style="width: 440px">
+  <button id="add-contact-entity" type="button" class="btn btn-default btn-xs">
+    <i class="fa fa-plus-square"></i>
+    &nbsp;
+    Add Entities
+  </button>
+</script>
+
+<div id="data-api-url" data-api-url="<%= @api_url %>">
+  <div class="page-header">
+    <h2>Edit Contacts</h2>
+  </div>
+  <div id="container">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>&nbsp;</th>
+        </tr>
+      </thead>
+      <tbody id="contactList">
+      </tbody>
+    </table>
+
 <!-- Modal -->
 <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
@@ -48,33 +95,42 @@
         <h4 class="modal-title" id="contactModalLabel">New Contact</h4>
       </div>
       <div class="modal-body">
 
         <form action="/contacts" method="post" role="form" class="form-horizontal">
-          <div class="form-group">
-            <label class="col-sm-3 control-label" for="contact_first_name">First name</label>
-            <div class="col-sm-9">
-              <input type="text" name="contact_first_name" class="form-control" value="">
-            </div>
+
+          <div class="modal-footer">
+            <button type="button" class="btn btn-success" id="contactAccept">Create Contact</button>
           </div>
-          <div class="form-group">
-            <label class="col-sm-3 control-label" for="contact_last_name">Last name</label>
-            <div class="col-sm-9">
-              <input type="text" name="contact_last_name" class="form-control" value="">
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="col-sm-3 control-label" for="contact_email">Email</label>
-            <div class="col-sm-9">
-              <input type="text" name="contact_email" class="form-control" value="">
-            </div>
-          </div>
         </form><!-- form-horizontal-->
 
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-success">Create Contact</button>
+        <table class="table">
+          <thead>
+            <tr>
+              <th style="width: 15%">Media</th>
+              <th style="width: 65%">Address</th>
+              <th style="width: 10%">Interval</th>
+              <th style="width: 10%">Rollup</th>
+            </tr>
+          </thead>
+          <tbody id="contactMediaList">
+          </tbody>
+        </table>
+
+        <div id="entityAdd">
+        </div>
+
+        <table class="table" style="margin-top: 1em">
+          <thead>
+            <tr>
+              <th>Entities</th>
+              <th>&nbsp;</th>
+            </tr>
+          </thead>
+          <tbody id="contactEntityList">
+          </tbody>
+        </table>
+
       </div>
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
 