Skip to content

Commit

Permalink
Send Cases UI/UX
Browse files Browse the repository at this point in the history
  • Loading branch information
@keshansandeepa
keshansandeepa committed Mar 18, 2020
1 parent 19debc6 commit 06a0b36
Show file tree
Hide file tree
Showing 6 changed files with 171 additions and 75 deletions.
121 changes: 121 additions & 0 deletions src/main/resources/js/Case.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import Vue from 'vue'
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
import VueGoogleAutocomplete from 'vue-google-autocomplete'

Vue.use(VueSweetalert2);
const axios = require('axios').default;
var app = new Vue({

el: '#app',
components:{
flatPickr,
VueGoogleAutocomplete
},
data: {
config: {
enableTime: true,
time_24hr: true,
dateFormat: "Y-m-d H:i"
},
address: {
'address':''
},
configDate:{
enableTime: false,
},
cases:{
'caseNumber':'',
'message_en':'',
'message_si':'',
'message_ta':''
},
locations:[
{
'date':'',
'from':'',
'to':'',
'address':'',
'longitude':'',
'latitude':''
}
]
},


mounted() {
// To demonstrate functionality of exposed component functions
// Here we make focus on the user input
},

methods:{
addLocation(){
this.locations.push({
'date':'',
'from':'',
'to':'',
'address':'',
'longitude':'0',
'latitude':'0'
})
},

getAddressData: function (addressData, placeResultData, id ,index) {
let location = this.locations[id];
location.address = placeResultData.formatted_address;
location.longitude = addressData.longitude;
location.latitude = addressData.latitude;
this.locations[id] = location;
console.log(this.locations);
},

saveCases(){
let url= "/notification/case/add"
axios.post(url,{

"caseNumber" : this.cases.caseNumber,
"message_en":this.cases.message_en,
"message_si":this.cases.message_si,
"message_ta":this.cases.message_ta,
"locations": this.locations
},{
headers:
{
'content-type': 'application/json'
}
}
).then(response=>{
if(response.status == 202){

Vue.swal({
title: 'New Case Report Was Submitted',
icon: 'success'
});

this.cases.caseNumber= '';
this.cases.message_en= '';
this.cases.message_si= '';
this.cases.message_ta= '';

this.locations = [];
this.locations.push({
'date':'',
'from':'',
'to':'',
'address':'',
'longitude':'0',
'latitude':'0'
});
this.$refs.makeAddress.clear();
}
}).catch(e=>{
console.log(e);
})

}


},
})
2 changes: 2 additions & 0 deletions src/main/resources/static/js/Case.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/main/resources/static/js/alerts.js
View file

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions src/main/resources/static/js/caseportal.js
View file

This file was deleted.

111 changes: 43 additions & 68 deletions src/main/resources/templates/casePortal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
</div>
<div class="hidden sm:block sm:ml-6">
<div class="flex">
<a href="/portal/news" class="px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Send News</a>
<a href="/portal/news" class="px-3 py-2 rounded-md text-sm font-medium leading-5 text-gray-300 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Send Alerts</a>
<a href="/portal/cases" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-white leading-5 bg-gray-900 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out">Send Case</a>
</div>
</div>
Expand Down Expand Up @@ -111,7 +111,7 @@ <h1 class="text-4xl font-bold">Case Report Portal </h1>
<!-- ===============================================-->
<!-- Form Wrapper-->
<!-- ===============================================-->
<form action="" method="post">
<form method="post">
<div class="w-full mt-5">

<!-- ===============================================-->
Expand All @@ -124,35 +124,35 @@ <h2 class= "bg-white mt-2 px-8 text-left text-2xl leading-9 font-semibold text-g
<div class="flex mt-2 py-4 flex-col w-full bg-gray-200 px-4">
<!--Title Input-->
<div class="mt-2">
<label class="px-4 text-base text-gray-700 w-full " for="caseNumber">Case Number**</label>
<label class="px-4 text-base text-gray-700 w-full " for="caseNumber">Case Number(DHIS2)<span class="text-red-400">**</span></label>
<div class="px-4">
<input class=" bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
type="text" placeholder="Case Number" name="caseNumber" id="caseNumber" required>
type="text" placeholder="Case Number" name="caseNumber" id="caseNumber" v-model="cases.caseNumber" required>
</div>
</div>

