Interface SAV

src/App.vue

@@ -1,9 +1,15 @@
 <script setup>
 import TicketList from '@/components/TicketList.vue'
-import {computed, onMounted, ref} from 'vue';
+import {computed, onMounted, ref, watch} from 'vue';
 import {Tab} from 'bootstrap'
 import TicketApi from "@/services/TicketApi.js";
 
+const filter = ref('ALL');
+
+const apiUrl = computed(() => {
+  return '/App/api.php?prj=pharmamp' + ((filter.value !== 'ALL') ? '&filter=' + filter.value : '')
+})
+
 const tickets = ref({});
 
 const newTickets = computed(() => {
@@ -23,16 +29,37 @@ const mapListOfTickets = (tickets) => {
       [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket.advisor, ticket.datetime, ticket.first_name + ' ' + ticket.last_name, ticket.is_customer]);
 }
 
+const getTickets = async () => {
+
+  if (import.meta.env.DEV) {
+    console.log(apiUrl.value)
+  }
+
+  const response = await fetch(apiUrl.value)
+
+  if (import.meta.env.DEV) {
+    console.log(response.clone().text())
+  }
+
+  return response.json();
+}
+
 onMounted(async () => {
 
-  tickets.value = await TicketApi.getTickets()
+  tickets.value = await getTickets()
 
   const myInterval = setInterval(async function () {
-    tickets.value = await TicketApi.getTickets()
+    tickets.value = await getTickets()
-  }, 180000);
+  }.bind(apiUrl), 180000);
 
 })
 
+watch(filter, async (to, from) => {
+  if (to !== from) {
+    tickets.value = await getTickets()
+  }
+});
+
 
 </script>
 
