Skip to content

Commit

Permalink
buefy tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@akmolina28
akmolina28 committed Oct 7, 2020
1 parent a4f71a9 commit 51043ac
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 94 deletions.
1 change: 1 addition & 0 deletions src/app/Resources/DetectionProfileResource.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ public function toArray($request)
'object_classes' => $this->object_classes,
'min_confidence' => $this->min_confidence,
'use_mask' => $this->use_mask,
'use_regex' => $this->use_regex,
'status' => $this->status,
'start_time' => $this->start_time,
'end_time' => $this->end_time,
Expand Down
2 changes: 1 addition & 1 deletion src/database/factories/DetectionProfileFactory.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
'file_pattern' => $faker->word(),
'object_classes' => $faker->randomElements(config('deepstack.object_classes'), $faker->numberBetween(1, 5)),
'min_confidence' => $faker->numberBetween(45, 100) / 100,
'use_regex' => false,
'use_regex' => $faker->boolean(),
'use_mask' => $faker->boolean()
];
});
93 changes: 65 additions & 28 deletions src/resources/js/components/DetectionEvents.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,32 +34,55 @@
</div>
</div>
</div>
<div class="responsive-table-wrapper">
<table class="table">
<thead>
<tr>
<th>Matched File</th>
<th>Occurred</th>
<th>Relevant</th>
</tr>
</thead>
<tbody>
<tr v-for="event in laravelData.data" @click="$router.push(`/events/${event.id}`)" :key="event.id">
<td>{{ event.image_file_name }}</td>
<td :title="event.occurred_at | dateStr">
{{ event.occurred_at | dateStrRelative }}
</td>
<td>
<b-icon v-if="event.detection_profiles_count > 0" icon="check"></b-icon>
</td>
</tr>
</tbody>
</table>

<pagination :data="laravelData.meta" @pagination-change-page="getData" :limit="5">
</pagination>
<!-- <div class="responsive-table-wrapper">-->
<!-- <table class="table">-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <th>Matched File</th>-->
<!-- <th>Occurred</th>-->
<!-- <th>Relevant</th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<!-- <tr v-for="event in laravelData.data" @click="$router.push(`/events/${event.id}`)" :key="event.id">-->
<!-- <td>{{ event.image_file_name }}</td>-->
<!-- <td :title="event.occurred_at | dateStr">-->
<!-- {{ event.event.occurred_at | dateStrRelative }}-->
<!-- </td>-->
<!-- <td>-->
<!-- <b-icon v-if="event.detection_profiles_count > 0" icon="check"></b-icon>-->
<!-- </td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->

</div>
<b-table
hoverable
:selected.sync="selected"
mobile-cards
:data="isEmpty ? [] : events"
:loading="eventsLoading"
@click="rowClick"
class="mb-3">

<b-table-column field="image_file_name" label="Image File" v-slot="props">
{{ props.row.image_file_name }}
</b-table-column>

<b-table-column field="occurred_at" label="Occurred" v-slot="props">
<span :title="props.row.occurred_at | dateStr">
{{ props.row.occurred_at | dateStrRelative }}
</span>
</b-table-column>

<b-table-column field="relevant" label="Relevant" v-slot="props">
<b-icon v-if="props.row.detection_profiles_count > 0" icon="check"></b-icon>
</b-table-column>

</b-table>

<pagination :data="meta" @pagination-change-page="getData" :limit="5">
</pagination>
</div>


