Skip to content

Commit

Permalink
Merge branch 'main' into funman-graph-improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@shawnyama
shawnyama authored Oct 9, 2024
2 parents 53d7d33 + 72e286f commit a1d2f1b
Show file tree
Hide file tree
Showing 18 changed files with 308 additions and 289 deletions.
61 changes: 17 additions & 44 deletions packages/client/hmi-client/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,25 @@
<template>
<!-- Sets the Toast notification groups and their respective levels-->
<Toast position="top-center" group="error" />
<Toast position="top-center" group="warn" />
<Toast position="top-center" group="info" />
<Toast position="top-center" group="success" />
<header>
<tera-navbar :active="displayNavBar" />
</header>
<main>
<router-view v-slot="{ Component }">
<component class="page" :is="Component" />
</router-view>
<ConfirmDialog class="w-4" />
</main>
<footer>
<tera-footer />
</footer>
<Toast position="top-center" />
<tera-navbar :active="displayNavBar" />
<router-view v-slot="{ Component }">
<component class="page" :is="Component" />
</router-view>
<tera-footer />
<tera-common-modal-dialogs />
</template>

<script setup lang="ts">
import { computed, onMounted, watch } from 'vue';
import Toast from 'primevue/toast';
import { ToastSeverity, ToastSummaries, useToastService } from '@/services/toast';
import { useRoute, useRouter } from 'vue-router';
import Toast from 'primevue/toast';
import API from '@/api/api';
import TeraNavbar from '@/components/navbar/tera-navbar.vue';
import TeraFooter from '@/components/navbar/tera-footer.vue';
import TeraCommonModalDialogs from '@/components/widgets/tera-common-modal-dialogs.vue';
import { useProjects } from '@/composables/project';
import { useCurrentRoute } from '@/router';
import { ToastSeverity, ToastSummaries, useToastService } from '@/services/toast';
import { Project } from '@/types/Types';
import ConfirmDialog from 'primevue/confirmdialog';
import TeraCommonModalDialogs from './components/widgets/tera-common-modal-dialogs.vue';
import { useCurrentRoute } from './router/index';
const toast = useToastService();
Expand All @@ -59,37 +46,23 @@ onMounted(() => useProjects().getAll());
// Update the project when the projectId changes
watch(
() => route.params.projectId,
(projectId) => {
useProjects().get(projectId as Project['id']);
(projectId, oldProjectId) => {
if (projectId !== oldProjectId) {
useProjects().get(projectId as Project['id']);
}
},
{ immediate: true }
);
</script>

<style scoped>
main {
grid-area: main;
.page {
display: flex;
flex-grow: 1;
flex: 1;
grid-area: main;
isolation: isolate;
z-index: 1;
overflow: hidden;
position: relative;
}
header {
grid-area: header;
}
footer {
grid-area: footer;
}
.page {
z-index: 1;
flex: 1;
min-width: 0;
display: flex;
flex-grow: 1;
}
</style>
57 changes: 57 additions & 0 deletions ...s/client/hmi-client/src/components/intervention-policy/tera-intervention-summary-card.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<template>
<div>
<aside>{{ !isEmpty(intervention.dynamicInterventions) ? 'Dynamic' : 'Static' }}</aside>
<h5>{{ intervention.name }}</h5>
<ul>
<li v-for="(staticIntervention, index) in intervention.staticInterventions" :key="`static-${index}`">
Set {{ staticIntervention.type }} <strong>{{ staticIntervention.appliedTo }}</strong> to
<strong>{{ staticIntervention.value }}</strong> starting at <strong>{{ staticIntervention.timestep }}</strong
>&nbsp;day.
</li>
<li v-for="(dynamicIntervention, index) in intervention.dynamicInterventions" :key="`dynamic-${index}`">
Set {{ dynamicIntervention.type }} <strong>{{ dynamicIntervention.appliedTo }}</strong> to
<strong>{{ dynamicIntervention.value }}</strong> when
<strong>{{ dynamicIntervention.parameter }}</strong> crosses the threshold&nbsp;<strong>{{
dynamicIntervention.threshold
}}</strong
>.
</li>
</ul>
</div>
</template>

<script setup lang="ts">
import { Intervention } from '@/types/Types';
import { isEmpty } from 'lodash';
defineProps<{
intervention: Intervention;
}>();
</script>

<style scoped>
div {
background: var(--surface-section);
border: 1px solid var(--surface-border-light);
border-radius: var(--border-radius-medium);
padding: var(--gap-4) var(--gap-5);
box-shadow:
0 2px 2px -1px rgba(0, 0, 0, 0.06),
0 2px 4px -1px rgba(0, 0, 0, 0.08);
}
ul {
list-style: none;
margin-top: var(--gap-2);
}
li + li {
margin-top: var(--gap-1);
}
aside {
color: var(--text-color-subdued);
font-size: var(--font-caption);
float: right;
}
</style>
107 changes: 44 additions & 63 deletions packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,37 @@
<h4>Other configuration values for '{{ otherValueList[0].target }}'</h4>
</template>
<DataTable
:value="otherValueList"
@update:selection="onCustomSelectionChange"
dataKey="id"
:rowsPerPageOptions="[10, 20, 50]"
tableStyle="min-width: 55rem"
:rowsPerPageOptions="[10, 20, 50]"
:value="otherValueList"
@update:selection="onCustomSelectionChange"
>
<template #header> </template>
<Column headerStyle="width: 2rem">
<Column>
<template #body="{ data }">
<RadioButton
v-model="customSelection"
variant="filled"
:inputId="data.id"
:value="data"
variant="filled"
@change="onCustomSelectionChange(data)"
/>
</template>
</Column>
<Column
v-for="(col, index) in selectedColumns"
:field="col.field"
:header="col.header"
:sortable="col.field !== 'stats'"
:key="index"
:style="`width: ${getColumnWidth(col.field)}%`"
>
<Column sortable>
<template #header>Configuration name</template>
<template #body="{ data }">{{ data.name }}</template>
</Column>
<Column sortable>
<template #header>Source</template>
<template #body="{ data }">{{ data.source }}</template>
</Column>
<Column sortable>
<template #header>Value</template>
<template #body="{ data }">
<template v-if="col.field === 'name'">
{{ data.name }}
</template>
<template v-if="col.field === 'source'">
{{ data.source }}
</template>
<template v-if="col.field === 'expression'">
<section class="inline-flex gap-1">
<span class="value-label">Constants</span>
<span class="value">{{ numberToNist(data.expression) || data.expression }}</span>
</section>
</template>
<span class="value-label">Constants</span>
{{ numberToNist(data.expression) || data.expression }}
</template>
</Column>
<ColumnGroup type="footer">
Expand Down Expand Up @@ -85,25 +77,25 @@
</ColumnGroup>
</DataTable>
<template #footer>
<Button label="Apply selected value" @click="applySelectedValue" :disabled="!selection" />
<Button label="Apply selected value" :disabled="!selection" @click="applySelectedValue" />
<Button label="Cancel" severity="secondary" outlined @click="emit('close-modal')" />
</template>
</tera-modal>
</template>

<script setup lang="ts">
import { numberToNist } from '@/utils/number';
import TeraInputText from '@/components/widgets/tera-input-text.vue';
import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
import { DistributionType } from '@/services/distribution';
import { ref } from 'vue';
import Button from 'primevue/button';
import TeraModal from '@/components/widgets/tera-modal.vue';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import Row from 'primevue/row';
import DataTable from 'primevue/datatable';
import ColumnGroup from 'primevue/columngroup';
import RadioButton from 'primevue/radiobutton';
import Row from 'primevue/row';
import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
import TeraInputText from '@/components/widgets/tera-input-text.vue';
import TeraModal from '@/components/widgets/tera-modal.vue';
import { numberToNist } from '@/utils/number';
import { DistributionType } from '@/services/distribution';
const props = defineProps<{
id: string;
Expand All @@ -112,11 +104,6 @@ const props = defineProps<{
}>();
const otherValueList = ref(props.otherValueList);
const columns = ref([
{ field: 'name', header: 'Configuration name' },
{ field: 'source', header: 'Source' },
{ field: 'expression', header: 'Value' }
]);
const emit = defineEmits(['update-expression', 'update-source', 'close-modal']);
Expand All @@ -126,7 +113,6 @@ const customConstant = ref(0);
const numberOptions = [DistributionType.Constant, DistributionType.Uniform];
const selectedColumns = ref(columns.value);
const customSelection = ref(false);
const selection = ref<null | { id?: string; source?: string; constant?: number }>(null);
Expand All @@ -141,19 +127,6 @@ const onCustomSelectionChange = (val) => {
}
};
function getColumnWidth(columnField: string) {
switch (columnField) {
case 'name':
return 40;
case 'source':
return 20;
case 'expression':
return 100;
default:
return 100;
}
}
function applySelectedValue() {
emit('update-expression', { id: props.id, value: selection.value?.constant });
emit('update-source', { id: props.id, value: selection.value?.source });
Expand All @@ -162,26 +135,34 @@ function applySelectedValue() {
</script>

<style scoped>
.value-label {
color: var(--surface-600);
padding-right: 1rem;
/* Override PrimeVue styles */
:deep(.p-datatable-table) th {
padding: var(--gap-4);
width: 100%;
}
.value {
color: var(--surface-900);
:deep(.p-datatable-table) th:nth-of-type(1) {
width: 2rem;
}
:deep(.p-datatable-table) th:nth-of-type(2) {
width: 40%;
}
:deep(.p-datatable-table) th:nth-of-type(3) {
width: 20%;
}
.value-label {
color: var(--text-color-subdued);
padding-right: var(--gap-4);
}
.custom-input-label {
align-items: center;
display: flex;
justify-content: left;
align-items: center;
padding-right: 1rem;
padding-right: var(--gap-4);
}
.custom-input {
height: 100%;
}
:deep(input) {
margin-top: 1rem;
}
</style>
Loading

0 comments on commit a1d2f1b

Please sign in to comment.