Merge pull request #84 from gordon-cs/rci-input-enhancements

Rci input enhancements

Phoenix/Controllers/RciInputController.cs

@@ -1,5 +1,6 @@
 using System.Collections.Generic;
 using System.Linq;
+using System.Web;
 using System.Web.Mvc;
 
 using Phoenix.Models;
@@ -9,6 +10,7 @@
 using System.Data.Entity.Validation;
 using System;
 using Phoenix.Services;
+using System.Web.UI;
 
 namespace Phoenix.Controllers
 {
@@ -255,5 +257,48 @@ public void SaveRci(RciForm rci)
             return;
         }
 
+        /// <summary>
+        /// If a photo(s) of a damage was uploaded, this method first creates a new Damage entry in db, then saves the image to the server
+        /// For reference, see: http://codepedia.info/upload-image-using-jquery-ajax-asp-net-c-sharp/#jQuery_ajax_call
+        /// </summary>
+        [HttpPost]
+        public void SavePhoto()
+        {
+            try
+            {
+                foreach (string s in Request.Files)
+                {
+                    HttpPostedFileBase photoFile = Request.Files[s];
+                    string rciComponent = photoFile.FileName;
+                    Debug.Write("Filename identified on client: " + rciComponent);
+                    //string fileExtension = photoFile.ContentType;
+                    string fileExtension = ".jpg";
+
+                    Damage newDamage = new Damage();
+                    newDamage.DamageType = "IMAGE";
+                    newDamage.RciComponentID = Convert.ToInt32(rciComponent);
+
+                    db.Damage.Add(newDamage);
+                    db.SaveChanges();
+
+                    var damageId = newDamage.DamageID;
+                    string imageName = "RciComponentId" + rciComponent + "_DamageId" + newDamage.DamageID.ToString(); // Image names of the format: RciComponent324_DamageId23
+                    string imagePath = "\\Content\\Images\\Damages\\" + imageName + fileExtension; // Not sure exactly where we should store them. This path can change
+                    photoFile.SaveAs(Server.MapPath(imagePath));
+
+                    newDamage.DamageImagePath = imagePath;
+                    db.SaveChanges();
+
+                    Response.Write(imagePath);
+                }
+            }
+            catch(Exception e)
+            {
+                Response.Status = "Error saving photo";
+                Debug.Write("Error saving photo to database: " + e.Message);
+            }
+            return;
+        }
+
     }
 }

Phoenix/Scripts/rci-input.js

@@ -36,8 +36,116 @@ function save() {
         }
 
     });
+
+    // Now handle the saving of images
+
+}
+
+// Helpful link: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
+function uploadPhoto() {
+    console.log("reached uploadPhoto");
+    console.log(this.files);
+    window.URL = window.URL || window.webkitURL;
+    let photoList = this.files;
+    let rciComponentId = this.id.slice(10);
+    let fileQuantity = photoList.length;
+    let fileType = /^image\//;
+    let previewArea = $("#img-preview-" + rciComponentId);
+    if (!fileQuantity) {
+        previewArea.innerHTML = "<p>No pictures uploaded</p>";
+    }
+    else {
+        for (let i = 0; i < fileQuantity; i++) {
+            let file = photoList[i];
+    // Make sure the file is a picture
+            if (!fileType.test(file.type)) {
+                console.log(file.type);
+                alert("Oops! Please select an image file of type .jpg or .png.")
+            }
+            else {
+                console.log("Photo" + i + "size: " + file.size);
+                let img = document.createElement("img");
+                img.classList.add("uploaded-img");
+                img.src = window.URL.createObjectURL(file); // I am not entirely sure how this works
+                img.onload = function () {
+                    window.URL.revokeObjectURL(this.src);
+                }
+                img.alt = file.name;
+                let $wrapperDiv = $("<div></div>");
+                $wrapperDiv.append(img)
+                previewArea.append($wrapperDiv);
+                savePhoto(file, rciComponentId);
+
+            }
+        }
+    }
+
+}
+
+function savePhoto(photoFile, fileName) {
+    let formData = new FormData();
+    formData.append('file', photoFile, fileName);
+
+    $.ajax({
+        url: '/RciInput/SavePhoto',
+        data: formData,
+        method: "POST",
+        processData: false,
+        contentType: false,
+        error: function (jqXHR, textStatus, errorThrown) {
+            console.log("Status: " + jqXHR.status);
+            console.log("Response Text: " + jqXHR.responseText);
+            console.log(textStatus);
+            console.log(errorThrown);
+        }
+    });
+}
+
+/****** Modal functions ******/
+
+/*
+ * Open the picture modal
+ */
+function openModal(componentID, slideNum) {
+    $("#modal-" + componentID).show();
+    showSlides(slideNum, "modal-" + componentID);
 }
 
