Skip to content

Commit

Permalink
quick tour
Browse files Browse the repository at this point in the history
  • Loading branch information
@dragos-eu
dragos-eu committed Nov 28, 2024
1 parent 39669cc commit 67f78a0
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 14 deletions.
117 changes: 112 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,14 +117,121 @@
<!-- Top menu -->
<div class="mx-3 my-2">
<b-nav tabs>
<b-nav-item href="#" @click="doShow('distribution')">{{$t("mainmenu.distribution")}}</b-nav-item>
<b-nav-item href="#" @click="doShow('codelists')">{{$t("mainmenu.codelists")}}</b-nav-item>
<b-nav-item href="#" @click="doShow('uuid')">{{$t("mainmenu.uuid")}}</b-nav-item>
<b-nav-item href="#" @click="doShow('model')">{{$t("mainmenu.model")}}</b-nav-item>
<b-nav-item href="#" @click="doShow('service')">{{$t("mainmenu.service")}}</b-nav-item>
<b-nav-item id="pov-distribution" href="#" @click="doShow('distribution')">{{$t("mainmenu.distribution")}}</b-nav-item>
<b-nav-item id="pov-codelists" href="#" @click="doShow('codelists')">{{$t("mainmenu.codelists")}}</b-nav-item>
<b-nav-item id="pov-uuid" href="#" @click="doShow('uuid')">{{$t("mainmenu.uuid")}}</b-nav-item>
<b-nav-item id="pov-view" href="#" @click="doShow('model')">{{$t("mainmenu.model")}}</b-nav-item>
<b-nav-item id="pov-examples" href="#" @click="doShow('service')">{{$t("mainmenu.service")}}</b-nav-item>
</b-nav>
<!-- Main content here -->
<component v-bind:is="mainComponent" ref="mainComponent"></component>

<b-popover target="pov-distribution" triggers="" :show.sync="povDistribution" placement="bottom" container="app" ref="povdist">
<template #title>
Section description
</template>
<div>
<b-row class="my-2">
<b-col>
Export ESPD EDM artifacts allow you to select ESPD version and download Excel files for Code Lists and for Model and Data Structure.
The Code Lists can be downloaded in XML gnericode format as archive.
</b-col>
</b-row>
<b-row>
<b-col>
<b-button @click="showNext(0)" size="sm" variant="warning">Cancel</b-button>
</b-col>
<b-col class="text-right">
<b-button @click="showNext(1)" size="sm" variant="primary">Next</b-button>
</b-col>
</b-row>
</div>
</b-popover>

<b-popover target="pov-codelists" triggers="" :show.sync="povCodeLists" placement="bottom" container="app" ref="povcl">
<template #title>
Section description
</template>
<div>
<b-row class="my-2">
<b-col>
Explore ESPD Code Lists in detail. You can select ESPD version and specific Code List. You can explore the elements.
We have external (EU Vocabularies) and technical (ESPD) Code Lists. You can view and download each specific Code List.
</b-col>
</b-row>
<b-row>
<b-col>
<b-button @click="showNext(0)" size="sm" variant="warning">Cancel</b-button>
</b-col>
<b-col class="text-right">
<b-button @click="showNext(2)" size="sm" variant="primary">Next</b-button>
</b-col>
</b-row>
</div>
</b-popover>

