Skip to content

Commit

Permalink
updated UI and integrated api (#224)
Browse files Browse the repository at this point in the history 
Co-authored-by: Javier Munoz <javier@igwtech.net>
  • Loading branch information
@vueexcel @igwtech
vueexcel and igwtech authored Jul 5, 2022
1 parent 9151132 commit 3e53e1a
Show file tree
Hide file tree
Showing 9 changed files with 671 additions and 158 deletions.
5 changes: 5 additions & 0 deletions WebUI/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuetify": "^2.4.0",
"vuex": "^3.1.1",
"yarn": "^1.22.17"
},
Expand All @@ -22,6 +23,10 @@
"@vue/cli-service": "^3.11.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.4.0",
"vuetify-loader": "^1.7.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
Expand Down
2 changes: 2 additions & 0 deletions WebUI/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<template>
<v-app>
<div id="app" class="container-fluid">
<div v-if="is_logged">
<admin-layout/>
Expand All @@ -8,6 +9,7 @@
<login-screen />
</div>
</div>
</v-app>
</template>

<script>
Expand Down
12 changes: 12 additions & 0 deletions WebUI/src/api/dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import axios from 'axios';

const END_POINT__DATERANGE_DATA = 'https://ec2-3-101-28-243.us-west-1.compute.amazonaws.com:8443/api/as2message/list/?Id=""&accountId=""&userId=""';
const END_POINT_INTERVAL_DATA = 'https://ec2-3-101-28-243.us-west-1.compute.amazonaws.com:8443/api/as2message/list/?orgId=""&accountId=""&userId=""';

const getTableDataByDate = ( payload ) => axios.get(END_POINT__DATERANGE_DATA+ '&' +`startDate=${payload.startDate}`+ '&' +`endDate=${payload.lastDate}`,{ headers: { 'Authorization': 'Basic dXNlcklEOnBXZA==' }});
const getTableDataByInterval = ( payload ) => axios.get(END_POINT_INTERVAL_DATA + '&' +`${payload}`,{ headers: { 'Authorization': 'Basic dXNlcklEOnBXZA==' }});


export default {
getTableDataByDate, getTableDataByInterval
}
308 changes: 296 additions & 12 deletions WebUI/src/components/Dashboard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,298 @@
<template>
<div id="dashboard">

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<div v-if="errored" v-html="errormsg" class="alert alert-primary" role="alert"></div>
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
<button type="button" class="btn btn-sm btn-outline-secondary px-9">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary px-9">Export</button>
</div>
<div class="btn btn-sm btn-outline-secondary selectableWidth">
<v-row>
<v-col cols="2" class="align-self-center p-0">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
</v-col>
<v-col cols="10" class="align-self-center p-0">
<v-select
v-model="weekSelect"
:items="items"
item-text="name"
item-value="value"
label="Select Range">
</v-select>
</v-col>
</v-row>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
This week
</button>
</div>

