kogito-quarkus-examples/kogito-travel-agency/extended/visas/src/main/resources/templates/index.html (259 lines of code) (raw):
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kogito Visas</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" role="main">
<div class="jumbotron">
<h1>Kogito Visas</h1>
<p>Visa Applications approval service</p>
</div>
<div class="page-header">
<div class="btn-group pull-right" role="group" style="padding-top: 10px;">
<button class="btn btn-primary" onclick="load();">
<span class="glyphicon glyphicon-refresh"></span> Refresh
</button>
</div>
<h1>Visa applications</h1>
</div>
<div class="row">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th>Traveller name</th>
<th>Destination</th>
<th>Duration</th>
<th>Passport number</th>
<th>Nationality</th>
<th>Approved</th>
<th></th>
</tr>
</thead>
<tbody id="content">
<!-- filled using Ajax -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
const graphql = '{config:property('kogito.dataindex.http.url') or 'http://localhost:8180'}/graphql';
const userFilter = "?user=alice";
$(function () {
$.ajaxSetup({
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
load();
initModal();
if ("WebSocket" in window) {
// Let us open a web socket
var ws = new WebSocket('{config:property('kogito.dataindex.ws.url') or 'ws://localhost:8180'}/graphql');
ws.onopen = function() {
// Web Socket is connected, send data using send()
ws.send('{"id" : "1", "type" : "connection_init"}');
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
let jsonObject = JSON.parse(received_msg);
if(jsonObject.type === 'connection_ack'){
ws.send('{"id" : "2", "type" : "start", "payload" : { "query" : "subscription { VisaApplicationsUpdated { id, visaApplication { lastName, firstName, country, city, nationality, duration, passportNumber }, visaResolution { approved }, metadata { processInstances { state } } } }"}}');
} else if(jsonObject.type === 'data') {
var val = jsonObject.payload.data.VisaApplicationsUpdated;
var existing = document.getElementById(val.id);
if (existing != null) {
existing.remove();
}
appendDataRow(null, val);
}
};
ws.onclose = function() {
// websocket is closed.
};
}
});
function load() {
$("#content").children().remove();
var query = "{ \"query\": \"" +
"{ VisaApplications { " +
"id " +
"visaApplication { lastName, firstName, country, city, nationality, duration, passportNumber } " +
"visaResolution { approved } " +
"metadata { processInstances { state } } " +
"}}\"" +
"}";
$.ajax({
type: 'POST',
url: graphql,
data: query,
success: function (data) {
$.each(data.data["VisaApplications"], function (key, val) {
appendDataRow(key, val);
});
initCallbacks();
}
});
}
function appendDataRow(key, val) {
var active = $.grep(val.metadata.processInstances, function (pi) {
return pi.state == "ACTIVE"
}).length > 0;
var html =
"<tr id='" + val.id + "' class='" + (active ? "" : "active") + "'><td>" + val.visaApplication.lastName + ", " + val.visaApplication.firstName + "</td>" +
"<td>" + val.visaApplication.country + ", " + val.visaApplication.city + "</td>" +
"<td>" + val.visaApplication.duration + " days</td>" +
"<td>" + val.visaApplication.passportNumber + "</td>" +
"<td>" + val.visaApplication.nationality + "</td>" +
"<td>" + (val.visaResolution.approved ? 'Yes' : 'No') + "</td>" +
"<td>";
if (active) {
html +=
"<button class='btn btn-primary btn-sm' " +
"data-toggle='modal' " +
"data-target='#detailsModal' " +
"data-firstname='" + val.visaApplication.firstName + "' " +
"data-lastname='" + val.visaApplication.lastName + "' " +
"data-duration='" + val.visaApplication.duration + "' " +
"data-passportnumber='" + val.visaApplication.passportNumber + "' " +
"data-country='" + val.visaApplication.country + "' " +
"data-nationality='" + val.visaApplication.nationality + "' " +
"data-city='" + val.visaApplication.city + "' " +
"data-id='" + val.id + "'>" +
" <span>Approval</span>" +
"</button> ";
}
html += "</td></tr>";
$(html).appendTo("#content");
}
function initCallbacks() {
}
function submitVisaApplicationApproval(decision) {
var vapplication = {
country: $("#country").val(),
city: $("#city").val(),
firstName: $("#firstName").val(),
lastName: $("#lastName").val(),
duration: Number($("#duration").val()),
passportNumber: $("#passportNumber").val(),
nationality: $("#nationality").val()
};
var vResolution = {
approved: Boolean(decision),
reason: "Manual approval"
};
var visaApplicationRequest = JSON.stringify(\{application: vapplication, resolution: vResolution\});
$.post("/visaApplications/" + $("#visa_p_id").val() + "/ApplicationApproval/" + $("#visa_t_id").val() + userFilter, visaApplicationRequest, function () {
}, "json");
}
function initModal() {
$("#detailsModal").on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var action = button.data('action');
var id = button.data('id');
var modal = $(this);
$.getJSON("/visaApplications/" + id + "/tasks"+userFilter, function (data) {
$.each(data, function (key, val) {
if ("ApplicationApproval" == val.name) {
modal.find('.modal-title').text("Visa application for " + button.data("lastname") + ", " + button.data("firstname"));
modal.find('#firstName').val(button.data("firstname"));
modal.find('#lastName').val(button.data("lastname"));
modal.find('#country').val(button.data("country"));
modal.find('#city').val(button.data("city"));
modal.find('#passportNumber').val(button.data("passportnumber"));
modal.find('#duration').val(button.data("duration"));
modal.find('#nationality').val(button.data("nationality"));
$("#visa_p_id").val(id);
$("#visa_t_id").val(val.id);
}
});
})
})
}
</script>
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title" id="detailsModalTitle">Details of a travel</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<input type="hidden" id="visa_p_id"/>
<input type="hidden" id="visa_t_id"/>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<h3>Traveller</h3>
</div>
<div class="form-group">
<label for="firstName">First Name</label> <input type="text"
class="form-control" id="firstName" name="firstName" readonly>
</div>
<div class="form-group">
<label for="lastName">Last Name</label> <input type="text"
class="form-control" id="lastName" name="lastName" readonly>
</div>
<div class="form-group">
<label for="nationality">Nationality</label> <input type="text"
class="form-control" id="nationality" name="nationality" readonly>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<h3>Trip</h3>
</div>
<div class="form-group">
<label for="destinationCountry">Country</label> <input type="text"
class="form-control" id="country" name="destinationCountry" readonly>
</div>
<div class="form-group">
<label for="destinationCity">City</label> <input type="text"
class="form-control" id="city" name="destinationCity" readonly>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<h3>Stay information</h3>
</div>
<div class="form-group">
<label for="duration">Duration</label> <input type="text"
class="form-control" id="duration" name="duration" readonly>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<h3>Documents</h3>
</div>
<div class="form-group">
<label for="passportNumber">Passport number</label> <input type="email"
class="form-control" id="passportNumber" name="passportNumber" readonly>
</div>
</div>
</div>
<div class="row">
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="submitVisaApplicationApproval(true)">Approve</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="submitVisaApplicationApproval(false)">Reject</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>