Skip to content

Commit

Permalink
added missing Sample Widget files
Browse files Browse the repository at this point in the history
  • Loading branch information
etrousset authored and sebtiz13 committed Apr 29, 2024
1 parent 2d53eb3 commit 19328f3
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 20 deletions.
23 changes: 3 additions & 20 deletions apps/web/src/appDefinition.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
import BulkImport from '~/views/bulkImport/BulkImport.vue';
import SampleWidget from '~/widgets/sample-widget/SampleWidget.vue';
import SampleWidgetForm from '~/widgets/sample-widget/SampleWidgetForm.vue';
// import CatalogList from '~/views/catalog/CatalogList.vue';

const admin = IoTPlatformChunks.find((chunk) => chunk.name === 'admin');
if (admin?.children !== undefined) {
Expand Down Expand Up @@ -44,30 +43,14 @@ if (admin?.children !== undefined) {

export const appDefinitions: AppChunk[] = [
...IoTPlatformChunks,
// {
// name: 'catalog',
// label: 'locales.sidebar.catalog',
// icon: faBookmark,
// vuejsRoute: {
// path: '/catalog',
// component: KRouteWrapper,
// children: [
// {
// path: '',
// name: 'catalog',
// component: CatalogList,
// },
// ],
// },
// },
];

export const dashboardWidgets: DashboardWidget[] = [
{
name: 'pie',
label: 'locales.widget.pie.label',
name: 'sample-widget',
label: 'My Sample Widget', // TODO : i18n
component: SampleWidget,
formComponent:SampleWidgetForm,
icon: 'chart-pie',
icon: 'face-meh',
},
];
131 changes: 131 additions & 0 deletions apps/web/src/widgets/sample-widget/SampleWidget.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<template>
<div class="text-left h-100">
<div class="sample-widget">
<H2> This is a sample widget</H2>
<h3>Bucketting field : {{ props.widgetSettings.buckettingField }}</h3>

<KTable :items="data" :total="data.length" :headers="headers">
<template #cell(name)="data">
{{ data.item.key }}
</template>
<template #cell(description)="data">
{{ data.item.count }}
</template>
</KTable>

<b-container fluid>
<brow v-for="e in data" :key="e.key">
<bcol >
{{ e.key }}
</bcol>
<bcol cols="6">
{{ e.count }}
</bcol>
<div class="w-100"></div>
</brow>
</b-container>
</div>
</div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch, reactive } from 'vue';
import { useKuzzle, useI18n, AggregateTypes, KTable, KTableHeader } from '@kuzzleio/iot-platform-frontend';
import type { AssetContent } from 'kuzzle-device-manager-types';
import { KDocument } from 'kuzzle-sdk';
import { BFormSelect, BFormSelectOption, BRow, BCol, BFormInput, BButton } from 'bootstrap-vue';
// import { KTableContext, KTableHeader, AlertRuleContent, SortQuery } from '@/types';
// Types
import {SampleWidgetSettingsType} from "./SampleWidgetSettings"
import { forEach } from 'lodash';
// Props
interface SampleWidgetProps {
widgetSettings: SampleWidgetSettingsType;
widgetHeight: number;
widgetWidth: string;
engineIndex: string;
}
const props = defineProps<SampleWidgetProps>();
// Computeds
const headers = computed<KTableHeader[]>(() => [
{
key: 'name',
label: 'Colonne 1', //$i18n.t('locales.notifications.list.notificationName'),
sortable: true,
},
{
key: 'description',
label: 'Colonne 2', //$i18n.t('locales.notifications.list.notificationDescription'),
sortable: false,
},
]);
// Emits
interface EmitTypes {
(name: 'loading'): void;
(name: 'loaded'): void;
}
const emit = defineEmits<EmitTypes>();
// Composables
const $i18n = useI18n();
const $kuzzle = useKuzzle();
// Refs
const data = ref<Array<{[x:string] : number;}>>([]);
// Constants
// Computeds
// Hooks
onMounted(async () => {
emit('loading');
console.log("onmounted!!!!!");
await fetchData();
// kuzzle search avec props buckettingField
// charger les données dans un chartjs
// update front
emit('loaded');
});
// Functions
async function fetchData(): Promise<void> {
if (props.widgetSettings?.buckettingField) {
const query = {
equals: {
model: 'Lampadaire',
},
};
const res= await $kuzzle.document.search<AssetContent>(
props.engineIndex,
'assets',
{ aggs: {
term_agg: {
terms : {
field: 'metadata.' + props.widgetSettings.buckettingField,
}
}
} },
);
const agg : Array<{[x:string] : number;}> = [] ;
for( let bucket of res.aggregations?.term_agg.buckets) {
agg.push( { key : bucket.key, count: bucket.doc_count});
}
data.value= agg;
}
emit('loaded');
}
</script>

<style lang="scss"></style>
53 changes: 53 additions & 0 deletions apps/web/src/widgets/sample-widget/SampleWidgetForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<template>
<div>
<h1>Widget form</h1>
<BRow>
<BCol>
<BFormGroup
:label="$i18n.t('locales.widget.common.asset-model')"
label-for="asset-model-field"
>
<BFormInput
id="asset-model-field"
v-model="widgetSettings.buckettingField"
required
@change="emitChange"
/>
</BFormGroup>
</BCol>
</BRow>
</div>
</template>

<script setup lang="ts">
import { BFormSelect, BFormSelectOption, BRow, BCol, BFormInput, BButton } from 'bootstrap-vue';
import { reactive } from 'vue';
import cloneDeep from 'lodash/cloneDeep';
// Types
import { SampleWidgetSettingsType } from './SampleWidgetSettings';
export interface SampleWidgetFormProps {
// The index name where the Dashboard engine is installed
engineIndex: string;
// The collections of the engine-index
collections: string[];
// The settings, passed to the widget
editedWidgetSettings?: SampleWidgetSettingsType;
}
const props = withDefaults(defineProps<SampleWidgetFormProps>(), {
editedWidgetSettings: () => ({
buckettingField: 'test',
}),
});
// Refs
const widgetSettings = reactive(cloneDeep(props.editedWidgetSettings));
// Emits
type EmitTypes = (name: 'change', widgetSettings: SampleWidgetSettingsType) => void;
const emit = defineEmits<EmitTypes>();
function emitChange(): void {
emit('change', widgetSettings);
}
</script>
3 changes: 3 additions & 0 deletions apps/web/src/widgets/sample-widget/SampleWidgetSettings.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export interface SampleWidgetSettingsType {
buckettingField: string;
}

0 comments on commit 19328f3

Please sign in to comment.