admin/hermione-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 2: Update Hermione layout

Browse Source
This commit is contained in:
Ferrelli, Emanuele
2024-11-21 07:30:22 +00:00
parent 207e41c36d 08115a68be
commit 8301ee2dff
10 changed files with 143 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/CiaFlowCodeViewer.vue
View File

@@ -7,9 +7,9 @@ import Dialog from 'primevue/dialog'
import { nextTick, onMounted, ref, toRefs } from 'vue'
import ClassNode from './ClassNode.vue'
import { useLayout } from './useLayout'
import { defineProps } from 'vue'
import 'vue3-markdown/dist/style.css'
import { UserPrefStore } from '@/stores/UserPrefStore.js';
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow()
@@ -22,6 +22,7 @@ const { graph, layout, previousDirection } = useLayout()
const dialogCodeVisible = ref(false)
const userPrefStore = UserPrefStore();
//66f55e4b2894530b1c154f69
const props = defineProps({
@@ -59,11 +60,9 @@ function layoutGraph(direction) {
}
function defineNodes() {
var tmpNode=[]
var tmpEdges=[]
var app = {'name':'Apollo'}
var tmpEdges = []
var app = { name: userPrefStore.getSelApp.fe_name }
tmpNode.push({
id: app.name,
data: { label: app.name },

35
src/components/FileFlowViewer.vue
View File

@@ -212,18 +212,35 @@ function defineNodes() {
fill:#fffffb
}
.vue-flow__node-default {
border: 1px solid #292524;
padding: 10px;
border-radius: 5px;
background: #f5f5f5;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 10px;
max-width: 250px;
min-width: 200px;
word-wrap: break-word;
overflow-wrap: break-word
}
.vue-flow__node-class-node {
border:1px solid #dc07bc;
padding:10px;
border: 1px solid #a100ff;
padding: 10px;
border-radius: 5px;
background:#f5f5f5;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
gap:10px;
max-width:250px;
background: #f5f5f5;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 10px;
max-width: 250px;
min-width: 200px;
word-wrap: break-word;
overflow-wrap: break-word
}
</style>

2
src/components/SingleClassViewer.vue
View File

@@ -40,7 +40,7 @@
</div>
<div v-if="loadingStore.re_loading" class="flex justify-center">
<jellyfish-loader :loading="loadingStore.re_loading" scale="1" />
<jellyfish-loader :loading="loadingStore.re_loading" color="#a100ff" scale="1"/>
<!--<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>-->
</div>
<div v-if="!loadingStore.re_loading">

4
src/layout/AppConfigurator.vue
View File

@@ -32,7 +32,7 @@ const primaryColors = ref([
{ name: 'sky', palette: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' } },
{ name: 'blue', palette: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' } },
{ name: 'indigo', palette: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' } },
{ name: 'violet', palette: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' } },
{ name: 'violet', palette: { 50: '#a100ff', 100: '#a100ff', 200: '#a100ff', 300: '#a100ff', 400: '#a100ff', 500: '#a100ff', 600: '#a100ff', 700: '#a100ff', 800: '#a100ff', 900: '#a100ff', 950: '#a100ff' } },
{ name: 'purple', palette: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' } },
{ name: 'fuchsia', palette: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' } },
{ name: 'pink', palette: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' } },
@@ -66,7 +66,7 @@ const surfaces = ref([
},
{
name: 'viva',
palette: { 0: '#ffffff', 50: '#f3f3f3', 100: '#e7e7e8', 200: '#cfd0d0', 300: '#b7b8b9', 400: '#9fa1a1', 500: '#87898a', 600: '#6e7173', 700: '#565a5b', 800: '#3e4244', 900: '#262b2c', 950: '#0e1315' }
palette: { 0: '#d6d3d1', 50: '#f3f3f3', 100: '#e7e7e8', 200: '#cfd0d0', 300: '#b7b8b9', 400: '#9fa1a1', 500: '#87898a', 600: '#6e7173', 700: '#565a5b', 800: '#3e4244', 900: '#262b2c', 950: '#0e1315' }
},
{
name: 'ocean',

14
src/layout/AppTopbar.vue
View File

@@ -83,17 +83,17 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
<div class="layout-config-menu">
<div v-if="loadingStore.isLoading">
<!--<ProgressSpinner v-if="loadingStore.loadingType=='data'" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>-->
<JellyfishLoader v-if="loadingStore.loadingType=='ai'" scale="0.5" style="width: 25px; height: 10px; margin-right: 25px; margin-top:-5px" />
<RiseLoader v-if="loadingStore.loadingType=='data'" style="scale: 0.5; height: 10px; margin-top:5px"/>
<JellyfishLoader v-if="loadingStore.loadingType=='ai'" scale="0.5" color="#a100ff" style="width: 25px; height: 10px; margin-right: 25px; margin-top:-5px"/>
<RiseLoader v-if="loadingStore.loadingType=='data'" color="#a100ff" style="scale: 0.5; height: 10px; margin-top:5px"/>
</div>
<button @click="router.push('/mdcanvas')" class="layout-topbar-action" >
<!-- <button @click="router.push('/mdcanvas')" class="layout-topbar-action" >
<i class="pi pi-pencil"></i>
</button >
</button > -->
<div class="relative">
<!----> <button
<!-- <div class="relative">
<button
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
type="button"
class="layout-topbar-action layout-topbar-action-highlight"
@@ -101,7 +101,7 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
<i class="pi pi-palette"></i>
</button>
<AppConfigurator />
</div>
</div> -->

71
src/main.js
View File

@@ -9,10 +9,13 @@ import App from './App.vue';
import router from './router';
import Aura from '@primevue/themes/aura';
import Lara from '@primevue/themes/lara';
import Nora from '@primevue/themes/nora';
import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';
import { definePreset } from '@primevue/themes';
import BlockViewer from '@/components/BlockViewer.vue';
@@ -63,14 +66,78 @@ axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:80
console.log(import.meta.env.VITE_BACKEND_URL);
const app = createApp(App);
const pinia = createPinia()
const pinia = createPinia();
const preset = definePreset(Nora, {
semantic: {
primary: {
50: '{violet.50}',
100: '{violet.100}',
200: '{violet.200}',
300: '{violet.300}',
400: '{violet.400}',
500: '{violet.500}',
600: '{violet.600}',
700: '{violet.700}',
800: '{violet.800}',
900: '{violet.900}',
950: '{violet.950}'
},
colorScheme: {
light: {
surface: {
0: '#f3f3f3',
50: '{viva.50}',
100: '{viva.100}',
200: '{viva.200}',
300: '{viva.300}',
400: '{viva.400}',
500: '{viva.500}',
600: '{viva.600}',
700: '{viva.700}',
800: '{viva.800}',
900: '{viva.900}',
950: '{viva.950}'
},
formField: {
hoverBorderColor: '{primary.color}',
borderColor: '{primary.color}',
}
},
dark: {
surface: {
0: '#ffffff',
50: '{slate.50}',
100: '{slate.100}',
200: '{slate.200}',
300: '{slate.300}',
400: '{slate.400}',
500: '{slate.500}',
600: '{slate.600}',
700: '{slate.700}',
800: '{slate.800}',
900: '{slate.900}',
950: '{slate.950}'
},
formField: {
hoverBorderColor: '{primary.color}',
borderColor: '{primary.color}',
}
}
},
focusRing: {
width: '2px',
color: '{primary.color}',
offset: '1px'
}
}
});
app.use(pinia);
app.use(router);
app.use(PrimeVue, {
theme: {
preset: Nora,
preset: preset,
options: {
prefix: 'p',
darkModeSelector: '.app-dark',

6
src/stores/UserPrefStore.js
View File

@@ -61,11 +61,15 @@ export const UserPrefStore = defineStore('userpref_store', () => {
}
});
const getSelProj = computed(() => {
return selectedProject.value
})
const getSelApp = computed(() => {
return selectedApp.value
})
return { user,fetchUserData,userLoaded,selectedProject,availableApp,getSelApp,setSelectedApp,selectedApp, updateSelectedProject }
return { user,fetchUserData,userLoaded,selectedProject,availableApp,getSelApp,setSelectedApp,selectedApp, updateSelectedProject,getSelProj }
})

50
src/views/pages/ApplicationBrowser.vue
View File

@@ -5,26 +5,24 @@
</h1>
</div>
<div class="grid grid-cols-12 gap-2">
<div class="col-span-6">
<div class="card folder-tree ">
<h5>File Browser</h5>
<div v-if="nodes && nodes.length">
<div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></Button>
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></Button>
</div>
<Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
</div>
<div v-else class="self-center" style="flex: 1">
<Skeleton v-for="(config, index) in skeletonConfigs"
:key="index"
:width="config.width"
:height="config.height"
class="mb-2" />
<div class="flex gap-2">
<div class="card folder-tree">
<h5>File Browser</h5>
<div v-if="nodes && nodes.length" class="flex-1">
<div class="flex flex-wrap gap-2">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></Button>
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></Button>
</div>
<Tree :value="nodes" @nodeSelect="onNodeSelect" selectionMode="single" :expandedKeys="expandedKeys" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :filter="true" filterMode="lenient" class="w-full"></Tree>
</div>
</div>
<div v-else class="flex-skeleton">
<Skeleton v-for="(config, index) in skeletonConfigs"
:key="index"
:width="config.width"
:height="config.height"
class="mb-2 w-full" />
</div>
</div>
<div id ="card-flow-codeviewer" class="flex-1">
<div class="card flow-codeviewer">
<h5>File Explorer</h5>
@@ -44,15 +42,13 @@ import { LoadingStore } from '@/stores/LoadingStore.js';
import Tree from 'primevue/tree';
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { UserPrefStore } from '../../stores/UserPrefStore.js';
import { UserPrefStore } from '@/stores/UserPrefStore.js';
const nodes = ref(null)
const expandedKeys = ref({});
const selectedFile = ref({})
const router = useRouter();
const userPrefStore = UserPrefStore();
//const selectedApp = userPrefStore.getSelApp;
//const application=ref(selectedApp.fe_name)
const loadingStore = LoadingStore()
onMounted(() => {
@@ -92,7 +88,7 @@ function onNodeSelect(e){
selectedFile.value = e.key
}
console.log(e)
}
};
const expandAll = () => {
@@ -169,7 +165,13 @@ watch(selectedFile, () => {
width: 100%;
}
.flow-codeviewer{
height:75vh
.flow-codeviewer {
height: 75vh;
}
.flex-skeleton {
flex: 1;
min-width: 350px;
text-align: center;
}
</style>

4
src/views/pages/ScenarioExec.vue
View File

@@ -51,7 +51,7 @@
</div>
<div v-if="loading_data" class="flex flex-col items-center">
<div class="flex justify-center">
<div class="flex justify-center mt-4">
<jellyfish-loader :loading="loadingStore.exectuion_loading" scale="1" color="#A100FF" />
</div>
<div v-if="scenario_response_message && scenario_response_message.includes('-')">
@@ -60,7 +60,7 @@
<div v-else>
Starting execution...
</div>
<div class="flex justify-center">
<div class="flex justify-center" style="margin-bottom: 30px;">
<p>Time elapsed:&nbsp;</p>
<div id="timer" class="timer">00:00</div>
</div>

1
src/views/pages/ScenarioList.vue
View File

@@ -15,6 +15,7 @@
v-model="scenario_store.filterString"
size="medium"
variant="filled"
style="border: 1px solid #a100ff"
/>
</div>