</div>
<iframe href="https://sourceforge.net/p/openas2/discussion/" width="100%" height="800px" border="0" style="border:none"></iframe>
</div>
<div class="d-flex flex-row-reverse align-items-center pt-3 pb-2 mb-3 border-bottom" v-if="weekSelect === 3">
<div>
<v-menu
ref="lastMenu"
v-model="lastMenu"
:close-on-content-click="false"
:return-value.sync="lastDate"
transition="scale-transition"
offset-y
min-width="auto"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="lastDate"
label="Last Date"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="lastDate"
no-title
scrollable
>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="lastMenu = false"
>
Cancel
</v-btn>
<v-btn
text
color="primary"
@click="$refs.lastMenu.save(lastDate)"
>
OK
</v-btn>
</v-date-picker>
</v-menu>
</div>
<div>
<v-menu
ref="startMenu"
v-model="startMenu"
:close-on-content-click="false"
:return-value.sync="startDate"
transition="scale-transition"
offset-y
min-width="auto"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="startDate"
label="Start Date"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="startDate"
no-title
scrollable
>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="startMenu = false"
>
Cancel
</v-btn>
<v-btn
text
color="primary"
@click="$refs.startMenu.save(startDate)"
>
OK
</v-btn>
</v-date-picker>
</v-menu>
</div>
</div>
<!-- <iframe href="https://sourceforge.net/p/openas2/discussion/" width="100%" height="800px" border="0" style="border:none"></iframe> -->
<v-tabs
v-model="tab"
ref="tabs"
>
<v-tab href="#sent">
Sent
</v-tab>
<v-tab href="#received">
Received
</v-tab>
<v-tabs-items :value="tab">
<v-text-field
v-model="search"
label="Search"
single-line
hide-details
class="my-6"
></v-text-field>
<v-tab-item
value="sent"
class="mb-10"
transition="fade-up"
reverse-transition="fade-up"
>
<v-data-table
:headers="headers"
:items="filteredData"
:search="search"
:sort-desc="true"
sort-by="name"
:loading="loading"
no-data-text="No Data for sent">
<template v-slot:[`item.msgId`]="props">
<v-edit-dialog :return-value.sync="props.item.msgId">
<div class="text-truncate fixWidth"> {{ props.item.msgId }}</div>
<template v-slot:input>
<div class="p-5">{{ props.item.msgId }}</div>
</template>
</v-edit-dialog>
</template>
<template v-slot:[`item.mdnResponse`]="props">
<v-edit-dialog :return-value.sync="props.item.mdnResponse">
<div class="text-truncate fixWidth"> {{ props.item.mdnResponse }}</div>
<template v-slot:input>
<div class="p-5">{{ props.item.mdnResponse }}</div>
</template>
</v-edit-dialog>
</template>
<template v-slot:[`item.msgData`]="props">
<v-edit-dialog :return-value.sync="props.item.msgData">
<div class="text-truncate fixWidth"> {{ props.item.msgData }}</div>
<template v-slot:input>
<div class="p-5">{{ props.item.msgData }}</div>
</template>
</v-edit-dialog>
</template>
</v-data-table>
</v-tab-item>
<v-tab-item
value="received"
class="mb-10"
transition="fade-up"
reverse-transition="fade-up"
>
<v-data-table
:headers="headers"
:items="filteredData"
:search="search"
:sort-desc="true"
sort-by="name"
:loading="loading"
no-data-text="No Data for receive">
</v-data-table>
</v-tab-item>
</v-tabs-items>
</v-tabs>
</div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
name: 'dashboard'
name: 'dashboard',
data() {
return {
headers: [
{ text: "Id", value: "id", sortable: true },
{ text: "Msg Id", value: "msgId", sortable: true },
{ text: "mdn Response", value: "mdnResponse", sortable: true },
{ text: "msg Data", value: "msgData", sortable: true },
{ text: "Sender Id", value: "senderId", sortable: true },
{ text: "Receiver Id", value: "receiverId", sortable: true },
{ text: "state", value: "state", sortable: true },
{ text: "UpdateDate time", value: "updateDatetime", sortable: true }
],
tab: '',
loading: false,
search: '',
errormsg: '',
errored: false,
weekSelect: "",
items: [{name: 'Past Hour', value: 'interval=1 hour' },
{name: 'Past 24 Hour', value: 'interval=1 day' },
{name: 'Past Week', value: 'interval=1 week' },
{name: 'Date Range', value: 3}],
startMenu: false,
lastMenu: false,
startDate: '',
lastDate: ''
}
},
watch: {
async weekSelect(val) {
if (val !== 3) {
this.loading = true
const resp = await this.fetchTableDataByInterval(val)
if (resp !== true) {
this.errored = true;
this.errormsg = res;
}
this.loading = false
}
},
tab() {
this.search = ''
},
startDate(val) {
if (val && this.lastDate) {
this.getTableData()
}
},
lastDate(val) {
if (val && this.startDate) {
this.getTableData()
}
}
},
mounted() {
this.weekSelect = 'interval=1 hour'
},
computed: {
...mapState("dashboardModule", {
tableData: (state) => state.tableData,
}),
filteredData() {
let sentArray = []
let recArray = []
if (this.tableData && this.tableData.length) {
this.tableData.forEach(el => {
if (el.direction === 'SEND') {
sentArray.push(el)
} else {
recArray.push(el)
}
});
}
if (this.tab === 'sent') {
return sentArray
} else {
return recArray
}
}
},
methods: {
...mapActions("dashboardModule", ["fetchTableDataByDate", "fetchTableDataByInterval"]),
async getTableData() {
this.loading = true
const payload = {
startDate: this.startDate,
lastDate: this.lastDate
}
const res = await this.fetchTableDataByDate(payload)
if (res !== true) {
this.errored = true;
this.errormsg = res;
}
this.loading = false
}
}
}
</script>
<style scoped>
Expand All @@ -32,6 +304,18 @@ export default {
padding-top: 133px; /* Space for fixed navbar */
}
.v-text-field {
padding: 0;
}
.fixWidth {
max-width: 180px;
}
.selectableWidth {
max-width: 200px;
}
@media (min-width: 768px) {
[role="main"] {
padding-top: 48px; /* Space for fixed navbar */
Expand Down
7 changes: 5 additions & 2 deletions WebUI/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@ import Vue from 'vue'
import App from './App.vue'
import router from './routes'
import store from './store'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false


new Vue({
el:'#app',
router,
store,
render: h => h(App),
router
vuetify,
render: h => h(App)
});
Loading

0 comments on commit 3e53e1a

Please sign in to comment.