%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../partials/header %>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/sidebar %>
<style>
.quick-btn { background: #EEEEEE;
box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
color: #444444;
display: inline-block;
height: 80px;
margin: 10px;
padding-top: 16px;
text-align: center;
text-decoration: none;
width: 90px;
position: relative;
}
.quick-btn span {
display: block;
}
.quick-btn .label {
position: absolute;
right: -5px;
top: -5px;
}
.quick-btn:hover {
text-decoration: none;
color: #fff;
background-color: #4d7589;
box-shadow: 3px 4px 1px #ccc;
}
.quick-btn.small {
width: 40px;
height: 30px;
padding-top: 6px;
}
form {
padding: 20px;
}
td form {
display: inline-block;
}
</style>
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<!-- Breadcrumb starts-->
<div class="content-header row">
<div class="content-header-left col-md-6 col-12 mb-1">
<h2 class="content-header-title"> <%= title %></h2>
</div>
<div class="content-header-right breadcrumbs-right breadcrumbs-top col-md-6 col-12">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a>
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<!-- DOM - jQuery events table -->
<section id="dom">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<!-- <h4 class="card-title">DOM / jQuery events</h4> -->
<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<!-- <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> -->
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
<!-- <li><a data-action="close"><i class="ft-x"></i></a></li> -->
</ul>
</div>
</div>
<div class="card-content collapse show">
<div class="card-body card-dashboard">
<!-- <p class="card-text">Events assigned to the table can be exceptionally useful for
user interaction, however you must be aware that DataTables
will add and remove rows from the DOM as they are needed (i.e.
when paging only the visible elements are actually available
in the DOM). As such, this can lead to the odd hiccup when
working with events.</p> -->
<div class="mb-1 create text-center">
<a class="quick-btn" href="#" data-toggle="modal" data-target="#addOrg">
<i class="ft-plus"></i><br>
Add New
</a>
</div>
<table id="example" class="table table-striped table-bordered dom-jQuery-events">
<thead>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<!-- <th>Positon</th> -->
<%/*
<th>Start date</th>
<th>Edit/Delete</th>
*/%>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<% allOrganizations.forEach(function(organization, index){ %>
<tr>
<td><%= (index + 1) %></td>
<td><%= organization.name%></td>
<td><%= organization.email %></td>
<td> <%= organization.phone %> </td>
<td> <%= organization.address %> </td>
<td>
<button title="Edit" data-toggle="modal" data-target="#editOrg" class="btn btn-icon btn-warning mr-1"
name="<%= organization.name %>"
description="<%= organization.description %>"
address="<%= organization.address %>"
city="<%= organization.city %>"
state="<%= organization.state %>"
country="<%= organization.country %>"
postalCode="<%= organization.postalCode %>"
email="<%= organization.email %>"
phone="<%= organization.phone %>"
id="<%= organization.id %>"
><i class="la la-pencil"></i>
</button>
<form action="/organization/delete" method="POST" >
<input type="hidden" name="id" value="<%= organization.id %>" />
<button title="Delete" type="submit" class="btn btn-icon btn-danger mr-1"><i class="la la-close"></i></button>
</form>
</td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- DOM - jQuery events table -->
</div>
</div>
</div>
<div class="modal fade text-left bd-example-modal-lg" id="addOrg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#1E9FF2;">
<h3 class="modal-title" id="myModalLabel35"> Create New Organization</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form" action="/organization/add" method="POST">
<div class="form-body">
<h4 class="form-section"><i class="ft-user"></i> Organization Info</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" placeholder="Name" name="name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">E-mail</label>
<input type="text" id="email" class="form-control" placeholder="E-mail" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="phone">Contact Number</label>
<input type="text" id="phone" class="form-control" placeholder="Phone" name="phone">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" class="form-control" placeholder="City" name="city">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="state">State</label>
<input type="text" id="state" class="form-control" placeholder="State" name="state">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country">Country</label>
<input type="text" id="country" class="form-control" placeholder="Country" name="country">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="address">Address</label>
<textarea type="text" id="address" class="form-control" placeholder="Address" name="address"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="adminFirstName">Admin First Name</label>
<input type="text" id="adminFirstName" class="form-control" placeholder="Name" name="adminFirstName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="adminLastName">Admin Last Name</label>
<input type="text" id="adminLastName" class="form-control" placeholder="Name" name="adminLastName">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="adminEmail"> Admin Login E-mail</label>
<input type="text" id="adminEmail" class="form-control" placeholder="E-mail" name="adminEmail">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="adminPassword"> Admin Password</label>
<input type="password" id="adminPassword" class="form-control" name="adminPassword">
</div>
</div>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" rows="5" class="form-control" name="description" placeholder="About Organization"></textarea>
</div>
<div class="form-actions">
<button type="reset" class="btn btn-warning mr-1" data-dismiss="modal" value="close">
<i class="ft-x"></i> Cancel
</button>
<button type="submit" class="btn btn-primary">
<i class="la la-check-square-o"></i> Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade text-left bd-example-modal-lg" id="editOrg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#1E9FF2;">
<h3 class="modal-title" id="myModalLabel35"> Update Organization</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="editForm" class="form" action="/organization/update" method="POST">
<div class="form-body">
<h4 class="form-section"><i class="ft-user"></i> Organization Info</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" placeholder="Name" name="name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">E-mail</label>
<input type="text" id="email" class="form-control" placeholder="E-mail" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="phone">Contact Number</label>
<input type="text" id="phone" class="form-control" placeholder="Phone" name="phone">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" class="form-control" placeholder="City" name="city">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="state">State</label>
<input type="text" id="state" class="form-control" placeholder="State" name="state">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country">Country</label>
<input type="text" id="country" class="form-control" placeholder="Country" name="country">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="address">Address</label>
<textarea type="text" id="address" class="form-control" placeholder="Address" name="address"></textarea>
</div>
</div>
</div>
<input type="hidden" name="id" />
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" rows="5" class="form-control" name="description" placeholder="About Organization"></textarea>
</div>
<div class="form-actions">
<button type="reset" class="btn btn-warning mr-1" data-dismiss="modal" value="close">
<i class="ft-x"></i> Cancel
</button>
<button type="submit" class="btn btn-primary">
<i class="la la-check-square-o"></i> Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/footer %>
<script>
$('table#example').DataTable();
$('#editOrg').on('show.bs.modal', function (e) {
var opener = e.relatedTarget; // Button that triggered the modal
var name = $(opener).attr('name'); // Extract info from data-* attributes
var description = $(opener).attr('description');
var address = $(opener).attr('address');
var city = $(opener).attr('city');
var state = $(opener).attr('state');
var country = $(opener).attr('country');
var postalCode = $(opener).attr('postalCode');
var email = $(opener).attr('email');
var phone = $(opener).attr('phone');
var id = $(opener).attr('id');
$('#editForm').find('[name="name"]').val(name);
$('#editForm').find('[name="description"]').val(description);
$('#editForm').find('[name="address"]').val(address);
$('#editForm').find('[name="city"]').val(city);
$('#editForm').find('[name="state"]').val(state);
$('#editForm').find('[name="country"]').val(country);
$('#editForm').find('[name="postalCode"]').val(postalCode);
$('#editForm').find('[name="email"]').val(email)
$('#editForm').find('[name="phone"]').val(phone);
$('#editForm').find('[name="id"]').val(id);
});
</script>
Zerion Mini Shell 1.0