From 5292af6933977d1fa87e5678ac27bb5a759daad8 Mon Sep 17 00:00:00 2001
From: STEINNI <nicolas.stein@ext.ec.europa.eu>
Date: Fri, 19 Sep 2025 16:09:03 +0000
Subject: [PATCH] starting with snap...

---
 app/assets/styles/app.css                   |  2 +-
 app/views/dashboards/MainDashboardView.html | 13 +++++++---
 app/views/dashboards/MainDashboardView.js   | 28 ++++++++++++++++++++-
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css
index 28bc96d..e1ec2e6 100755
--- a/app/assets/styles/app.css
+++ b/app/assets/styles/app.css
@@ -178,7 +178,7 @@ body[eicapp] {
     margin: 0;
     padding: 0 0 var(--eicui-base-spacing-s) 0;
     overflow: visible;
-    height: auto;
+    height: 100%;
 }
 
 [eicapp] .app-content-thesaurus {
diff --git a/app/views/dashboards/MainDashboardView.html b/app/views/dashboards/MainDashboardView.html
index e238e97..9837670 100644
--- a/app/views/dashboards/MainDashboardView.html
+++ b/app/views/dashboards/MainDashboardView.html
@@ -1,8 +1,13 @@
+<style>
+    article.mainDashboard{ height:100%; }
+    article.mainDashboard>section:first-of-type{ 
+        height:100%; 
+        background-color: #333;
+    }
+</style>
+
 <article eiccard media class="mainDashboard">
-    <header>
-        <h1>Simulation Main dashboard</h1>
-    </header>
     <section>
-        hello world
+        <svg class="stb" width="100%" height="100%"></svg>
     </section>
 </article>
diff --git a/app/views/dashboards/MainDashboardView.js b/app/views/dashboards/MainDashboardView.js
index 00297d6..6730053 100644
--- a/app/views/dashboards/MainDashboardView.js
+++ b/app/views/dashboards/MainDashboardView.js
@@ -4,6 +4,7 @@ class MainDashboardView extends EICDomContent {
         super()
         Object.assign(this, app.helpers.activeAttributes)
         //this.tileMarkup = app.Assets.Store.html['/app/assets/html/mailing/tile.html']
+        this.snap = null
     }
 
     DOMContentLoaded(options) {        
@@ -11,7 +12,15 @@ class MainDashboardView extends EICDomContent {
         const components = ui.eicfy(this.el)       
         this.setupTriggers(components)        
         this.setupRefs(components)
-        
+        this.snap  = Snap("svg.stb");
+        var agent = this.snap.circle(150, 150, 20);
+        agent.attr({
+            id: 'agent42',
+            fill: "#BFB",
+            stroke: "#0A0",
+            strokeWidth: 2
+        });
+        setTimeout(this.moveit.bind(this), 3000);
     }
 
     DOMContentFocused(options) { 
@@ -23,6 +32,23 @@ class MainDashboardView extends EICDomContent {
     }
 
     DOMContentBlured(options) { this.wasBlured = true }
+
+    moveit(){
+        var myCircle = this.snap.select('#agent42')
+
+        var newx = parseInt(myCircle.attr('cx')) + 600
+        var newy = parseInt(myCircle.attr('cy')) + 200
+
+        // animate translate
+        myCircle.animate(
+            {
+                cx: newx,
+                cy: newy,
+            },
+            1000,                          // duration in ms
+            mina.linear                     // easing
+        )
+    }
 }
 
 app.registerClass('MainDashboardView', MainDashboardView)