multi-site-simulators

A widget to simulate shares in a french cooperative (SCOP).

That's a widget you can include in any html page...

---

How to integrate widgets

Widgets need two files in order to work :

• app.js
• app.css

Add those two files to your html head, like this if the widget code is deployed on https://multi-site-simulator-test.netlify.app:

<script src="https://multi-site-simulator-test.netlify.app/js/app.js" type="text/javascript"></script>

<link type="text/css" href="ttps://multi-site-simulator-test.netlify.app/js/app.css" rel="stylesheet">

Widgets can then be called directly into the page as custom html elements.

---

Widget config

The widget's tag is : <multi-shares-simulator/>

The widget takes several parameters, following this structure :

  <multi-shares-simulator 
    locale="fr"
    cooperative="MultiPass"
    partvalue="25"
    minbenefs="0"
    benefs="100000"
    repart='{
      "reserves":40,
      "participation":50,
      "dividendes":10
    }'
    team='[
      { "name":"Joe Black", "parts":100, "workTime":100, "yearTime": 12 }, 
      { "name":"Julian Assange", "parts":100, "workTime":100, "yearTime": 12 }, 
      { "name":"Thomas Piketti", "parts":40, "workTime":40, "yearTime": 7 }, 
      { "name":"Pierre Larrouturou", "parts":100, "workTime":60, "yearTime": 7 }, 
      { "name":"Quentin Tarantino", "parts": 100, "workTime":80, "yearTime": 7 }
    ]'
  />

---

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

---

Stack

Technologies used for multi-site-simulator are the followiing :

• Vue.js - js framework ;
• Buefy - vue css framework based on Bulma css framework ;
• vue-custom-element - custom web component wrapper for vue.js ;

---

Resources

• https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97
• GitHub - karol-f/vue-custom-element: Vue Custom Element - Web Components' Custom Elements for Vue.js
• https://innovation.enova.com/building-an-embeddable-micro-frontend-with-vue-js/

---

Deployment