+/*
+ * Close the picture modal
+ */
+function closeModal(modalID) {
+    $("#" + modalID).hide();
+}
+
+/*
+ * Show the slides in the modal
+ */
+var slideIndex = 0;
+// This function increments the slide index (a global variable) by a given value
+function plusSlides(n, modalId) {
+    showSlides(slideIndex += n, modalId);
+}
+// Display the slide, based on the selected image
+function showSlides(slideNumber, modalId) {
+    let slides = $("#" + modalId).find(".img-slide");
+    if (slideNumber >= slides.length)
+    {
+        slideIndex = 0;
+    }
+    else if (slideNumber < 0) {
+        slideIndex = slides.length - 1;
+    }
+    else {
+        slideIndex = slideNumber;
+    }
+    for (var i = 0; i < slides.length; i++) {
+        slides[i].style.display = "none";
+    }
+    slides[slideIndex].style.display = "block";
+}
+
+
 /* Add a div to the right component. This div will contain a :
     <p> element displaying a damage
     <input> hidden element that will be used when submitting the form
@@ -66,7 +174,6 @@ function deleteExistingDamages(event, element, id)
 
 
 
-
 /* Register Handers */
 
 
@@ -78,4 +185,34 @@ $(".adding-damages").on("keypress", function (e) {
         $("#add-" + $(this).attr("id").substring(11)).click();
     }
 });
+// Attach upload photo handler
+$("input[id^='dmg-input'").change(uploadPhoto);
+
+// Attach modal handlers (reference: https://www.w3schools.com/howto/howto_js_lightbox.asp)
+
+// For all the thumbnail areas, attach the modal opener to each of its thumbnail images
+$(".img-thumbnails").each(function (index, element) {
+    let componentID = $(this).attr("id").substring(12);
+    $(this).find(".thumbnail").each(function (index, element) {
+        $(this).click(function () {
+            openModal(componentID, index)
+        });
+    });
+});
+
+$(".material-icons.clear").click(function () {
+    let modalID = $(this).closest(".img-modal").attr("id");
+    console.log(modalID);
+    closeModal(modalID);
+});
+
+$(".forward").click(function () {
+    let modalID = $(this).closest(".img-modal").attr("id");
+    plusSlides(1, modalID);
+});
+$(".backward").click(function () {
+    let modalID = $(this).closest(".img-modal").attr("id");
+    plusSlides(-1, modalID);
+});
+
 

Phoenix/Services/RciInputService.cs

@@ -26,5 +26,6 @@ public string GetUsername(string gordon_id)
             var username = db.Account.Where(u => u.ID_NUM == gordon_id).FirstOrDefault().AD_Username;
             return username;
         }
+
     }
 }

Phoenix/Views/RciCheckout/Index.cshtml

