Subversion Repositories SmartDukaan

<style>

.modal-dialog {

	width: 85%;

	height: auto;

}

.modal-content {

	height: auto;

	min-height: 100%;

	border-radius: 0;

}

div.polaroid {

	width: 40%;

	background-color: white;

	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0

		rgba(0, 0, 0, 0.19);

}

img {

	width: 100%

}

div.container {

	text-align: center;

	padding: 10px 20px;

}

</style>

<div class="container" id="vueFirst">

<?php if(isset($result) && !empty($result)):?>

	<div class="row">

		<div class="col-xs-12">

			<table cellpadding="0" cellspacing="0" class="table table-striped">

				<tr>

					<th>Name</th>

					<th>Email</th>

					<th>Mobile</th>

					<th>Business Name</th>

					<th>Type</th>

					<th>Number</th>

					<th>Created</th>

					<th>Actions</th>

				</tr>

				<?php foreach ($result as $rkey =>$rval):?>

				<tr>

					<td><?php echo $rval['u']['first_name'].' '.$rval['u']['last_name'];?>

					</td>

					<td><?php echo $rval['u']['email'];?></td>

					<td><?php echo $rval['u']['mobile_number'];?></td>

					<td><?php echo $rval['a']['name'];?></td>

					<td><?php echo $rval['r']['type'];?></td>

					<td><?php echo $rval['r']['number'];?></td>

					<td><?php echo $rval['r']['create_timestamp'];?></td>

					<td><button type="button" class="btn btn-primary btn-sm"

							data-toggle="modal" data-target="#myModal"

							v-on:click="setIndex(<?php echo $rkey?>)">View Details</button>

				</tr>

				<?php endforeach;?>

			</table>

		</div>

	</div>

	<?php endif;?>

	<!-- Modal -->

	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"

		aria-labelledby="myModalLabel">

		<div class="modal-dialog" role="document">

			<div class="modal-content">

				<div class="modal-header">

					<button type="button" class="close" data-dismiss="modal"

						aria-label="Close">

						<span aria-hidden="true">&times;</span>

					</button>

					<h4 class="modal-title" id="myModalLabel">{{chosenData.a.name}}</h4>

				</div>

				<div class="modal-body">

					<div class="form-inline">

						<div class="form-group">

							<label for="usr">Name:</label> <input type="text"

								class="form-control" v-model="chosenData.a.name">

						</div>

						<div class="form-group">

							<label for="usr">Business Number:</label> <input type="text"

								class="form-control" v-model="chosenData.r.number">

						</div>

						<div class="form-group">

							<label for="usr">Business Type:</label> <input readonly

								type="text" class="form-control" v-model="chosenData.r.type">

						</div>

					</div>

					<div class="form-inline">

						<div class="form-group">

							<label for="usr">Line1:</label> <input type="text"

								class="form-control" v-model="chosenData.a.line_1">

						</div>

						<div class="form-group">

							<label for="usr">Line2:</label> <input type="text"

								class="form-control" v-model="chosenData.a.line_2">

						</div>

						<div class="form-group">

							<label for="usr">City:</label> <input type="text"

								class="form-control" id="usr" v-model="chosenData.a.city">

						</div>

						<div class="form-group">

							<label for="usr">State:</label> <select

								v-model="chosenData.a.state" class="form-control">

								<option v-for="state in states" v-bind:value="state">{{state}}</option>

							</select>

						</div>

					</div>

					<div class="row">

						<div class="col-md-6">

							<div class="thumbnail">

								<div class="caption">

									<p>Business Image</p>

								</div>

								<img :src="'http://app.profitmandi.com:8080/profitmandi-web/document/' + chosenData.r.document_id" alt="Lights" style="width: 100%">

							</div>

						</div>

						<div class="col-md-6">

							<div class="thumbnail">

								<div class="caption">

									<p>Shop Image</p>

								</div>

								<img :src="'http://app.profitmandi.com:8080/profitmandi-web/document/' + chosenData.r.document_id" alt="Nature" style="width: 100%">

							</div>

						</div>

					</div>

					<div class="modal-footer">

						<button type="button" class="btn btn-sm btn-default"

							data-dismiss="modal">Close</button>

						<button type="button" class="btn btn-sm btn-primary">Save changes</button>

					</div>

				</div>

			</div>

		</div>

	</div>

	<script src="https://unpkg.com/vue"></script>

	<script type="text/javascript">

	var alldata = <?php echo json_encode($result);?>;

	var vModal = new Vue({

	el: '#vueFirst',

	data: {

		chosenData : alldata[0],

		states : [

    'Andaman & Nicobar Islands',

    'Andhra Pradesh',

    'Arunachal Pradesh',

    'Assam',

    'Bihar',

    'Chandigarh',

    'Chhattisgarh',

    'Dadra & Nagar Haveli',

    'Daman & Diu',

    'Delhi',

    'Goa',

    'Gujarat',

    'Haryana',

    'Himachal Pradesh',

    'Jammu & Kashmir',

    'Jharkhand',

    'Karnataka',

    'Kerala',

    'Lakshdweep',

    'Madhya Pradesh',

    'Maharashtra',

    'Manipur',

    'Meghalaya',

    'Mizoram',

    'Nagaland',

    'Orissa',

    'Pondicherry',

    'Punjab',

    'Rajasthan',

    'Sikkim',

    'Tamil Nadu',

    'Telangana',

    'Tripura',

    'Uttar Pradesh',

    'Uttranchal',

    'West Bengal'

  ]

  	},

  	methods: {

  		setIndex: function(index){

  			//console.log("called " + index); 

  			this.chosenData = alldata[index];

  		}

  	}

}) 

</script>