<b-popover target="pov-uuid" triggers="" :show.sync="povUUID" placement="bottom" container="app" ref="povuuid">
<template #title>
Section description
</template>
<div>
<b-row class="my-2">
<b-col>
Explore ESPD - eCERTIS integration for Exclusion Grounds and Selection Criteria for each ESPD version.
You can check live the details for each criteria directly in eCertis.
Extensive search based on any text part of the elements.
</b-col>
</b-row>
<b-row>
<b-col>
<b-button @click="showNext(0)" size="sm" variant="warning">Cancel</b-button>
</b-col>
<b-col class="text-right">
<b-button @click="showNext(3)" size="sm" variant="primary">Next</b-button>
</b-col>
</b-row>
</div>
</b-popover>
<b-popover target="pov-view" triggers="" :show.sync="povView" placement="bottom" container="app" ref="povview">
<template #title>
Section description
</template>
<div>
<b-row class="my-2">
<b-col>
View ESPD Model in web fotmat. You can explore and evaluate User Experience for ESPD versions that are not
implemented yet or do not have a publcly availavle ESPD Service.
</b-col>
</b-row>
<b-row>
<b-col>
<b-button @click="showNext(0)" size="sm" variant="warning">Cancel</b-button>
</b-col>
<b-col class="text-right">
<b-button @click="showNext(4)" size="sm" variant="primary">Next</b-button>
</b-col>
</b-row>
</div>
</b-popover>
<b-popover target="pov-examples" triggers="" :show.sync="povExamples" placement="bottom" container="app" ref="povexam">
<template #title>
Section description
</template>
<div>
<b-row class="my-2">
<b-col>
Create ESPD Request and ESPD Response documents in order to test and evaluate the possible implemetation of latest
ESPD version. We strongly recommend to updated to the latest version of ESPD. This section is developed for both
ESPD Service Implementers and ESPD actors (Contractig Authority and Economic Operator).
</b-col>
</b-row>
<b-row>
<b-col>
<b-button @click="showNext(0)" size="sm" variant="warning">Done</b-button>
</b-col>
</b-row>
</div>
</b-popover>
</div>
</main>
<!--<footer class="footer">-->
Expand Down
42 changes: 42 additions & 0 deletions src/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,11 @@ window.app = new Vue({
currentFooter: 'publicFooter',
mainComponent: 'home',
locales: ['eu', 'fr', 'ro'],
povDistribution: false,
povCodeLists: false,
povUUID: false,
povView: false,
povExamples: false
},

methods: {
Expand All @@ -70,6 +75,43 @@ window.app = new Vue({
this.showLayout({ currentHeader: 'publicHeader', mainComponent: component, currentFooter: 'publicFooter' })
console.log(`show ${component}`)
},
showNext(step){
this.povDistribution = false
this.povCodeLists = false
this.povUUID = false
this.povView = false
this.povExamples = false
switch (step) {
case 0:
//
break;
case 1:
this.povCodeLists = true
break;
case 2:
this.povUUID = true
break;
case 3:
this.povView = true
break;
case 4:
this.povExamples = true
break;

default:
this.povDistribution = false
this.povCodeLists = false
this.povUUID = false
break;
}
}
},

mounted(){
this.$root.$on('bv::popover::show', bvEventObj => {
this[bvEventObj] = true
console.log('bvEventObj:', bvEventObj)
})
}

})
Expand Down
23 changes: 14 additions & 9 deletions src/js/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,29 @@ Vue.component("home",{
show: true
}
},
methods: {
quickTour(){
this.$root.$emit('bv::popover::show', 'povDistribution')
}
},

template: `
<b-jumbotron class="mt-2" >
<template #header>ESPD Demo Site</template>
<template #header>
ESPD Demo Site
</template>
<template #lead>
Your ESPD journey starts here! We would like to guide and assist you in succeeding in your ESPD Service implementation.
</template>
<hr class="my-4">
<p>ESPD Demo website is a collection of tools that allow you to download ESPD artefacts, explore the ESPD model, and generate ESPD request and response examples. The site is provided for educational and training purposes only - it is not an implementation of an ESPD Service. The ESPD Demo is a playground that you can explore to get familiar with the ESPD, follow the user experience, and generate ESPD documents.</p>
<p>
We would like your feedback. For any issues or comments you have with or about this site please contact us via email at <a href="mailto:[email protected]">[email protected]</a>, or <a href="https://github.com/OP-TED/espd-demo/issues">open a ticket on GitHub</a>. Feel free to download or use any parts of the code of this site from our <a href="https://github.com/OP-TED/espd-demo">GitHub repository</a>. The code is distributed under the <a href="https://github.com/OP-TED/espd-demo/blob/main/LICENCE">EUROPEAN UNION PUBLIC LICENCE v. 1.2</a>.</p>
</template>
<hr class="my-4">
<p>
Your ESPD journey starts here! We would like to guide and assist you in succeeding in your ESPD Service implementation.
</p>
<p>If you are new to the ESPD Demo site, we recommend that you take our quick tour.</p>
<b-button @click="quickTour" variant="primary">Start Quick Tour</b-button>
</b-jumbotron>
`
Expand Down

0 comments on commit 67f78a0

Please sign in to comment.