<!--Source Input-->
<div class="mt-8">
<label class="px-4 text-base text-gray-700 w-full" for="message_en">English Message**</label>
<label class="px-4 text-base text-gray-700 w-full" for="message_en">English Message<span class="text-red-400">**</span></label>
<div class="px-4">
<textarea rows="2" class=" bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
type="text" placeholder="Message in English" id="message_en" required></textarea>
type="text" placeholder="Message in English" id="message_en" v-model="cases.message_en" required></textarea>
</div>
</div>

<div class="mt-8">
<label class="px-4 text-base text-gray-700 w-full" for="message_si">Sinhala Message**</label>
<label class="px-4 text-base text-gray-700 w-full" for="message_si">Sinhala Message<span class="text-red-400">**</span></label>
<div class="px-4">
<textarea rows="2" class=" bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
type="text" name="message_si" placeholder="Message in English" id="message_si" required></textarea>
type="text" name="message_si" placeholder="Message in English" id="message_si" v-model="cases.message_si" required></textarea>
</div>
</div>

<div class="mt-8">
<label class="px-4 text-base text-gray-700 w-full" for="message_ta">Tamil Message**</label>
<label class="px-4 text-base text-gray-700 w-full" for="message_ta">Tamil Message<span class="text-red-400">**</span></label>
<div class="px-4">
<textarea rows="2" class=" bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
type="text" name="message_ta" placeholder="Message in Tamil" id="message_ta" required></textarea>
type="text" name="message_ta" placeholder="Message in Tamil" id="message_ta" v-model="cases.message_ta" required></textarea>
</div>
</div>
</div>
Expand Down Expand Up @@ -181,7 +181,7 @@ <h2 class= "bg-white mt-2 px-8 text-left text-2xl leading-9 font-semibold text-g

<!--Date Input-->
<div class="mt-8">
<label class="px-4 text-base text-gray-700 w-full" for="date">Date</label>
<label class="px-4 text-base text-gray-700 w-full" for="date">Date<span class="text-red-400">**</span></label>
<div class="px-4">
<flat-pickr class="bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
v-model="location.date" :config="configDate" placeholder="Select a date" :name="`locations[${index}][date]`"></flat-pickr>
Expand All @@ -192,15 +192,15 @@ <h2 class= "bg-white mt-2 px-8 text-left text-2xl leading-9 font-semibold text-g
<div class="mt-8 flex flex-row">
<!--From Input-->
<div class="w-1/2">
<label class="px-4 text-base text-gray-700 w-full" for="from">From</label>
<label class="px-4 text-base text-gray-700 w-full" for="from">From<span class="text-red-400">**</span></label>
<div class="px-4">
<flat-pickr class="bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
v-model="location.from" :config="config" placeholder="Select a from date" :name="`locations[${index}][from]`"></flat-pickr>
</div>
</div>
<!--To Input-->
<div class="w-1/2">
<label class="px-4 text-base text-gray-700 w-full" for="to">To</label>
<label class="px-4 text-base text-gray-700 w-full" for="to">To<span class="text-red-400">**</span></label>
<div class="px-4">
<flat-pickr class="bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
v-model="location.to" :config="config" placeholder="Select a end date" :name="`locations[${index}][to]`"></flat-pickr>
Expand All @@ -210,20 +210,38 @@ <h2 class= "bg-white mt-2 px-8 text-left text-2xl leading-9 font-semibold text-g

<!--Address Input-->
<div class="mt-8">
<label class="px-4 text-base text-gray-700 w-full" for="address">Address</label>
<label class="px-4 text-base text-gray-700 w-full" for="address">Address<span class="text-red-400">**</span></label>
<div class="px-4">
<input class=" bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
type="text" placeholder="Address" id="address" :name="`locations[${index}][address]`" required v-model="location.address">

<input type="hidden" id="address-latitude" :name="`locations[${index}][address_latitude]`" value="0" v-model="location.longitude" />

<input type="hidden" id="address-longitude" :name="`locations[${index}][address_longitude]`" value="0" v-model="location.latitude" />
<vue-google-autocomplete
class="bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
ref="makeAddress"
:id="`${index}`"
classname="form-control"
placeholder="Please type your address"
v-on:placechanged="getAddressData"
country="lk"
>
</vue-google-autocomplete>