Expand All @@ -71,10 +94,14 @@
data() {
return {
laravelData: {},
events: [],
eventsLoading: false,
meta: {},
filterOption: 'relevant',
filterProfileId: null,
allProfiles: []
allProfiles: [],
isEmpty: true,
selected: {}
}
},
Expand All @@ -93,6 +120,10 @@
},
methods: {
rowClick(event) {
window.open(`/events/${event.id}`, '_blank');
},
filter(filterOption) {
if (filterOption === 'all' || filterOption === 'relevant') {
this.filterProfileId = null;
Expand All @@ -108,6 +139,7 @@
},
getData(page = 1) {
this.eventsLoading = true;
let url = '/api/events?page=' + page;
if (this.filterOption === 'relevant') {
url += '&relevant';
Expand All @@ -117,7 +149,12 @@
}
axios.get(url)
.then(response => {
this.laravelData = response.data;
this.events = response.data.data;
this.meta = response.data.meta;
this.isEmpty = false;
})
.finally(() => {
this.eventsLoading = false;
});
}
}
Expand Down
143 changes: 78 additions & 65 deletions src/resources/js/components/DetectionProfiles.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,76 +16,81 @@
</title-header>

<div class="mb-3">
<a class="button is-info" href="/profiles/create">New Profile</a>
<a class="button is-primary" href="/profiles/create">
<span>New Profile</span>
<span class="icon">
<b-icon icon="plus"></b-icon>
</span>
</a>
</div>

<div class="responsive-table-wrapper">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Pattern</th>
<th>Regex</th>
<th>Object Classes</th>
<th>Min Confidence</th>
<th>Automations</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="profile in profiles" :key="profile.id">
<td>{{ profile.name }}</td>
<td>{{ profile.file_pattern }}</td>
<td>{{ profile.use_regex }}</td>
<td>{{ profile.object_classes.join('|') }}</td>
<td>{{ profile.min_confidence }}</td>
<td><router-link :to="`/profiles/${profile.id}/automations`">Automations</router-link></td>
<td>
<b-dropdown aria-role="list" :ref="'dropdown' + profile.id">
<button :class="'button is-primary' + (profile.status === 'disabled' ? ' is-light': '') + (profile.isStatusUpdating ? ' is-loading' : '')"
slot="trigger" slot-scope="{ statusDropdownActive }">
<span>{{ profile.status | menuize }}</span>
<b-icon :icon="statusDropdownActive ? 'chevron-up' : 'chevron-down'"></b-icon>
</button>

<b-dropdown-item aria-role="listitem" @click="updateStatus(profile, 'enabled')">
<span class="icon has-text-success">
<b-icon icon="circle"></b-icon>
</span>
Enabled
</b-dropdown-item>
<hr class="dropdown-divider">
<b-dropdown-item aria-role="listitem" @click="updateStatus(profile, 'disabled')">
<span class="icon has-text-grey">
<b-icon icon="ban"></b-icon>
</span>
Disabled
</b-dropdown-item>
<hr class="dropdown-divider">
<b-dropdown-item aria-role="listitem" @click="showSchedulerModal(profile)">
<span class="icon has-text-primary">
<b-icon icon="clock"></b-icon>
</span>
As Scheduled
</b-dropdown-item>
</b-dropdown>

</td>
<td>
<button @click="deleteProfile(profile)" :class="'button is-danger is-outlined' + (profile.isDeleting ? ' is-loading' : '')">
<span class="icon is-small">
<b-icon icon="trash"></b-icon>
</span>
</button>
</td>
</tr>
</tbody>
</table>
<b-table
hoverable
mobile-cards
:data="isEmpty ? [] : profiles"
:loading="profilesLoading"
class="mb-3">

<pagination :data="meta" @pagination-change-page="getData"></pagination>
<b-table-column field="name" label="Profile Name" v-slot="props">
{{ props.row.name }}
</b-table-column>

<b-table-column field="file_pattern" label="File Pattern" v-slot="props">
{{ props.row.file_pattern }}
</b-table-column>

<b-table-column field="use_regex" label="Use Regex" v-slot="props">
<b-icon v-if="props.row.use_regex" icon="check"></b-icon>
</b-table-column>

<b-table-column field="object_classes" label="Object Classes" v-slot="props">
{{ props.row.object_classes.join('|') }}
</b-table-column>

<b-table-column field="min_confidence" label="Min Confidence" v-slot="props">
{{ props.row.min_confidence }}
</b-table-column>

<b-table-column field="automations" label="Automations" v-slot="props">
<router-link :to="`/profiles/${props.row.id}/automations`">Automations</router-link>
</b-table-column>

<b-table-column field="status" label="Status" v-slot="props">
<b-dropdown aria-role="list">
<button :class="'button is-primary' + (props.row.status === 'disabled' ? ' is-light': '') + (props.row.isStatusUpdating ? ' is-loading' : '')"
slot="trigger" slot-scope="{ statusDropdownActive }">
<span>{{ props.row.status | menuize }}</span>
<b-icon :icon="statusDropdownActive ? 'chevron-up' : 'chevron-down'"></b-icon>
</button>

<b-dropdown-item aria-role="listitem" @click="updateStatus(props.row, 'enabled')">
<span class="icon has-text-success">
<b-icon icon="circle"></b-icon>
</span>
Enabled
</b-dropdown-item>
<hr class="dropdown-divider">
<b-dropdown-item aria-role="listitem" @click="updateStatus(props.row, 'disabled')">
<span class="icon has-text-grey">
<b-icon icon="ban"></b-icon>
</span>
Disabled
</b-dropdown-item>
<hr class="dropdown-divider">
<b-dropdown-item aria-role="listitem" @click="showSchedulerModal(props.row)">
<span class="icon has-text-primary">
<b-icon icon="clock"></b-icon>
</span>
As Scheduled
</b-dropdown-item>
</b-dropdown>
</b-table-column>
</b-table>

<div class="container is-spaced">
<pagination :data="meta" @pagination-change-page="getData"></pagination>
</div>

<b-modal
v-model="isModalActive"
trap-focus
Expand Down Expand Up @@ -157,6 +162,8 @@
},
data() {
return {
isEmpty: true,
profilesLoading: false,
profiles: [],
meta: {},
isModalActive: false,
Expand Down Expand Up @@ -204,6 +211,7 @@
},
getData(page = 1) {
this.profilesLoading = true;
axios.get(`/api/profiles?page=${page}`)
.then(response => {
let profiles = response.data.data;
Expand All @@ -213,6 +221,11 @@
profiles.forEach(p => p.endTime = (p.end_time ? new Date('2020-01-01 ' + p.end_time) : null));
this.profiles = profiles;
this.meta = response.data.meta;
this.isEmpty = false;
this.profilesLoading = false;
})
.catch(() => {
this.profilesLoading = false;
});
},
Expand Down

0 comments on commit 51043ac

Please sign in to comment.