Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @using System.Web.Mvc.Html
- @using Worx24Ticketing;
- @using System.Text.RegularExpressions;
- @using System.Web.Helpers;
- @model Ticket
- @{
- ViewBag.Title = "New Ticket";
- Layout = "~/Views/Shared/_Layout.cshtml";
- }
- <h2 style="float: left; width: 360px;">
- <a href="@Url.Action("index", "ticketing")">
- <img style="width: 80px; padding-right: 20px;"
- src="../../Content/Images/icon_ticket.png" /></a>Modify Ticket
- </h2>
- <div id="savingWrapper" style="line-height: 4em; float: left; padding-left: 50px;">
- <span style="display: none; font-size: 17px;" id="saving">
- <img src="~/Content/Images/loading.gif" />
- Saving ...</span>
- </div>
- <div class="clear"></div>
- <span id="priorityContainer" style="padding-left: 15px; font-size: 12px; font-weight: bold;">Priority</span>
- <span id="updateDetails" style="padding-left: 15px;"></span>
- <br />
- <br />
- <div class="clear"></div>
- <div id="scheduleService">
- <a href="#myModal" role="button" style="float: left; margin-bottom: 15px; color: white; margin-left: 15px; text-decoration: none;" class="btn btn-danger" data-toggle="modal">Schedule Service</a>
- <a onclick="return confirm('This action is irreversible, are you sure you want to close this ticket?')" style="margin-bottom: 15px; color: white; margin-left: 15px; text-decoration: none;" href="@Url.Action("closeticket", "ticketing", new { id = Model.TicketId })" class="btn btn-danger">Close Ticket</a>
- </div>
- <div class="buttonContainer">
- <div class="btn-group" style="float: left; text-decoration: none;">
- <a class="btn btn-danger dropdown-toggle" style="text-decoration: none; color: #ffffff" data-toggle="dropdown" href="#">Priority
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#" id="highPriority" onclick="setTicketPriority(3)" style="font-weight: bold; color: red">High</a></li>
- <li><a href="#" id="mediumPriority" onclick="setTicketPriority(2)" style="font-weight: bold; color: orange">Medium</a></li>
- <li><a href="#" id="lowPriority" onclick="setTicketPriority(1)" style="font-weight: bold; color: green">Low</a></li>
- <li class="divider"></li>
- <li><a href="#" id="noPriority" onclick="setTicketPriority(0)" style="font-weight: bold; color: black">None</a></li>
- </ul>
- </div>
- </div>
- <div class="buttonContainer">
- <div class="btn-group" style="float: left;">
- <a class="btn btn-danger dropdown-toggle" style="text-decoration: none; color: #ffffff" data-toggle="dropdown" href="#">E-Mail Customer
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu">
- @{
- var pattern = @"([a-zA-Z0-9_\-])([a-zA-Z0-9_\-\.]*)@(\[((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}|((([a-zA-Z0-9\-]+)\.)+))([a-zA-Z]{2,}|(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\])";
- var PrimaryContactEmail = Regex.Match(@Model.PrimaryContact, pattern);
- var mailtoFormatter = String.Empty;
- var multipleContacts = Regex.Matches(Model.PrimaryContact, pattern);
- if (multipleContacts != null)
- {
- var mailtoString = String.Empty;
- foreach (var match in multipleContacts)
- {
- mailtoString += match + ";";
- }
- mailtoFormatter = String.Format("mailto:{0}?subject={1}&body={2}", mailtoString, "Test", "Test");
- }
- }
- <li><a href="@mailtoFormatter">Service Scheduled</a></li>
- <li><a href="@mailtoFormatter">Ticket Assigned</a></li>
- <li><a href="@mailtoFormatter">Ticket Complete</a></li>
- </ul>
- </div>
- </div>
- <div class="clear"></div>
- @using (Html.BeginForm("modifyticket", "ticketing", FormMethod.Post, new { id = "modifyTicket" }))
- {
- @Html.HiddenFor(model => model.TicketId)
- @Html.HiddenFor(model => model.CreatedDate)
- @Html.HiddenFor(model => model.CreatedBy)
- @Html.HiddenFor(model => model.SalesEmpId)
- @Html.HiddenFor(model => model.LocationId)
- @Html.HiddenFor(model => model.IsComplete)
- @Html.HiddenFor(model => model.LastUpdate)
- @Html.HiddenFor(model => model.LastUpdate)
- @Html.HiddenFor(model => model.CompletedDate)
- @Html.HiddenFor(model => model.Priority)
- <div id="newTicketWrapper">
- <table class="newTicket">
- <tbody>
- <tr>
- <td class="newticketHeading">
- @Html.Label("Ticket Type:")
- </td>
- <td class="newticketInputs">
- @Html.DropDownListFor(model => model.TicketTypeId, (IEnumerable<SelectListItem>)ViewBag.TicketTypes)
- @Html.ValidationMessageFor(model => model.TicketTypeId)
- </td>
- </tr>
- <tr>
- <td class="newticketHeading">
- @Html.Label("Company:")
- </td>
- <td class="newticketInputs">
- @Html.TextBox("ClientName", null, new { placeholder = "Select a company..." })
- @Html.HiddenFor(model => model.ClientId)
- <br />
- @Html.ValidationMessage("ClientName", "Please specify a company for this ticket.")
- </td>
- </tr>
- <tr>
- <td class="newticketHeading">
- @Html.Label("Location(s):")
- <label for="AllLocations" style="font-size: 9px; display: block;">
- Type "all" for all locations</label>
- </td>
- <td class="newticketInputs">
- @Html.HiddenFor(model => model.LocationId)
- @Html.TextBox("LocationName", "", new { placeholder = "Select a location from the dropdown.", style = "width: 280px !important;", @class = "LocationName required" })
- <button href="#newAffected" role="button" style="float: right; height: 38px; text-decoration: none;" class="btn" data-toggle="modal">+</button>
- <div id="affectedLocWrapper"></div>
- <br />
- @Html.ValidationMessageFor(model => model.LocationId)
- </td>
- </tr>
- <tr>
- <td class="newticketHeading">
- @Html.Label("Service / Unit Type:")
- </td>
- <td class="newticketInputs">
- @Html.DropDownListFor(model => model.UnitTypeId, (IEnumerable<SelectListItem>)ViewBag.UnitTypes)
- <br />
- @Html.ValidationMessageFor(model => model.UnitTypeId)
- </td>
- </tr>
- <tr>
- <td class="newticketHeading">
- @Html.Label("Summary:")
- </td>
- <td class="newticketInputs">
- @Html.TextBoxFor(model => model.Title, new { placeholder = "Short summary of the problem..." })
- <br />
- @Html.ValidationMessageFor(model => model.Title)
- </td>
- </tr>
- <tr>
- <td class="newticketHeading">
- @Html.Label("Client Contact:")
- </td>
- <td class="newticketInputs">
- @Html.TextAreaFor(model => model.PrimaryContact)
- @* I think its something like this, because remember these objects will be injected into the dom upon a click.*@
- <br />
- @Html.ValidationMessageFor(model => model.PrimaryContact)
- </td>
- </tr>
- <tr>
- <td class="newticketHeading">
- @Html.Label("CSR:")
- </td>
- <td class="newticketInputs">
- @Html.TextBox("CSR", "", new { disabled = "true", placeholder = "Name of CSR" })
- @Html.HiddenFor(model => model.CsrEmpId)
- <br />
- @Html.ValidationMessageFor(model => model.CsrEmpId)
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div id="rightContainer">
- <table class="newTicketAdditional">
- <tbody>
- <tr>
- <td class="newticketHeadingAlt" style="text-align: left">
- @Html.Label("Description:")
- </td>
- <td class="newticketInputs">
- @Html.TextAreaFor(model => model.Description, new { placeholder = "Description of the problem..." })
- <br />
- @Html.ValidationMessageFor(model => model.Description)
- </td>
- </tr>
- <tr>
- <td class="newticketHeading">
- @Html.Label("Assigned To:")
- </td>
- <td class="newticketInputs">
- @Html.DropDownListFor(model => model.AssignedTo, Util.TicketAssignees(), "Unassigned - Queue")
- </td>
- </tr>
- <tr>
- <td class="newticketHeading" style="width: 100px">
- @Html.Label("Ticket Status:")
- </td>
- <td class="newticketInputs" style="width: 160px;">
- @Html.DropDownListFor(model => model.TicketStateId, (IEnumerable<SelectListItem>)ViewBag.TicketStates)
- <br />
- @Html.ValidationMessageFor(model => model.TicketStateId)
- </td>
- </tr>
- <tr>
- <td class="newticketHeading">@Html.Label("Attachments:")</td>
- <td style="vertical-align: middle;" class="newticketInputs">
- <div id="file-uploader" style="float: left; clear: both;">
- <noscript>
- <p>
- Please enable JavaScript to use file uploader.
- </p>
- <!-- or put a simple form for upload here -->
- </noscript>
- </div>
- <a id="viewAttachments" href="#ticketAttachments" role="button" style="float: left; margin-bottom: 15px; color: white; margin-left: 15px; text-decoration: none;" class="btn btn-danger" data-toggle="modal">View All</a>
- <div id="uploader1Preview" style="margin-top: 10px; width: 300px;">
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- <h4>Notifications</h4>
- <p>Send email notifications to the below recipients on ticket creation, updates or changes. <span style="color: red;">NOTE: Notification of new tickets will automatically be sent to Support.</span></p>
- <table class="newTicketAdditional">
- <tbody>
- <tr>
- <td class="newticketHeadingAlt">
- @Html.Label("Recipients:")
- </td>
- <td class="newticketInputs">
- @Html.TextBoxFor(model => model.NotifyList, new { @class = "tags", value = "Email Address", style = "" })
- <br />
- @Html.ValidationMessageFor(model => model.NotifyList)
- </td>
- </tr>
- </tbody>
- </table>
- <br />
- <div id="ccSales">
- <label class="checkbox">
- <input id="ccSalesmen" name="ccSalesmen" type="checkbox">
- Notify Salesmen? If so, which?
- </label>
- <br />
- @Html.DropDownList("salesmenDd", Util.SalesmenOfClient(Model.ClientId), "-- Select --")
- </div>
- </div>
- }
- <div class="clear"></div>
- <br />
- <div id="serviceDates">
- <h2>Scheduled Service Details</h2>
- <div id="ajaxUpdateWrapper-services">
- </div>
- </div>
- <div id="notesWrapper">
- <h2>Comments</h2>
- @using (Html.BeginForm(string.Empty, string.Empty, FormMethod.Post, new { id = "newCommentFrm" }))
- {
- <div id="commentLocation" style="display: none;">
- @Util.AffectedLocationsDropdown(Model.TicketId)
- </div>
- @Html.HiddenFor(model => model.TicketId)
- @Html.HiddenFor(model => model.LocationId)
- @Html.TextAreaFor(model => model.NewComment.Body, new { @class = "mddeditor", style = "width: 98%; height: 145px;" })
- @Html.ValidationMessageFor(model => model.NewComment.Body)
- <br />
- <br />
- <input type="submit" id="newCommentBtn" class="btn btn-primary" aria-hidden="true" value="Post Comment" />
- }
- </div>
- @using (Html.BeginForm(string.Empty, string.Empty, FormMethod.Post, new { id = "newServiceFrm" }))
- {
- <div style="display: none; width: 675px;" class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3 id="myModalLabel">Schedule Service</h3>
- </div>
- <div class="modal-body">
- <div id="serviceAlert" style="display: none;" class="alert alert-success">
- <button type="button" class="close" data-dismiss="alert">×</button>
- <div id="newServiceDateResults">
- </div>
- </div>
- <table class="newTicketAdditional" style="width: auto;">
- <tbody>
- <tr>
- @Html.HiddenFor(model => model.TicketId)
- <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
- @Html.Label("Service Date:")
- </td>
- <td class="newticketInputs">
- @Html.TextBoxFor(model => model.TicketAppointment.InstallDate, new { @class = "datepicker required", style = "width: 250px;" })
- @Html.ValidationMessageFor(model => model.TicketAppointment.InstallDate)
- </td>
- </tr>
- <tr>
- <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
- @Html.Label("Company:")
- </td>
- <td class="newticketInputs">
- @Html.TextBoxFor(model => model.TicketAppointment.Installer, new { @style = "width: 250px;", @class = "required" })
- @Html.ValidationMessageFor(model => model.TicketAppointment.Installer)
- </td>
- </tr>
- <tr>
- <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
- @Html.Label("Installer Contact:")
- </td>
- <td class="newticketInputs">
- @Html.TextBoxFor(model => model.TicketAppointment.InstallerContactInfo, new { @style = "width: 450px;", @class = "required" })
- @Html.ValidationMessageFor(model => model.TicketAppointment.InstallerContactInfo)
- </td>
- </tr>
- <tr>
- <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
- @Html.Label("Notes:")
- </td>
- <td class="newticketInputs">
- @Html.TextAreaFor(model => model.TicketAppointment.InstallNotes, new { @style = "width: 450px;", @class = "required" })
- @Html.ValidationMessageFor(model => model.TicketAppointment.InstallNotes)
- </td>
- </tr>
- <tr id="inventoryWrapper">
- <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
- @Html.Label("Units Required:")
- <br />
- @Html.Label("Units Shipped:")
- </td>
- <td class="newticketInputs">
- @Html.TextBoxFor(model => model.TicketAppointment.UnitsRequired, new { @style = "width: 60px;", placeholder = "amount", @class = "required" })@Html.ValidationMessageFor(model => model.TicketAppointment.UnitsRequired)
- <br />
- @Html.TextBoxFor(model => model.TicketAppointment.UnitsShipped, new { @style = "width: 60px;", placeholder = "amount", @class = "required" })@Html.ValidationMessageFor(model => model.TicketAppointment.UnitsShipped)
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="modal-footer">
- <input type="submit" id="newServiceDate" class="btn btn-primary" aria-hidden="true" value="Create" />
- <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
- </div>
- </div>
- }
- @using (Html.BeginForm(string.Empty, string.Empty, FormMethod.Post, new { id = "newAffectedLocationFrm" }))
- {
- <div style="display: none; width: 675px;" class="modal fade in" id="newAffected" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3 id="myModalLabel3">Schedule Service</h3>
- </div>
- <div class="modal-body">
- <table class="newTicketAdditional" style="width: auto;">
- <tbody>
- <tr>
- @Html.HiddenFor(model => model.TicketId)
- <td class="newticketHeadingAlt" style="width: 150px; text-align: left;">
- @Html.Label("Location Name:")
- </td>
- <td class="newticketInputs">
- @Html.TextBoxFor(model => model.AffectedLocation.Name, new { @class = "LocationName1 required", style = "width: 250px;" })
- @Html.HiddenFor(model => model.AffectedLocation.LocationId)
- @Html.ValidationMessageFor(model => model.AffectedLocation.Name)
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="modal-footer">
- <input type="submit" id="newAffectedSubmit" class="btn btn-primary" aria-hidden="true" value="Add" />
- <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
- </div>
- </div>
- <div style="display: none; width: 675px;" class="modal fade in" id="ticketAttachments" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3 id="myModalLabel1">Ticket Attachments</h3>
- </div>
- <div id="ticketAttachmentContainer" class="modal-body">
- @Html.Action("getticketattachments", "ticketing", new { id = @Model.TicketId })
- </div>
- <div class="modal-footer">
- <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
- </div>
- </div>
- @section Scripts
- {
- @Scripts.Render("~/bundles/jqueryval")
- <script src="~/Scripts/moment.js"></script>
- <script src="~/Scripts/jquery.wmd.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- // Ajax polling call to check if there are multiple affected locations to this ticket.
- // if so we will create a dropdown above the comment box that will require the assigned person
- // to specify which location this comment applies to, otherwise they can select "all" for a general response.
- CheckTicketAffectedLocations(@Model.TicketId);
- // Stackoverflow markdown editor. MIT Licensed!
- $(".mddeditor").wmd({
- "preview": true,
- "helpHoverTitle": "Markdown Help",
- });
- $('#newCommentFrm').submit(function(e) {
- e.preventDefault();
- var $form = $(this);
- // check if the input is valid
- if (!$form.valid()) return false;
- $.ajax({
- type: 'POST',
- url: "/comment/NewComment",
- data: $form.serialize(),
- success: function(response) {
- $("#newCommentFrm textarea").val('');
- }
- });
- });
- // Client AutoComplete based on entered text.
- $("#ClientName").autocomplete({
- source: function(request, response) {
- $.ajax({
- url: "/AutoComplete/ClientName",
- type: "POST",
- dataType: "json",
- data: "{ 'data': '" + request.term + "' }",
- contentType: "application/json; charset=utf-8",
- success: function(data) {
- response($.map(data, function(item) {
- return {
- value: item.ClientId,
- label: item.Name
- };
- }));
- }
- });
- },
- minLength: 3,
- delay: 5,
- select: function(event, ui) {
- displayItem("ClientId", "ClientName", ui.item);
- // Populate CSR for Client when a clientId is in our "ClientID" Hidden Field -
- // This implies that a company has been selected and would be valid for us to
- // grab CSR at this point. Will be a jQuery onChange event.
- $.ajax({
- url: "/AutoComplete/ClientsCSR",
- type: "GET",
- data: { clientId: ui.item.value },
- contentType: "application/json; charset=utf-8",
- success: function(data) {
- if (data != null) {
- $("#CSR").attr({ value: data[1] });
- $("#CsrEmpId").attr({ value: data[0] });
- } else {
- alert('There is no CSR for this company!');
- }
- }
- });
- return false;
- }
- });
- // When user focuses on location name we need to ensure that there is a
- // clientId to validate against so we can pull locations on that Id.
- $(".LocationName").focus(function() {
- if ($("#ClientId").val() == '') {
- alert('Please select a company!');
- $("#ClientName").focus();
- }
- });
- // Setup autocomplete options for easy rebinding.
- var autocomp_opt = {
- source: function(request, response) {
- $.ajax({
- url: "/AutoComplete/ClientLocations",
- type: "POST",
- dataType: "json",
- data: "{ 'data': '" + request.term + "','clientId': '" + $("#ClientId").val() + "'}",
- contentType: "application/json; charset=utf-8",
- success: function(data) {
- response($.map(data, function(item) {
- return {
- value: item.LocationId,
- label: item.Name
- };
- }));
- }
- });
- },
- minLength: 1,
- delay: 5,
- select: function(event, ui) {
- var id = this.id;
- displayItem("LocationId", id, ui.item);
- return false;
- }
- };
- // Autocomplete settings for our AffectedLocations.
- var autocomp_opt_alt = {
- source: function(request, response) {
- $.ajax({
- url: "/AutoComplete/ClientLocations",
- type: "POST",
- dataType: "json",
- data: "{ 'data': '" + request.term + "','clientId': '" + $("#ClientId").val() + "'}",
- contentType: "application/json; charset=utf-8",
- success: function(data) {
- response($.map(data, function(item) {
- return {
- value: item.LocationId,
- label: item.Name
- };
- }));
- }
- });
- },
- minLength: 1,
- delay: 5,
- select: function(event, ui) {
- //console.log(this.id);
- //console.log(ui);
- var id = this.id;
- displayItem("AffectedLocation_LocationId", id, ui.item);
- return false;
- }
- };
- // Location AutoComplete based on ClientId.
- $(".LocationName").autocomplete(autocomp_opt);
- $(".LocationName1").autocomplete(autocomp_opt_alt);
- //Function to write the entries into the text box
- function displayItem(hidden, target, dataObject) {
- //console.log($('#' + hidden.toString() + ''));
- if (target != "") {
- $("#" + target).attr({ value: dataObject.label });
- }
- if (hidden != null) {
- //console.log(hidden);
- $("#" + hidden).attr({ value: dataObject.value });
- }
- }
- // Hardcoding a value of '0' to our default "Unassigned - Queue" option.
- $("#AssignedTo").find("option:contains('Unassigned - Queue')").attr('value', '0');
- $('#NotifyList').tagsInput({ width: 'auto' });
- $("#AssignedTo").change(function() {
- if ($(this).val() > 0) {
- $("#TicketStateId").val('2');
- } else {
- $("#TicketStateId").val('0');
- }
- });
- // Using jQuery to redisplay the location name and client name in the autocomplete fields as these are not model binded to elements.
- if ($("#LocationId").val() > 0) {
- var location = "@ViewBag.Location";
- $("#LocationName").attr({ value: location });
- } else if ($("#LocationId").val() === "-1") {
- $("#LocationName").attr({ value: "All" });
- }
- // Populate CSR Name from hidden input value.
- if ($("#CsrEmpId").val() > 0) {
- $("#CSR").attr({ value: "@ViewBag.Csr" });
- }
- // Populate Priority of ticket.
- var priorityHidden = $("#Priority");
- var currentPriority = priorityHidden.val();
- setTicketPriority(currentPriority);
- // Autocheck "Send to Salesmen" when a salesmen is selected.
- $("#salesmenDd").change(function() {
- if ($("#salesmenDd option:selected").val() === "") {
- $("#ccSalesmen").removeAttr('checked');
- } else {
- $("#ccSalesmen").attr('checked', 'checked');
- }
- });
- // Observe this form for changes as it will be posted to the server for modification
- // This Observe will change the class of any changed element and append "changed" to it.
- // This will then change the background of the box indicating a changed field for agents.
- // Remvoved formObserve as our ticket Enviornment is updated on blur(focus out) of elements.
- // $('#modifyTicket').FormObserve();
- $("#TicketTypeId").change(function() {
- if ($(this).val() == 1 || $(this).val() == 2 || $(this).val() == 3 || $(this).val() == 4 || $(this).val() == 5 || $(this).val() == 6 || $(this).val() == 7 || $(this).val() == 8) {
- $("#scheduleService").slideDown('slow');
- if ($(this).val() == 2 || $(this).val() == 6) {
- $("#inventoryWrapper").slideDown('slow');
- } else {
- $("#inventoryWrapper").slideUp('slow');
- }
- } else {
- $("#scheduleService").slideUp('slow');
- }
- });
- // Display the Schedule Service feature as well as Inventory control for VXP
- // based on what the ticket type selected is.
- if ($("#TicketTypeId").val() == 1 || $("#TicketTypeId").val() == 2 || $("#TicketTypeId").val() == 3 || $("#TicketTypeId").val() == 4 || $("#TicketTypeId").val() == 5 || $("#TicketTypeId").val() == 6 || $("#TicketTypeId").val() == 7 || $("#TicketTypeId").val() == 8) {
- $("#scheduleService").slideDown('slow');
- if ($("#TicketTypeId").val() == 2 || $("#TicketTypeId").val() == 6) {
- $("#inventoryWrapper").slideDown('slow');
- } else {
- $("#inventoryWrapper").slideUp('slow');
- }
- } else {
- $("#scheduleService").slideUp('slow');
- }
- // Initiallize datepicker
- $('.datepicker').datepicker({ dateFormat: "yy-mm-dd" });
- //$("#formSubmit").click(function() {
- // $("#modifyTicket").FormObserve_save();
- //});
- // Get all service dates and populate our ajaxWrapper-services
- $.ajax({
- url: "/ticketing/ticketservicedates",
- type: "GET",
- data: { ticketId: @Model.TicketId, cache: Math.random() },
- success: function(result) {
- $("#ajaxUpdateWrapper-services").html('');
- $("#ajaxUpdateWrapper-services").append(result);
- }
- });
- // When user clicks create in 'Schedule Service (button)' -- Insert new record and then repopulate the data on the page.
- $('#newServiceFrm').submit(function(e) {
- e.preventDefault();
- var $form = $(this);
- // check if the input is valid
- if (!$form.valid()) return false;
- $.ajax({
- type: 'POST',
- url: "/ticketing/scheduleservice",
- data: $form.serialize(),
- success: function(response) {
- $.ajax({
- url: "/ticketing/ticketservicedates",
- type: "GET",
- data: { ticketId: @Model.TicketId, cache: Math.random() },
- success: function(result) {
- $("#ajaxUpdateWrapper-services").html('');
- $("#ajaxUpdateWrapper-services").append(result);
- $("#serviceAlert").fadeIn('fast');
- $("#newServiceDateResults").html('<strong>Success!</strong> Your service date has been added!');
- }
- });
- $("#newServiceFrm :input[type=text]").val('');
- $("#TicketAppointment_InstallNotes").val('');
- }
- });
- });
- // Load up affected locations on DOM Ready.
- $.ajax({
- url: "/ticketing/GetAffectedLocations",
- type: "GET",
- data: { ticketId: @Model.TicketId, cache: Math.random() },
- success: function(result) {
- $("#affectedLocWrapper").html('');
- $("#affectedLocWrapper").append(result);
- }
- });
- // When a new location is added via modal we will insert it and then refresh the div
- // that holds each location.
- $('#newAffectedLocationFrm').submit(function(e) {
- e.preventDefault();
- var $form = $(this);
- // check if the input is valid
- if (!$form.valid()) return false;
- $.ajax({
- type: 'POST',
- url: "/ticketing/NewAffectedLocation",
- data: $form.serialize(),
- success: function(response) {
- $.ajax({
- url: "/ticketing/GetAffectedLocations",
- type: "GET",
- data: { ticketId: @Model.TicketId, cache: Math.random() },
- success: function(result) {
- $("#affectedLocWrapper").html('');
- $("#affectedLocWrapper").append(result);
- }
- });
- $("#newServiceFrm :input[type=text]").val('');
- $("#TicketAppointment_InstallNotes").val('');
- }
- });
- });
- // This will create autocomplete on our partial box for adding affected locations.
- $('.LocationName').live('keyup.autocomplete', function() {
- $(".LocationName").autocomplete(autocomp_opt);
- });
- // Show latest update
- setInterval(function() {
- $.ajax({
- type: 'GET',
- url: "/ticketing/TicketUpdateTicks",
- data: { ticketId: @Model.TicketId },
- success: function(response) {
- var jsonDateToMoment = moment(response.LastUpdate).valueOf();
- var a = moment(jsonDateToMoment + 18000000);
- var now = new Date();
- var nowMoment = moment(now);
- var timeAgo = a.from(nowMoment);
- $("#updateDetails").html(
- '<strong>Last update by:</strong> ' + response.LastEditedBy + ' <strong>' + timeAgo + '</strong>');
- }
- });
- }, 3000);
- // Going to use the jquery blur event to save the form on blur of an element.
- $("#modifyTicket").on("blur", "input, textarea, select", function () {
- var $form = $("#modifyTicket");
- $("#saving").fadeIn('fast');
- $.ajax({
- type: 'POST',
- url: "/ticketing/ModifyTicket",
- data: $form.serialize(),
- success: function(response) {
- //console.log(response);
- $("#saving").fadeOut('slow');
- }
- });
- });
- });
- </script>
- }
- <script src="~/Scripts/fileuploader.js"></script>
- @*// File uploader javascript *@
- <script type="text/javascript">
- function getUrl(action, controller) {
- var protocol = window.location.protocol;
- var host = window.location.host;
- var url = (protocol + '//' + host + '/');
- if ((controller != null && controller != 'undefined') && (action != null && action != 'undefined'))
- url += controller + '/' + action;
- return url;
- }
- function createUploader() {
- var uploader = new qq.FileUploader({
- element: document.getElementById('file-uploader'),
- allowedExtensions: ['png', 'jpeg', 'jpg', 'gif', 'bmp'], // File Type restrictions
- action: '@Url.Action("uploadattachment", "ticketing")',
- params: { ticketId: @Model.TicketId },
- debug: true,
- onComplete: function (id, fileName, responseJSON) {
- if (responseJSON.success == true) {
- $("span.qq-upload-failed-text").html("<span style='color: green'>Success!</span>");
- $.ajax({
- url: "/ticketing/getticketattachments",
- type: "GET",
- data: { id: @Model.TicketId, cache: Math.random() },
- success: function (result) {
- $("#ticketAttachmentContainer").html('');
- $("#ticketAttachmentContainer").append(result);
- }
- });
- }
- else {
- $("span.qq-upload-failed-text").html("<span style='color: white'>Failed!</span>"); }
- // Get the preview container
- var $previewContainer = jQuery('#uploader1Preview');
- // Create the preview img element
- var $preview = jQuery('<img />');
- // Hide the preview and set it's size
- $preview.css({ display: 'none', width: '90%', height: '200px' });
- // Make sure the preview's container is empty
- $previewContainer.html('');
- // Append the preview to the container
- $previewContainer.append($preview);
- setInterval(function () {
- clearPreviewContainer();
- }, 2000);
- function clearPreviewContainer()
- {
- $(".qq-upload-list").html('');
- }
- }
- });
- }
- // create uploader as soon as the DOM is ready
- window.onload = createUploader;
- // Setting ticket priority level and changing background color to indicate current priority.
- function setTicketPriority(level) {
- var priorityHidden = $("#Priority");
- priorityHidden.attr({ value: level });
- var currentPriority = priorityHidden.val();
- switch(currentPriority) {
- case "3":
- $("#highPriority").css("background-color", "rgba(223, 223 , 223, 0.9)").css('border-left', '5px solid red');
- $("#mediumPriority").css("background-color", "").css('border-left', '');
- $("#lowPriority").css("background-color", "").css('border-left', '');
- $("#noPriority").css("background-color", "").css('border-left', '');
- $("#priorityContainer").html('Priority: <span class="label label-important">High</span>');
- break;
- case "2":
- $("#mediumPriority").css("background-color", "rgba(223, 223 , 223, 0.9)").css('border-left', '5px solid orange');
- $("#highPriority").css("background-color", "").css('border-left', '');
- $("#lowPriority").css("background-color", "").css('border-left', '');
- $("#noPriority").css("background-color", "").css('border-left', '');
- $("#priorityContainer").html('Priority: <span class="label label-warning">Medium</span>');
- break;
- case "1":
- $("#lowPriority").css("background-color", "rgba(223, 223 , 223, 0.9)").css('border-left', '5px solid green');
- $("#highPriority").css("background-color", "").css('border-left', '');
- $("#mediumPriority").css("background-color", "").css('border-left', '');
- $("#noPriority").css("background-color", "").css('border-left', '');
- $("#priorityContainer").html('Priority: <span class="label label-success">Low</span>');
- break;
- case "0":
- $("#noPriority").css("background-color", "rgba(223, 223 , 223, 0.9)").css('border-left', '5px solid black');
- $("#highPriority").css("background-color", "").css('border-left', '');
- $("#mediumPriority").css("background-color", "").css('border-left', '');
- $("#lowPriority").css("background-color", "").css('border-left', '');
- $("#priorityContainer").html('Priority: <span class="label label-inverse">None</span>');
- break;
- }
- }
- function CheckTicketAffectedLocations(ticketId) {
- $.ajax({
- url: "/ticketing/GetAffectedLocations",
- type: "GET",
- data: { ticketId: @Model.TicketId, cache: Math.random() },
- success: function(result) {
- $("#affectedLocWrapper").html('');
- $("#affectedLocWrapper").append(result);
- }
- });
- }
- </script>
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement