Made progress handling adding attachments to templates

static/js/app/partials/modals/templateModal.html

@@ -31,7 +31,7 @@
         </tab>
     </tabset>
     <br />
-    <label class="control-label" ng-hide="template.attachments.length == 0">Files:</label>
+    <label class="control-label">Files:</label>
     <div ng-repeat="file in template.attachments" ng-model="template.attachments">
         <i class="fa fa-file-excel-o" ng-show="file.type == 'application/vnd.ms-excel'"></i>
         <i class="fa fa-file-text-o" ng-show="file.type == 'text/plain'"></i>
@@ -47,7 +47,7 @@
     </div>
     <br/>
     <span class="btn btn-danger btn-file"><i class="fa fa-plus"></i> Add Files
-        <input type="file" ng-file-select="onFileSelect($files)" multiple>
+        <input type="file" onchange="attach(this.files)" multiple>
     </span>
 </div>
 <div class="modal-footer">

static/js/app/templates.js

@@ -1,23 +1,26 @@
-// Save attempts to POST to /groups/
+var template = {attachments:[]}
+var icons = {
+    "application/vnd.ms-excel" : "fa-file-excel-o",
+    "text/plain" : "fa-file-text-o",
+    "image/gif" : "fa-file-image-o",
+    "image/png" : "fa-file-image-o",
+    "application/pdf" : "fa-file-pdf-o",
+    "application/x-zip-compressed" : "fa-file-archive-o",
+    "application/x-gzip" : "fa-file-archive-o",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation" : "fa-file-powerpoint-o",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document" : "fa-file-word-o",
+    "application/octet-stream" : "fa-file-o",
+    "application/x-msdownload" : "fa-file-o"
+}
+
+// Save attempts to POST to /templates/
 function save(){
-    var targets = []
-    $.each($("#targetsTable").DataTable().rows().data(), function(i, target){
-        targets.push({
-            first_name : target[0],
-            last_name: target[1],
-            email: target[2],
-            position: target[3]
-        })
-    })
-    var group = {
-        name: $("#name").val(),
-        targets: targets
-    }
-    console.log(group)
-    // Submit the group
-    api.groups.post(group)
+    template.name = $("#name").val()
+    console.log(template)
+    // Submit the template
+    api.templates.post(template)
     .success(function(data){
-        successFlash("Group added successfully!")
+        successFlash("Template added successfully!")
         load()
         dismiss()
     })
@@ -30,36 +33,36 @@ function save(){
 function dismiss(){
     $("#modal\\.flashes").empty()
     $("#modal").modal('hide')
+    template = {attachments:[]}
 }
 
-function edit(group){
+function attach(files){
+    $.each(files, function(i, file){
+        var reader = new FileReader();
+        /* Make this a datatable */
+        reader.onload = function(e){
+            // Add the attachment
+            template.attachments.push({
+                name: file.name,
+                content: reader.result.split(",")[1],
+                type: file.type || "application/octet-stream"
+            })
+            var icon = icons[file.type] || "fa-file-o"
+            // Add the record to the modal
+            $("#attachments").append('<i class="fa ' + icon + '"></i>&nbsp;' + file.name + '<span class="remove-row"><i class="fa fa-trash-o"></i></span><br/>');
+        }
+        reader.onerror = function(e) {
+            console.log(e)
+        }
+        reader.readAsDataURL(file)
+    })
+}
+
+function edit(t){
     $("#html_editor").ckeditor()
-    if (group == "new") {
-        group = {}
+    if (t == "new") {
+        template = {attachments:[]}
     }
-    targets = $("#targetsTable").dataTable()
-    // Handle Addition
-    $("#targetForm").submit(function(){
-        targets.DataTable()
-        .row.add([
-            $("#firstName").val(),
-            $("#lastName").val(),
-            $("#email").val(),
-            $("#position").val(),
-            '<span style="cursor:pointer;"><i class="fa fa-trash-o"></i></span>'
-        ])
-        .draw()
-        $("#targetForm>div>input").val('')
-        $("#firstName").focus()
-        return false
-    })
-    // Handle Deletion
-    $("#targetsTable").on("click", "span>i.fa-trash-o", function(){
-        targets.DataTable()
-        .row( $(this).parents('tr') )
-        .remove()
-        .draw();
-    })
 }
 
 function load(){

templates/templates.html

@@ -98,7 +98,7 @@
             </div>
             <!-- Nav tabs -->
             <ul class="nav nav-tabs" role="tablist">
-                <li role="text"><a href="#text" aria-controls="text" role="tab" data-toggle="tab">Text</a></li>
+                <li class="active" role="text"><a href="#text" aria-controls="text" role="tab" data-toggle="tab">Text</a></li>
                 <li role="html"><a href="#html" aria-controls="html" role="tab" data-toggle="tab">HTML</a></li>
             </ul>
             <!-- Tab panes -->
@@ -111,27 +111,15 @@
                 </div>
             </div>
             <br />
-            <label class="control-label" ng-hide="template.attachments.length == 0">Files:</label>
-            <div ng-repeat="file in template.attachments" ng-model="template.attachments">
-                <i class="fa fa-file-excel-o" ng-show="file.type == 'application/vnd.ms-excel'"></i>
-                <i class="fa fa-file-text-o" ng-show="file.type == 'text/plain'"></i>
-                <i class="fa fa-file-image-o" ng-show="file.type == 'image/gif'"></i>
-                <i class="fa fa-file-pdf-o" ng-show="file.type == 'application/pdf'"></i>
-                <i class="fa fa-file-archive-o" ng-show="file.type == 'application/x-zip-compressed' || file.type == 'application/x-gzip'"></i>
-                <i class="fa fa-file-powerpoint-o" ng-show="file.type == 'application/vnd.openxmlformats-officedocument.presentationml.presentation'"></i>
-                <i class="fa fa-file-word-o" ng-show="file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"></i>
-                <i class="fa fa-file-o" ng-show="file.type == 'application/octet-stream' || file.type == 'application/x-msdownload'"></i>
-                &nbsp;file.name
-                <span onclick="removeFile(file)" class="remove-row"><i class="fa fa-trash-o"></i>
-                </span>
-            </div>
+            <label class="control-label">Files:</label>
+            <div id="attachments"></div>
             <br/>
             <span class="btn btn-danger btn-file"><i class="fa fa-plus"></i> Add Files
-                <input type="file" multiple>
+                <input type="file" onchange="attach(this.files)" multiple>
             </span>
         </div>
         <div class="modal-footer">
-            <button type="button" class="btn btn-default" onclick="cancel()">Cancel</button>
+            <button type="button" class="btn btn-default" onclick="dismiss()">Cancel</button>
             <button type="button" class="btn btn-primary" onclick="save()" data-dismiss="modal">Save Template</button>
         </div>
     </div>