@@ -26,7 +26,7 @@
     {
         <div class="pane component" id="@component.RciComponentID">
             <h2 class="pane-title div-list-toggle">@component.RciComponentName<i class="material-icons">arrow_drop_down</i></h2>
-            <div class="pane-content">
+            <div class="checkout pane-content">
                 <div class="div-list">
                     <div class="div-list-toggle icon-label">
                         <i class="material-icons" aria-hidden="true">arrow_drop_down</i>

Phoenix/Views/RciInput/Index.cshtml

@@ -25,42 +25,68 @@
         <div class="pane component" id="@component.RciComponentID">
             <h2 class="pane-title div-list-toggle">@component.RciComponentName<i class="material-icons">arrow_drop_down</i></h2> 
 
-            <div class="pane-content">
+            <div class="input pane-content">
                 <div class="divAddOn">
                     <label class="file-input-label divAddOn-field" for="dmg-input-@component.RciComponentID">
                         <i class="material-icons">add_a_photo</i>
                         <span>Take picture</span>
                     </label>
-                    <span class="divAddOn-item">0 Picture(s)</span>
+                    @*<span class="divAddOn-item">0 Picture(s)</span>*@
                 </div>
-                <input id="dmg-input-@component.RciComponentID" class="file-input" type="file" accept="image/*;capture=camera">
-                <div>
-                    <p>OR</p>
-                </div>
-                <div>
-                    <p>Describe the Damage:</p>
-                </div>
-                <div class="divAddOn">
-                    <input class="divAddOn-field adding-damages" type="text" placeholder="Damage + Location" id="text-input-@component.RciComponentID"/>
-                    <button class="divAddOn-item" onclick="addDamage(@component.RciComponentID);" id="add-@component.RciComponentID">Add</button>
-                </div>
-                <div class="div-list" id="div-list-@component.RciComponentID">
-                    <div class="div-list-toggle icon-label">
-                        <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
-                        <span>Hide/Show Entered Damages</span>
-                    </div>
+                <input id="dmg-input-@component.RciComponentID" class="file-input" multiple type="file" accept="image/*;capture=camera">
+                <div id="img-preview-@component.RciComponentID" class="img-thumbnails">
                     @foreach (var damage in component.Damage)
                     {
-                        if (damage.DamageDescription != null)
+                        if (damage.DamageType.Equals("IMAGE"))
                         {
-                            <div class="divAddOn">
-                                <p class="divAddOn-field">@damage.DamageDescription</p>
-                                <i class='divAddOn-item material-icons' onclick="deleteExistingDamages(event, this, @damage.DamageID)">delete</i>
-                            </div>
+                           <div><img class="uploaded-img thumbnail" src=@damage.DamageImagePath alt="Damage Image Thumbnail"></div> 
                         }
                     }
                 </div>
-            </div>
+                <div id="modal-@component.RciComponentID" class="img-modal">
+                    <div class="modal-header"><i class="material-icons clear">clear</i></div>
+                    <div class="modal-content">
+                        @foreach (var damage in component.Damage)
+                        {
+                            if (damage.DamageType.Equals("IMAGE"))
+                            {
+                                <div class="img-slide"><img class="uploaded-img" src=@damage.DamageImagePath alt="Damage Image Enlarged"></div>
+                            }
+                        }
+                        <i class="material-icons backward">navigate_before</i>
+                        <i class="material-icons forward">navigate_next</i>
+                    </div>
+                </div>
+                <br/>
+                    <div>
+                        <p>OR</p>
+                    </div>
+                <br/>
+                    <div>
+                        <p>Describe the damage and its location:</p>
+                    </div>
+                    <div class="divAddOn">
+                        <input class="divAddOn-field adding-damages" type="text" placeholder="Damage + Location"
+                               id="text-input-@component.RciComponentID" />
+                        <button class="divAddOn-item" onclick="addDamage(@component.RciComponentID);" id="add-@component.RciComponentID">Add</button>
+                    </div>
+                    <div class="div-list" id="div-list-@component.RciComponentID">
+                        <div class="div-list-toggle icon-label">
+                            <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
+                            <span>Hide/Show Entered Damages</span>
+                        </div>
+                        @foreach (var damage in component.Damage)
+                        {
+                            if (damage.DamageDescription != null)
+                            {
+                                <div class="divAddOn">
+                                    <p class="divAddOn-field">@damage.DamageDescription</p>
+                                    <i class='divAddOn-item material-icons' onclick="deleteExistingDamages(event, this, @damage.DamageID)">delete</i>
+                                </div>
+                            }
+                        }
+                    </div>
+                </div>
         </div>
     }
     <div class="button-group">

Phoenix/Views/Shared/_Layout.cshtml

@@ -8,6 +8,9 @@
     @RenderSection("Styles", required: false)
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7763712/7875172/css/fonts.css">
+    <link href="https://hayageek.github.io/jQuery-Upload-File/4.0.10/uploadfile.css" rel="stylesheet">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://hayageek.github.io/jQuery-Upload-File/4.0.10/jquery.uploadfile.min.js"></script>
 </head>
 <body>
     @Scripts.Render("~/bundles/js/jquery")