Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @using Portal.CMS.Models;
- @using Portal.CMS.Extensions;
- @using Portal.Lib.Models;
- @model CreateModifyAgendaEventModel
- @{
- ViewBag.Title = ViewBag.ModuleDisplayName;
- }
- <div class="container-fluid">
- @Html.Partial("_ModuleTabsPartial")
- @Html.ValidationSummary(true, "", new { @class = "text-danger" })
- <br />
- <div class="table-responsive">
- <table class="table table-striped table-hover table-bordered">
- <thead>
- <tr>
- <th width="3%">#</th>
- <th>Titel</th>
- <th width="14%">Begindatum</th>
- <th width="14%">Einddatum</th>
- <th width="8%" class="text-right">
- <a class="btn btn-success btn-sm addNewAgendaEvent">
- <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
- </a>
- </th>
- </tr>
- </thead>
- <tbody>
- @foreach (ModAgendaEvent agendaEvent in ViewBag.AgendaEvents)
- {
- <tr>
- <td>@agendaEvent.Id</td>
- <td>@agendaEvent.Title</td>
- <td class="startDate" data-startdate="@agendaEvent.StartDate.ConvertToTimestamp()"></td>
- <td class="endDate" data-enddate="@agendaEvent.EndDate.ConvertToTimestamp()"></td>
- <td style="text-align: right">
- <a class="btn btn-danger btn-sm deleteAgendaEvent" data-eventid="@agendaEvent.Id">
- <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
- </a>
- <a class="btn btn-primary btn-sm editAgendaEvent" data-eventid="@agendaEvent.Id"
- data-title="@agendaEvent.Title" data-startdate="@agendaEvent.StartDate.ConvertToTimestamp()"
- data-enddate="@agendaEvent.EndDate.ConvertToTimestamp()" data-description="@agendaEvent.Description"
- data-location="@agendaEvent.Location" data-imagename="@agendaEvent.ImageFileName">
- <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
- </a>
- </td>
- </tr>
- }
- </tbody>
- </table>
- </div>
- <div class="modal fade" id="modal_edit_agenda_event" role="dialog">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h4 class="modal-title">Evenement aanpassen</h4>
- </div>
- @using (Ajax.BeginForm("Agenda", "CMS", null, new AjaxOptions { HttpMethod = "post", OnSuccess = "onChangeSuccess" }, null))
- {
- @Html.AntiForgeryToken()
- @Html.HiddenFor(m => m.CompanyId)
- <input id="editEventId" type="hidden" name="EventId" />
- <input id="editStartDate" type="hidden" name="StartDate" />
- <input id="editEndDate" type="hidden" name="EndDate" />
- <input name="ActionType" type="hidden" value="edit" />
- <div class="modal-body">
- <div class="container-fluid">
- <div class="row">
- <div class="form-group col-lg-12">
- <div class="col-lg-12">
- @Html.CustomLabelFor(m => m.Title, new { })
- @Html.ValidationMessageFor(m => m.Title, "", new { @class = "text-danger" })
- @Html.TextBoxFor(m => m.Title, new { id = "edit_title", @class = "form-control", autocomplete = "off" })
- </div>
- </div>
- </div>
- <br />
- <div class="row">
- <div class="form-group col-lg-12">
- <div class="col-lg-6">
- @Html.CustomLabelFor(m => m.StartDate, new { })
- @Html.ValidationMessageFor(m => m.StartDate, "", new { @class = "text-danger" })
- <input type='text' class="form-control" id='edit_start_dtp' />
- @*<div class='input-group date' id='edit_start_dtp'>
- <input type='text' class="form-control" />
- <span class="input-group-addon">
- <span class="glyphicon glyphicon-calendar"></span>
- </span>
- </div>*@
- </div>
- <div class="col-lg-6">
- @Html.CustomLabelFor(m => m.EndDate, new { })
- @Html.ValidationMessageFor(m => m.EndDate, "", new { @class = "text-danger" })
- <input type='text' class="form-control" id='edit_end_dtp' />
- @*<div class='input-group date' id='edit_end_dtp'>
- <input type='text' class="form-control" />
- <span class="input-group-addon">
- <span class="glyphicon glyphicon-calendar"></span>
- </span>
- </div>*@
- </div>
- </div>
- </div>
- <br />
- <div class="row">
- <div class="form-group col-lg-12">
- <div class="col-lg-12">
- @Html.CustomLabelFor(m => m.Location, new { })
- @Html.ValidationMessageFor(m => m.Location, "", new { @class = "text-danger" })
- @Html.TextBoxFor(m => m.Location, new { id = "edit_location", @class = "form-control", autocomplete = "off" })
- </div>
- </div>
- </div>
- <br />
- <div class="row">
- <div class="form-group col-lg-12">
- <div class="form-group col-lg-12">
- @Html.CustomLabelFor(m => m.Image, new { })
- @Html.ValidationMessageFor(m => m.Image, "", new { @class = "text-danger" })
- <input type="file" name="Image" id="input_agenda_event_edit" />
- <br />
- <img id="agenda_event_image_edit" class="img-responsive col-lg-3">
- </div>
- </div>
- </div>
- <br />
- <div class="row">
- <div class="form-group col-lg-12">
- <div class="col-lg-12">
- @Html.CustomLabelFor(m => m.Description, new { })
- @Html.ValidationMessageFor(m => m.Description, "", new { @class = "text-danger" })
- @Html.TextAreaFor(m => m.Description, new { id = "edit_description", @class = "form-control", autocomplete = "off", rows = 16 })
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="modal-footer">
- <div class="row">
- <div class="form-group col-lg-12">
- <button type="submit" class="btn btn-primary col-sm-12 btn-lg">
- <span class="glyphicon glyphicon-save" aria-hidden="true"></span> Evenement opslaan
- </button>
- </div>
- </div>
- </div>
- }
- </div>
- </div>
- </div>
- <div class="modal fade" id="modal_add_agenda_event" role="dialog">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h4 class="modal-title">Evenement toevoegen</h4>
- </div>
- @using (Ajax.BeginForm("Agenda", "CMS", null, new AjaxOptions { HttpMethod = "post", OnSuccess = "onChangeSuccess" }, null))
- {
- @Html.AntiForgeryToken()
- @Html.HiddenFor(m => m.CompanyId)
- <input id="addStartDate" type="hidden" name="StartDate" />
- <input id="addEndDate" type="hidden" name="EndDate" />
- <input name="ActionType" type="hidden" value="add" />
- <div class="modal-body">
- <div class="container-fluid">
- <div class="row">
- <div class="form-group col-lg-12">
- <div class="col-lg-12">
- @Html.CustomLabelFor(m => m.Title, new { })
- @Html.ValidationMessageFor(m => m.Title, "", new { @class = "text-danger" })
- @Html.TextBoxFor(m => m.Title, new { id = "add_title", @class = "form-control", autocomplete = "off" })
- </div>
- </div>
- </div>
- <br />
- <div class="row">
- <div class="form-group col-lg-12">
- <div class="col-lg-6">
- @Html.CustomLabelFor(m => m.StartDate, new { })
- @Html.ValidationMessageFor(m => m.StartDate, "", new { @class = "text-danger" })
- <input type='text' class="form-control" id='add_start_dtp' />
- @*<div class='input-group date' id='add_start_dtp'>
- <input type='text' class="form-control" />
- <span class="input-group-addon">
- <span class="glyphicon glyphicon-calendar"></span>
- </span>
- </div>*@
- </div>
- <div class="col-lg-6">
- @Html.CustomLabelFor(m => m.EndDate, new { })
- @Html.ValidationMessageFor(m => m.EndDate, "", new { @class = "text-danger" })
- <input type='text' class="form-control" id='add_end_dtp' />
- @*<div class='input-group date' id='add_end_dtp'>
- <input type='text' class="form-control" />
- <span class="input-group-addon">
- <span class="glyphicon glyphicon-calendar"></span>
- </span>
- </div>*@
- </div>
- </div>
- </div>
- <br />
- <div class="row">
- <div class="form-group col-lg-12">
- <div class="col-lg-12">
- @Html.CustomLabelFor(m => m.Location, new { })
- @Html.ValidationMessageFor(m => m.Location, "", new { @class = "text-danger" })
- @Html.TextBoxFor(m => m.Location, new { id = "add_location", @class = "form-control", autocomplete = "off" })
- </div>
- </div>
- </div>
- <br />
- <div class="row">
- <div class="form-group col-lg-12">
- <div class="form-group col-lg-12">
- @Html.CustomLabelFor(m => m.Image, new { })
- @Html.ValidationMessageFor(m => m.Image, "", new { @class = "text-danger" })
- <input type="file" name="Image" id="input_agenda_event_add" />
- <br />
- <img id="agenda_event_image_add" class="img-responsive col-lg-3">
- </div>
- </div>
- </div>
- <br />
- <div class="row">
- <div class="form-group col-lg-12">
- <div class="col-lg-12">
- @Html.CustomLabelFor(m => m.Description, new { })
- @Html.ValidationMessageFor(m => m.Description, "", new { @class = "text-danger" })
- @Html.TextAreaFor(m => m.Description, new { id = "add_description", @class = "form-control", autocomplete = "off", rows = 16 })
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="modal-footer">
- <div class="row">
- <div class="form-group col-lg-12">
- <button type="submit" class="btn btn-primary col-sm-12 btn-lg">
- <span class="glyphicon glyphicon-save" aria-hidden="true"></span> Evenement toevoegen
- </button>
- </div>
- </div>
- </div>
- }
- </div>
- </div>
- </div>
- <div class="modal fade" id="modal_delete_event_are_you_sure" role="dialog">
- <div class="modal-dialog modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h4 class="modal-title">Evenement verwijderen</h4>
- </div>
- @using (Ajax.BeginForm("Agenda", "CMS", null, new AjaxOptions { HttpMethod = "post", OnSuccess = "onChangeSuccess" }, null))
- {
- @Html.AntiForgeryToken()
- @Html.HiddenFor(m => m.CompanyId)
- <input name="ActionType" type="hidden" value="delete" />
- <input id="deleteEventId" type="hidden" name="EventId" />
- <input name="Title" type="hidden" value="1" />
- <input name="StartDate" type="hidden" value="1" />
- <input name="EndDate" type="hidden" value="1" />
- <input name="Location" type="hidden" value="1" />
- <input name="Description" type="hidden" value="1" />
- <div class="modal-body">
- <p>Weet u zeker dat u dit evenement wilt verwijderen?</p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-primary btn-lg" data-dismiss="modal">Terug</button>
- <button type="submit" class="btn btn-danger btn-lg" id="confirmDelete">Verwijderen</button>
- </div>
- }
- </div>
- </div>
- </div>
- @if (ViewBag.ShowPositiveAlert)
- {
- <div class="alert alert-success">
- <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
- <strong>Gelukt!</strong> <div id="success_alert_msg">De database is aangepast</div>
- </div>
- }
- <div id="alert_update_error" class="hidden">
- <div class="alert alert-danger">
- <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
- <strong>Error!</strong> <div id="error_alert_msg"></div>
- </div>
- </div>
- </div>
- @section scripts {
- @Scripts.Render("~/bundles/jqueryval")
- <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
- <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.bootstrap.min.js"></script>
- <script type="text/javascript">
- function onChangeSuccess(data) {
- //alert(data.status);
- if (data.status === "success") {
- location.reload();
- //! This does not cover it. The data table is not refreshed
- //$("[data-dismiss=modal]").trigger({ type: "click" });
- //$("#alert_update_success").removeClass("hidden");
- }
- else {
- $.each(data.formErrors, function () {
- //alert(this.key + " - " + this.errors.join());
- if (this.key) {
- $("[data-valmsg-for=" + this.key + "]").html(this.errors.join());
- }
- else {
- $("#alert_update_error").removeClass("hidden");
- $("#error_alert_msg").append(this.errors.join());
- }
- });
- }
- }
- $(document).ready(function () {
- $('.startDate').each(function (i, e) {
- var t = $(e);
- var date = parseFloat(t.data('startdate'));
- t.text(moment.unix(date).format("DD-MM-YYYY HH:mm"));
- });
- $('.endDate').each(function (i, e) {
- var t = $(e);
- var date = parseFloat(t.data('enddate'));
- t.text(moment.unix(date).format("DD-MM-YYYY HH:mm"));
- });
- $('#edit_start_dtp').datetimepicker({ format: 'DD-MM-YYYY HH:mm' });
- $("#edit_start_dtp").on("dp.change", function (e) {
- $('#editStartDate').val(e.date.format('X'));
- });
- $('#edit_end_dtp').datetimepicker({ format: 'DD-MM-YYYY HH:mm' });
- $("#edit_end_dtp").on("dp.change", function (e) {
- $('#editEndDate').val(e.date.format('X'));
- });
- $('#add_start_dtp').datetimepicker({ format: 'DD-MM-YYYY HH:mm' });
- $("#add_start_dtp").on("dp.change", function (e) {
- $('#addStartDate').val(e.date.format('X'));
- });
- $('#add_end_dtp').datetimepicker({ format: 'DD-MM-YYYY HH:mm' });
- $("#add_end_dtp").on("dp.change", function (e) {
- $('#addEndDate').val(e.date.format('X'));
- });
- $('.editAgendaEvent').click(function () {
- var t = $(this);
- var id = t.data('eventid');
- var title = t.data('title');
- var description = t.data('description');
- var location = t.data('location');
- var startdate = t.data('startdate');
- var enddate = t.data('enddate');
- var imageName = t.data('imagename');
- $('#editEventId').val(id);
- $('#edit_title').val(title);
- $('#edit_description').val(description);
- $('#edit_location').val(location);
- $('#edit_start_dtp').data("DateTimePicker").date(moment.unix(parseFloat(startdate)));
- $('#edit_end_dtp').data("DateTimePicker").date(moment.unix(parseFloat(enddate)));
- $('#agenda_event_image_edit').attr('src', '@Url.Content($"~/images/m/{Model.CompanyName}")/' + imageName);
- $("#modal_edit_agenda_event").modal({show: true, keyboard: false, backdrop: 'static' });
- });
- $('.addNewAgendaEvent').click(function () {
- $('#add_title').val('');
- $('#add_description').val('');
- $('#add_location').val('');
- $('#add_start_dtp').data("DateTimePicker").date(moment());
- $('#add_end_dtp').data("DateTimePicker").date(moment());
- $("#modal_add_agenda_event").modal({show: true, keyboard: false, backdrop: 'static' });
- });
- $('.deleteAgendaEvent').click(function () {
- var t = $(this);
- var id = t.data('eventid');
- $('#deleteEventId').val(id);
- $("#modal_delete_event_are_you_sure").modal({show: true, keyboard: false, backdrop: 'static' });
- });
- $("#input_agenda_event_edit").change(function () {
- setImagePreview(this, '#agenda_event_image_edit');
- });
- $("#input_agenda_event_add").change(function () {
- setImagePreview(this, '#agenda_event_image_add');
- });
- function setImagePreview(input, imgId) {
- if (input.files && input.files[0]) {
- var reader = new FileReader();
- reader.onload = function (e) {
- $(imgId).attr('src', e.target.result);
- }
- reader.readAsDataURL(input.files[0]);
- }
- }
- });
- </script>
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement