github
/
statping
mirror of https://github.com/statping/statping
1
0
Fork 0
Code Issues Releases Wiki Activity

style changes

pull/1097/head
smit95tpatel 2022-02-09 13:17:41 +05:30
parent ed27881697
commit b36d16779f
1 changed files with 102 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
frontend/src/components/Dashboard/ServiceTreeView.vue
View File

@ -1,53 +1,87 @@
<template> <template>
<div> <div>
<form> <div class="row">
<div class="form-row"> <div class="col-sm-6">
<div class="form-group col-sm-3 mb-md-0"> <form>
<FlatPickr <div class="form-row">
id="start" <div class="form-group col-sm-6 mb-md-0">
v-model="dateTime" <FlatPickr
type="text" id="dateTime"
name="start" ref="dateTimeRef"
class="form-control form-control-plaintext" v-model="dateTime"
:config="{ type="text"
altFormat: 'J M, Y, h:iK', name="dateTime"
altInput: true, class="form-control form-control-plaintext"
enableTime: true, :config="{
dateFormat: 'Z', altFormat: 'J M, Y, h:iK',
maxDate: new Date().toJSON(), altInput: true,
}" enableTime: true,
placeholder="Select Start Date" dateFormat: 'Z',
/> maxDate: new Date().toJSON(),
</div> }"
placeholder="Select Start Date"
/>
</div>
<div class="form-group col-sm-3 mb-md-0"> <div class="form-group col-sm-6 mb-md-0">
<div role="group"> <div role="group">
<button <button
type="button" type="submit"
class="btn btn-primary mr-1" class="btn btn-primary mr-1"
:disabled="dateTime === '' || isLoading" :disabled="dateTime === '' || isLoading"
@click.prevent="handleFilterSearch" @click.prevent="handleFilterSearch"
> >
{{ $t('search') }} {{ $t('search') }}
</button> </button>
<button <button
type="button" type="button"
class="btn btn-outline-secondary" class="btn btn-outline-secondary"
@click.prevent="handleClearFilter" @click.prevent="handleClearFilter"
> >
Reset Reset
</button> </button>
</div>
</div>
</div> </div>
</div> </form>
</div> </div>
</form>
<div class="col-sm-6">
<ul class="d-flex justify-content-end align-items-center">
<li class="d-flex">
<div class="mr-1 text-shade-success">
<FontAwesomeIcon
icon="circle"
class="border border-secondary rounded-circle"
/>
</div>
<div>Up</div>
</li>
<li class="d-flex ml-3">
<div class="mr-1 text-shade-warning">
<FontAwesomeIcon
icon="circle"
class="border border-secondary rounded-circle"
/>
</div>
<div>Degraded</div>
</li>
<li class="d-flex ml-3">
<div class="mr-1 text-shade-danger">
<FontAwesomeIcon
icon="circle"
class="border border-secondary rounded-circle"
/>
</div>
<div>Down</div>
</li>
</ul>
</div>
</div>
<div class="mt-3"> <div class="mt-3">
<h4>Heading</h4> <div v-if="isLoading">
<div
v-if="isLoading"
>
<div class="col-12 text-center"> <div class="col-12 text-center">
<FontAwesomeIcon <FontAwesomeIcon
icon="circle-notch" icon="circle-notch"
@ -176,6 +210,10 @@ export default {
this.isLoading = false; this.isLoading = false;
}, },
handleFilterSearch: function () { handleFilterSearch: function () {
// Remove focus and close date time picker on enter click.
this.$refs.dateTimeRef.$el.nextSibling.blur();
this.$refs.dateTimeRef.fp.close();
this.getServiceStatus(this.dateTime); this.getServiceStatus(this.dateTime);
}, },
handleClearFilter: function () { handleClearFilter: function () {
@ -185,7 +223,27 @@ export default {
}; };
</script> </script>
<style> <style scoped>
ul, li {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.text-shade-danger {
color: #f7cecc;
border: red
}
.text-shade-warning {
color: #FFE6CC;
}
.text-shade-success {
color: #D6E7D4;
}
.parent-list-group li { .parent-list-group li {
position: relative; position: relative;
} }