</div>
</div>
</div>
</div>

<!-- ===============================================-->
<!-- SaveButton-->
<!-- ===============================================-->
<div class="bg-white mt-8 flex flex-row border shadow-md py-4 px-6 justify-between items-center">
<div class="text-lg text-black font-bold ">
Nice Job! You're almost done
</div>
<div>
<button v-on:click="saveCases" type="button"class="bg-white hover:bg-gray-100 text-blue-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow">
Add Case Report
</button>
</div>
</div>

</div>
</form>

Expand All @@ -236,52 +254,9 @@ <h2 class= "bg-white mt-2 px-8 text-left text-2xl leading-9 font-semibold text-g
<!-- End Main Wrapper-->
<!-- ===============================================-->
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@latest/dist/vue-flatpickr.js"></script>


<script>
Vue.component('flat-pickr', VueFlatpickr);
var app = new Vue({

el: '#app',
data: {
config: {
enableTime: true,
time_24hr: true,
dateFormat: "Y-m-d H:i"
},
configDate:{
enableTime: false,
},
cases:{

},
locations:[
{
'date':'',
'from':'',
'to':'',
'address':'',
'longitude':'0',
'latitude':'0'
}
]
},

methods:{
addLocation(){
this.locations.push({
'date':'',
'from':'',
'to':'',
'address':'',
'longitude':'0',
'latitude':'0'
})
}

},
})
</script>
<script src="https://maps.googleapis.com/maps/api/js?
key=LOLYOuCameTothis?
&libraries=places"></script>

<script th:src="@{/js/Case.js}"></script>
</html>
8 changes: 4 additions & 4 deletions src/main/resources/templates/newsPortal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ <h2 class= "bg-white mt-2 px-8 text-left text-2xl leading-9 font-extrabold text-
<div class="flex mt-2 py-4 flex-col w-full bg-gray-200 px-4">
<!--Title Input-->
<div class="mt-2">
<label class="px-4 text-xl text-gray-800 w-full " for="title">Title**</label>
<label class="px-4 text-xl text-gray-800 w-full " for="title">Title<span class="text-red-400">**</span></label>
<div class="px-4">
<input class=" bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
type="text" placeholder="Title" name="title" id="title" v-model="alert.title" required>
Expand All @@ -99,7 +99,7 @@ <h2 class= "bg-white mt-2 px-8 text-left text-2xl leading-9 font-extrabold text-

<!--SubTitle Input-->
<div class="mt-2">
<label class="px-4 text-xl text-gray-800 w-full " for="sub_title">Sub Title**</label>
<label class="px-4 text-xl text-gray-800 w-full " for="sub_title">Sub Title<span class="text-red-400">**</span></label>
<div class="px-4">
<input
class=" bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
Expand All @@ -109,7 +109,7 @@ <h2 class= "bg-white mt-2 px-8 text-left text-2xl leading-9 font-extrabold text-

<!--Source Input-->
<div class="mt-2">
<label class="px-4 text-xl text-gray-800 w-full " for="source">Source**</label>
<label class="px-4 text-xl text-gray-800 w-full " for="source">Source<span class="text-red-400">**</span></label>
<div class="px-4">
<input class=" bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
type="text" placeholder="Source" id="source" name="source" required v-model="alert.source">
Expand All @@ -124,7 +124,7 @@ <h2 class= "bg-white mt-2 px-8 text-left text-2xl leading-9 font-extrabold text-
<div class="flex mt-2 py-4 flex-col w-full bg-gray-200 px-4">
<!--Description Input-->
<div class="mt-8">
<label class="px-4 text-xl text-gray-800 w-full" for="english_description">English Description**</label>
<label class="px-4 text-xl text-gray-800 w-full" for="english_description">English Description<span class="text-red-400">**</span></label>
<div class="px-4">
<textarea rows="10" class=" bg-white appearance-none border-2 border-gray-200 rounded w-full py-2 mt-2 px-4 text-gray-700 leading-tight focus:outline-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
type="text" placeholder="description" id="english_description" required name="messageEn" v-model="alert.messageEn"></textarea>
Expand Down

0 comments on commit 06a0b36

Please sign in to comment.