@@ -47,20 +74,34 @@ onMounted(async () => {
 
         <ul class="nav">
           <li class="nav-item">
-        <a class="nav-link active" aria-current="page" href="#"><i class="fas fa-plus-circle"></i> Ajouter une fiche</a>
+            <a class="nav-link active" aria-current="page" href="#"
+               onclick="alert('Non disponible dans cette version beta')"><i class="fas fa-plus-circle"></i> Ajouter une
+              fiche</a>
           </li>
           <li class="nav-item">
-        <a class="nav-link" href="#"><i class="fa-solid fa-magnifying-glass"></i> Recherche de fiches</a>
+            <a class="nav-link" href="#" onclick="alert('Non disponible dans cette version beta')"><i
+                class="fa-solid fa-magnifying-glass"></i> Recherche de
+              fiches</a>
           </li>
           <li class="nav-item">
-        <a class="nav-link" href="#"> <i class="fa-solid fa-file-medical"></i> Livraisons ordonnances</a>
+            <a class="nav-link" href="#" onclick="alert('Non disponible dans cette version beta')"> <i
+                class="fa-solid fa-file-medical"
+            ></i> Livraisons
+              ordonnances</a>
           </li>
           <li class="nav-item">
-        <a class="nav-link"><i class="fa-solid fa-bell-concierge"></i> Accueil Comptoir</a>
+            <a class="nav-link" href="#" onclick="alert('Non disponible dans cette version beta')"><i
+                class="fa-solid fa-bell-concierge"
+            ></i> Accueil
+              Comptoir</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#" onclick="alert('Non disponible dans cette version beta')"><i
+                class="fa-solid fa-box-archive"></i> Archiver les fiches en cours ?
+            </a>
           </li>
         </ul>
-        Archiver les fiches en cours ? <br/>
+
-        Filtrer les fiches par origine : Toute
 
       </div>
     </div>
@@ -83,6 +124,20 @@ onMounted(async () => {
         <div class="tab-content" id="ticketsListContent">
           <div class="tab-pane show active" id="new" role="tabpanel" tabindex="0">
 
+            <div class="mb-3 row">
+              <label for="origineFilter" class="col-auto col-form-label fw-bold"><i class="fa-solid fa-filter"></i>
+                Filter par origine</label>
+              <div class="col-auto">
+                <select class="form-select" id="origineFilter" v-model="filter">
+                  <option value="ALL">Toute</option>
+                  <option value="ORDER">Commande</option>
+                  <option value="">Fiche contact</option>
+                  <option value="I_AM_HERE">Je suis là...</option>
+                  <option value="ORDONNANCE">Ordonnance</option>
+                </select>
+              </div>
+            </div>
+
             <ticket-list :rows="newTickets" v-if="newTickets.length >0"></ticket-list>
             <div class="alert alert-success" v-else>Aucune fiche</div>
           </div>

src/assets/style-retro-comp.css

@@ -0,0 +1,776 @@
+/* $Id: style.css 12141 2019-02-26 15:47:14Z ghislain $ */
+/* - Mise en forme des onglets - */
+
+h1.prospection{
+    display: none !important;
+}
+
+#div_id_crm
+{
+    float: left;
+    clear: both;
+    width: 100%;
+}
+.yui-skin-sam .yui-navset .yui-nav, .yui-skin-sam .yui-navset .yui-navset-top .yui-nav
+{
+    padding: 0 25px !important;
+    border-width: 0 !important;
+}
+.yui-skin-sam .yui-navset .yui-content
+{
+    background-color: white !important;
+}
+.yui-skin-sam .yui-navset .yui-content, .yui-skin-sam .yui-navset .yui-navset-top .yui-content
+{
+    border: 0 !important;
+    padding: 0 !important;
+}
+.yui-skin-sam .yui-navset .yui-nav .selected, .yui-skin-sam .yui-navset .yui-navset-top .yui-nav .selected
+{
+    margin-bottom: 0 !important;
+}
+
+.yui-skin-sam .yui-navset .yui-nav a, .yui-skin-sam .yui-navset .yui-navset-top .yui-nav a
+{
+    border-width: 1px 1px 0 1px !important;
+    border-radius: 5px 5px 0 0 !important;
+}
+.yui-skin-sam .yui-navset .yui-nav a:hover, .yui-skin-sam .yui-navset .yui-nav a:focus
+{
+    background-image: none !important;
+    background-color: #f0f0f0 !important;
+    background-image:linear-gradient(#F0F0F0, #FFFFFF) !important;
+    background-image:-moz-linear-gradient(#F0F0F0, #FFFFFF) !important;
+    background-image:-webkit-linear-gradient(#F0F0F0, #FFFFFF) !important;
+    background-image:-o-linear-gradient(#F0F0F0, #FFFFFF) !important;
+    background-image:-ms-linear-gradient(#F0F0F0, #FFFFFF) !important;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F0F0F0', endColorstr='#FFFFFF') !important;
+    background-position: top left !important;
+}
+.yui-skin-sam .yui-navset .yui-nav .selected a, .yui-skin-sam .yui-navset .yui-nav .selected a:focus, .yui-skin-sam .yui-navset .yui-nav .selected a:hover
+{
+    background-image: none !important;
+    background-color: #FF6033 !important;
+    border-color: #FF6033 !important;
+    font-weight: bold !important;
+    background-image:linear-gradient(#FF9063, #FF6033) !important;
+    background-image:-moz-linear-gradient(#FF9063, #FF6033) !important;
+    background-image:-webkit-linear-gradient(#FF9063, #FF6033) !important;
+    background-image:-o-linear-gradient(#FF9063, #FF6033) !important;
+    background-image:-ms-linear-gradient(#FF9063, #FF6033) !important;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF9063', endColorstr='#FF6033') !important;
+
+    background-position: top left !important;
+}
+
+.yui-skin-sam .yui-navset .yui-nav a em, .yui-skin-sam .yui-navset .yui-navset-top .yui-nav a em
+{
+    border-width: 0 !important;
+}
+.yui-skin-sam .yui-navset .yui-nav .selected a em
+{
+    border-width: 0 !important;
+}
+
+
+
+.msg {font-size:11.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px;color:#000000;text-decoration:none}
+.titre {font-family:Verdana, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;color:#000000;}
+.txt {font-size:11.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px; color:#000000;}
+.txtpetit {font-size:10px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:15px; color:#000000;}
+
+#content p {font-size:11.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px; color:#000000;}
+
+#content td {font-size:11.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px; color:#000000;}
+#content a.td {font-size:11.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px; color:#000000;}
+#content td.all {border-color: black; font-size:11.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px; color:#000000;}
+#content th.all {border-color: black; }
+
+#content th {font-size:10.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px; color:#000000;padding: 6px;}
+#content td {font-size:10.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px; color:#000000;padding: 4px;}
+#content li {text-align:justify; font-size:11.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px; color:#000000;}
+
+#action_prospection li {
+    font-size: inherit;
+    text-align: left;
+}
+
+
+table.all { border: 1px solid black; border-collapse:collapse; }
+
+.langues {
+    font-family: Tahoma, Arial;
+    font-size: 11px;
+    font-weight: bold;
+    color: #333333;
+    text-decoration: none;
+}
+a.langues:hover {
+
+    font-family: Tahoma, Arial;
+    font-size: 11px;
+    font-weight: bold;
+    color: #FF6600;
+    text-decoration: none;
+}
+.titre-tab {
+
+    font-family: Tahoma, Arial;
+    font-size: 14px;
+    font-weight: bold;
+    color: #000000;
+    text-decoration: none;
+}
+.menus {
+    font-family: Tahoma, Arial;
+    font-size: 11px;
+    font-weight: bold;
+    color: #333333;
+    text-decoration: none;
+}
+a.menus:hover {
+    color: #FFFFFF;
+    text-decoration: none;
+    background-color: #FF6033;
+}
+.contour-pointille {
+    border: 1px dotted #FF6033;
+}
+.contour-pointille-droit {
+    border-bottom-width: 2px;
+    border-bottom-style: dotted;
+    border-bottom-color: #FF6033;
+}
+.contours-bord {
+    border-right-width: 1px;
+    border-left-width: 1px;
+    border-right-style: solid;
+    border-left-style: solid;
+    border-right-color: #333333;
+    border-left-color: #666666;
+}
+.fond {
+    background-color: #3333FF;
+}
+.projets {
+    color: #FF6600;
+    font-family: Tahoma, Arial;
+    font-size: 12px;
+    font-weight: bold;
+    text-decoration: none;
+}
+.textes {
+    font-family: Tahoma, Arial;
+    font-size: 12px;
+    font-weight: normal;
+    color: #666666;
+    text-decoration: none;
+}
+.rubriques {
+
+    font-family: Tahoma, Arial;
+    font-size: 11px;
+    font-weight: bold;
+    color: #FFFFFF;
+    text-decoration: none;
+}
+.rubriquesclair {
+
+
+    font-family: Tahoma, Arial;
+    font-size: 11px;
+    font-weight: bold;
+    color: #000000;
+    text-decoration: none;
+}
+.sous-menu {
+
+    font-family: Tahoma, Arial;
+    font-size: 10px;
+    font-weight: normal;
+    color: #333333;
+    text-decoration: none;
+}
+.contour-tableaux {
+    border: 1px solid #8CBAB2;
+}
+.separation-pointille {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: #FF9900;
+}
+.menus_pointille {
+    font-family: Tahoma, Arial;
+    font-size: 11px;
+    font-weight: bold;
+    color: #333333;
+    text-decoration: none;
+    border-right-width: 2px;
+    border-right-style: dotted;
+    border-right-color: #8CBAB2;
+}
+.menus_pointille_blanc {
+
+    font-family: Tahoma, Arial;
+    font-size: 11px;
+    font-weight: bold;
+    color: #FFFFFF;
+    text-decoration: none;
+    border-right-width: 2px;
+    border-right-style: dotted;
+    border-right-color: #8CBAB2;
+}
+
+.menus_pointille .row_number {
+    font-size: 15px;
+    color: #000;
+    font-weight: bold;
+    cursor: help;
+    background-color: #97dad0;
+    border-radius: 30px;
+    padding: 1px 2px;
+    border: 1px solid #999;
+}
+
+
+tr.tr_head { background:url("/skin/jquery-ui/gulliver/images/ui-bg_glass_75_7eb8c6_1x400.png") repeat-x scroll 50% 50% #7EB8C6; }
+tr.tr_pair { background:#EFEFEF; }
+tr.tr_pair:hover { background:#FEAA4A;}
+tr.tr_impair { background:#ffffff;}
+tr.tr_impair:hover { background:#FEC17C; }
+
+
+/* ** COUCHE CSS DB ** */
+
+/* ** Titre ** */
+.main_title
+{
+    display: block;
+    clear: both;
+    color: #FF6033;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 28px;
+    padding: 0 10px;
+    margin: 0 0 15px 0;
+}
+.main_title span
+{
+
+}
+.main_title a
+{
+    color: #FF6033;
+    text-decoration: none;
+}
+
+.main_subtitle
+{
+    display: block;
+    clear: both;
+    color: black;
+    font-size: 14px;
+    font-weight: bold;
+    padding: 0 10px;
+    margin: 0 0 15px 0;
+}
+.main_subtitle a
+{
+    color: black;
+    text-decoration: none;
+}
+
+
+/* ** Slot ** */
+.main_slot
+{
+    display: block;
+    clear: both;
+    margin: 0 10px 20px 10px;
+    padding: 4px 9px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #999999;
+    border-radius: 5px 5px 5px 5px;
+}
+.main_slot a
+{
+    color: blue;
+    text-decoration: underline;
+}
+.main_slot a:hover
+{
+    color: #FF6033;
+}
+/* ** Sous-titre ** */
+.main_slot .subtitle
+{
+    display: block;
+    clear: both;
+    padding: 0 0 3px 0;
+    margin: 0 0 15px 0;
+
+    color: #FF6033;
+    font-size: 12px;
+    font-weight: bold;
+
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    border-color: #FF6033;
+}
+.main_slot .slot_content_text
+{
+    display: block;
+    clear: both;
+    margin: 0 0 15px 0;
+}
+.main_slot a.action_link
+{
+    font-size: 11px;
+    font-weight: bold;
+}
+
+
+/* ** Modèle de tableau ** */
+.model_default_table_area
+{
+    display: block;
+    clear: both;
+    margin: 0 0 15px 0;
+    padding: 0 10px;
+}
+.model_default_table_area table
+{
+
+}
+.model_default_table_area th
+{
+    text-align: left;
+    font-size: 11px;
+    color: white;
+    background-color: teal;
+    font-weight: bold;
+    padding: 1px 5px;
+    border-width: 0 1px 3px 0;
+    border-style: solid;
+    border-color: transparent #E0E0E0 #D0D0D0 transparent;
+}
+.model_default_table_area th.first
+{
+    border-left-width: 0;
+    border-radius: 5px 0 0 0;
+}
+.model_default_table_area th.last
+{
+    border-right-width: 0;
+    border-radius: 0 5px 0 0;
+}
+.model_default_table_area th.wide100
+{
+    border-radius: 5px 5px 0 0;
+    border-right-width: 0;
+    border-left-width: 0;
+}
+.model_default_table_area th a
+{
+    color:white !important;
+}
+.model_default_table_area tbody
+{
+    font-size: 11px;
+}
+.model_default_table_area .left
+{
+    text-align: left;
+}
+.model_default_table_area .right
+{
+    text-align: right;
+}
+.model_default_table_area .center
+{
+    text-align: center;
+}
+.model_default_table_area .top
+{
+    vertical-align: top;
+}
+.model_default_table_area .middle
+{
+    vertical-align: middle;
+}
+.model_default_table_area .bottom
+{
+    vertical-align: bottom;
+}
+/* ** Cellule normale/default ** */
+.model_default_table_area td
+{
+    font-size: 11px;
+    padding: 6px 8px;
+    border-width: 0 1px 1px 0;
+    border-style: solid;
+    border-color: #E0E0E0;
+    background-color: white;
+}
+.model_default_table_area td.first
+{
+    border-left-width: 1px;
+}
+.model_default_table_area td.last
+{
+
+}
+.model_default_table_area.small_padding td
+{
+    padding: 4px 2px;
+}
+.model_default_table_area.small_padding_height td
+{
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+/* ** even/odd : 1 ligne sur 2 en couleur ** */
+.model_default_table_area tr.even td,
+.model_default_table_area tr.odd td
+{
+    border-width: 0 1px 1px 0;
+    border-color: white white #E0E0E0 white;
+}
+.model_default_table_area tr.even td
+{
+    background-color: #F0F0F0;
+}
+.model_default_table_area tr.even td.last
+{
+    border-right-color: #F0F0F0;
+}
+.model_default_table_area tr.odd td
+{
+    background-color: white;
+}
+
+/* ** ligne survolée ** */
+.model_default_table_area tr.hover td
+{
+    background-color: #FF6033;
+    color: white;
+}
+.model_default_table_area tr.hover td.last
+{
+    border-right-width: 0;
+}
+
+/* ** ligne cliquée ** */
+.model_default_table_area tr.active td
+{
+    background-color: #73797B;
+    color: white;
+}
+.model_default_table_area tr.active td.last
+{
+    border-right-width: 0;
+}
+
+
+.model_default_table_area td.color1
+{
+    color: #FF6033;
+    font-weight: bold;
+}
+.model_default_table_area td.color2
+{
+    color: #666666;
+    font-weight: bold;
+}
+
+
+
+.model_default_table_area td.subtitle_wide_td
+{
+    color: #FF6033;
+    font-size: 17px;
+    font-weight: bold;
+    padding-bottom: 10px;
+
+    border-width: 2px 1px 1px 1px;
+    border-color: #FF6033 #E0E0E0 #E0E0E0 #E0E0E0;
+}
+.model_default_table_area td.submit_wide_td
+{
+    padding-top: 15px;
+    padding-bottom: 15px;
+
+    border-width: 0 1px 3px 1px;
+    border-color: transparent #E0E0E0 #FF6033 #E0E0E0;
+}
+
+.model_default_table_area td .cell_subtitle
+{
+    display:block;
+    clear: both;
+    font-weight: bold;
+    font-size: 12px;
+    color: #FF6033;
+    line-height: 21px;
+    border-bottom: 2px solid #FF6033;
+}
+.model_default_table_area tr.hover td .cell_subtitle,
+.model_default_table_area tr.active td .cell_subtitle
+{
+    color: white;
+    border-bottom-color: white;
+}
+
+.model_default_table_area td a,
+.model_default_table_area th a
+{
+    color: blue;
+    text-decoration: underline;
+}
+.model_default_table_area td a:hover,
+.model_default_table_area th a:hover
+{
+    color: #FF6033;
+    text-decoration: underline;
+}
+
+.model_default_table_area tr.hover td a,
+.model_default_table_area tr.active td a
+{
+    color:white;
+    text-decoration: underline;
+}
+.model_default_table_area tr.hover td a:hover,
+.model_default_table_area tr.active td a:hover
+{
+    color:white;
+    text-decoration: underline;
+}
+
+
+.model_default_table_area .form_line,
+.main_slot .slot_content_text .form_line,
+.simple_text_area .form_line
+{
+    display: block;
+    clear: both;
+    padding: 4px 0;
+    margin: 0;
+}
+.model_default_table_area .form_line label,
+.main_slot .slot_content_text .form_line label,
+.simple_text_area .form_line label
+{
+    display: block;
+    clear: both;
+    font-size: 13px;
+    line-height: 21px;
+}
+.model_default_table_area .form_line .input_text,
+.main_slot .slot_content_text .form_line .input_text,
+.simple_text_area .form_line .input_text
+{
+    width: 180px; /* 190 */
+    height: 15px; /* 21 */
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 12px;
+    color: #333333;
+    padding: 2px 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #CCCCCC;
+    border-radius: 3px 3px 3px 3px;
+}
+.model_default_table_area .form_line .input_text.large,
+.main_slot .slot_content_text .form_line .input_text.large,
+.simple_text_area .form_line .input_text.large
+{
+    width: 270px; /* 280 */
+}
+.model_default_table_area .form_line .input_text.medium,
+.main_slot .slot_content_text .form_line .input_text.medium,
+.simple_text_area .form_line .input_text.medium
+{
+    width: 90px; /* 100 */
+}
+.model_default_table_area .form_line .input_text.small,
+.main_slot .slot_content_text .form_line .input_text.small,
+.simple_text_area .form_line .input_text.small
+{
+    width: 45px; /* 55 */
+}
+
+
+.model_default_table_area .form_line select,
+.main_slot .slot_content_text .form_line select,
+.simple_text_area .form_line select
+{
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 13px;
+    color: #333333;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #CCCCCC;
+    border-radius: 3px 0 0 3px;
+}
+.model_default_table_area .form_line select optgroup,
+.main_slot .slot_content_text .form_line select optgroup,
+.simple_text_area .form_line select optgroup
+{
+    font-size: 13px;
+    background-color: #ff6033;
+    font-style: normal;
+    color: white;
+    font-weight: bold;
+}
+.model_default_table_area .form_line select optgroup option,
+.main_slot .slot_content_text .form_line select optgroup option,
+.simple_text_area .form_line select optgroup option
+{
+    background-color: white;
+    color: #333333;
+    font-weight: normal;
+}
+.model_default_table_area .form_line .input_textarea,
+.main_slot .slot_content_text .form_line .input_textarea,
+.simple_text_area .form_line .input_textarea
+{
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 12px;
+    color: #333333;
+    padding: 2px 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #CCCCCC;
+    border-radius: 3px 3px 3px 3px;
+}
+.model_default_table_area .form_line.submit_line,
+.main_slot .slot_content_text .form_line.submit_line,
+.simple_text_area .form_line.submit_line
+{
+    margin: 15px 0;
+}
+.model_default_table_area .form_line.help,
+.main_slot .slot_content_text .form_line.help,
+.simple_text_area .form_line.help
+{
+    color: #999999;
+    line-height: 1em;
+    padding-top: 0;
+    padding-left: 5px;
+}
+
+
+.simple_text_area,
+.action_links_area
+{
+    display: block;
+    clear: both;
+    padding: 0 10px;
+}
+.simple_text_area.top,
+.action_links_area.top
+{
+    margin: 0 0 15px 0;
+}
+.simple_text_area.bottom,
+.action_links_area.bottom
+{
+    margin: 15px 0 0 0;
+}
+.simple_text_area.left,
+.action_links_area.left
+{
+    text-align: left;
+}
+.simple_text_area.center,
+.action_links_area.center
+{
+    text-align: center;
+}
+.simple_text_area.right,
+.action_links_area.right
+{
+    text-align: right;
+}
+.action_links_area a
+{
+    font-size: 11px;
+    color: black;
+    text-decoration: underline;
+    margin: 0 5px;
+}
+.action_links_area a.smaller
+{
+    font-size: 10px;
+    margin: 0 3px;
+}
+.action_links_area a.highlighted
+{
+    background-color: #FF6033;
+    color: white;
+    padding: 2px 5px;
+    text-decoration: none;
+    border-radius: 5px 5px 5px 5px;
+}
+.action_links_area a:hover
+{
+    color: #FF6033;
+    text-decoration: underline;
+}
+.action_links_area a:hover.highlighted
+{
+    background-color: #99CCCC;
+    color: black;
+    text-decoration: none;
+}
+
+
+
+/**** skin *****/
+
+
+.txt_color_0 {color: #FFC4BC; border-color: black;}
+.txt_color_1 {color: #FFFABF; border-color: black;}
+.txt_color_8 {color: #C4FFBF; border-color: black;}
+.txt_color_2 {color: #E8FFD4; border-color: black;}
+.txt_color_3 {color: #BFFFFF; border-color: black;}
+.txt_color_4 {color: #BFC6FF; border-color: black;}
+.txt_color_5 {color: #DEBFFF; border-color: black;}
+.txt_color_6 {color: #FFBFE8; border-color: black;}
+.txt_color_7 {color: #FFBFB2; border-color: black;}
+.td_color_0 {background: #FFC4BC; border-color: black;}
+.td_color_1 {background: #FFFABF; border-color: black;}
+.td_color_8 {background: #E8FFBF; border-color: black;}
+.td_color_2 {background: #BFFFD4; border-color: black;}
+.td_color_3 {background: #BFFFFF; border-color: black;}
+.td_color_4 {background: #BFC6FF; border-color: black;}
+.td_color_5 {background: #DEBFFF; border-color: black;}
+.td_color_6 {background: #FFBFE8; border-color: black;}
+.td_color_7 {background: #FFBFB2; border-color: black;}
+.td_color_action {background: #FFDBDB; border-color: black;}
+.td_color_bandeau {background: #FFDBDB; border-color: black;}
+.td_color_cli_to_com {background: #FFDBDB; border-color: black;}
+.td_color_com_to_cli {background: #BFC6FF; border-color: black;}
+.td_color_date {background: #FAD9CC; border-color: black;}
+.td_color_default {background: #CCD9FA; border-color: black;}
+.td_color_key {background: #8CBAB2; border-color: black;font-weight: bold;}
+.td_color_val {background: #DFDFDF; border-color: black;}
+.td_color_val_old {background: #BFFFD4; border-color: black;}
+.td_color_onglet_old {background: #E8FFAA; border-color: black;}
+.td_color_onglet {background: #BDDBD4; border-color: black;}
+
+.color_1 {background: #8CBAB2;}
+.color_2 {background: #DDFAF1;}
+.color_3 {background: #97DAD0;}
+.color_4 {background: #9EC7C8;}
+.color_5 {background: #C6DFDB;}
+
+.msg {font-size:10.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px;color:#000000;text-decoration:none}
+.titre {font-family:Verdana, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;color:#000000;}
+.txt {font-size:10.5px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:17px; color:#000000;}
+.txtpetit {font-size:10px;font-family:Verdana, Helvetica, Arial, sans-serif;line-height:15px; color:#000000;}
+
+
+#login_table td {padding:0;}

src/assets/style.scss

@@ -1,4 +1,62 @@
-@import "bootstrap/scss/bootstrap.scss";
+@import "bootstrap/scss/mixins/banner";
+@include bsBanner("");
+
+// scss-docs-start import-stack
+// Configuration
+@import "bootstrap/scss/functions";
+
+$font-size-root : '16px';
+
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Layout & components
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+
+
+#app {
+  @import "bootstrap/scss/type";
+  @import "bootstrap/scss/images";
+  @import "bootstrap/scss/containers";
+  @import "bootstrap/scss/grid";
+  @import "bootstrap/scss/tables";
+  @import "bootstrap/scss/forms";
+  @import "bootstrap/scss/buttons";
+  @import "bootstrap/scss/transitions";
+  @import "bootstrap/scss/dropdown";
+  @import "bootstrap/scss/button-group";
+  @import "bootstrap/scss/nav";
+  @import "bootstrap/scss/navbar";
+  @import "bootstrap/scss/card";
+  @import "bootstrap/scss/accordion";
+  @import "bootstrap/scss/breadcrumb";
+  @import "bootstrap/scss/pagination";
+  @import "bootstrap/scss/badge";
+  @import "bootstrap/scss/alert";
+  @import "bootstrap/scss/progress";
+  @import "bootstrap/scss/list-group";
+  @import "bootstrap/scss/close";
+  @import "bootstrap/scss/toasts";
+  @import "bootstrap/scss/modal";
+  @import "bootstrap/scss/tooltip";
+  @import "bootstrap/scss/popover";
+  @import "bootstrap/scss/carousel";
+  @import "bootstrap/scss/spinners";
+  @import "bootstrap/scss/offcanvas";
+  @import "bootstrap/scss/placeholders";
+}
+
+
+// Helpers
+@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+// scss-docs-end import-stack
+
 
 #app {
   @import "niceAdmin.scss";

src/main.js

@@ -4,6 +4,7 @@ import App from './App.vue'
 
 import './assets/style.scss'
 import './style.css'
+import './assets/style-retro-comp.css'
 
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 import '@fortawesome/fontawesome-free/css/solid.css'