up display of list account

public/stylesheets/style.css

@@ -17,8 +17,17 @@ a {
 select{
   padding:1rem;
   margin: 1em 0;
+  border: solid 3px transparent;
+}
+label {
+  float:left;
+  display: block;
+  width: 100%;
+  margin-top: 0.5rem;
+}
+input{
+  margin-bottom: 0.5rem;
 }
-
 .wip{
   color: grey;
   padding: 1rem;
@@ -35,3 +44,21 @@ select{
   cursor:pointer;
   border: solid 3px grey;
 }
+.images{
+  clear:both;
+  display: flex;
+}
+.images .clickable{
+  width: 20%;
+  margin-right: 1em;
+  cursor:pointer;
+  text-align: center;
+}
+.images .clickable:hover{
+  background: #2F6FAB;
+}
+
+.changed{
+  box-shadow: 0 0 1em #2F6FAB;
+  border: solid 3px #2F6FAB;
+}

routes/index.js

@@ -2,38 +2,47 @@ var express = require('express');
 var router = express.Router();
 var sqlite3 = require('sqlite3');
 var Masto = require('mastodon');
+// change this object to fit your multi accounts
 const accounts_to_select = [
     {
         label: "tykayn",
-        value: "tykayn"
+        value: "tykayn",
+        src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/000/001/original/6388tykayn.gif"
     },
     {
         label: "modominem",
-        value: "modominem"
+        value: "modominem",
+        src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/152/770/original/c62bb94381dc1f75.png"
     },
     {
         label: "qzine",
-        value: "qzine"
+        value: "qzine",
+        src :"https://mastodon.cipherbliss.com/system/accounts/avatars/000/003/032/original/2bb8b90d21d3fdca.jpg"
     },
     {
         label: "curator",
-        value: "curator"
+        value: "curator",
+        src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/002/974/original/8e48623291e49afe.jpg"
     },
     {
         label: "kurator",
-        value: "kurator"
+        value: "kurator",
+        src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/162/067/original/bb374d2c6a361b6d.jpg"
     },
     {
         label: "voix du nucléaire",
-        value: "voixdunucleaire"
+        value: "voixdunucleaire",
+        src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/107/055/original/7dac1a35f1423b94.jpg"
     },
     {
         label: "The greatest Meme",
-        value: "meme"
+        value: "meme",
+        src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/002/978/original/b2f2e817572c93e9.png"
     },
     {
         label: "cil de gometz",
-        value: "cil_gometz"
+        value: "cil_gometz",
+        src : "https://mastodon.cipherbliss.com/system/accounts/avatars/000/107/055/original/7dac1a35f1423b94.jpg"
     },
 ]
 const default_times = ['08:02:00', '08:42:00', '09:10:00', '09:15:00', '10:22:00', '12:22:00']
@@ -44,8 +53,6 @@ let schedule_time = '';
 router.get('/', function (req, res, next) {
 
     if (!req.body.schedule_time) {
-
-
         schedule_time = default_times[Math.floor(Math.random() * default_times.length)];
     }
     res.render('index', {accounts_to_select, reqBody: req.body, schedule_time});

views/index.jade

@@ -9,40 +9,21 @@ block content
   //form(action="/add-to-queue",method="post")
   form(action="/direct-post",method="post")
     span.account
-      span Choix du compte
+      span="Choix du compte parmi les "
+      span=accounts_to_select.length
+
+    br
+    div.images
+        each val, index in accounts_to_select
+            div.clickable(onclick=`selectAccount('${val.value}')`)
+                img.account__avatar-overlay(src=`${val.src}`)
+                br
+                span=val.label
     br
-    //.drawer--account
-    //  .account__avatar(style='width: 48px; height: 48px; background-size: 48px 48px; background-image: url("https://mastodon.cipherbliss.com/system/accounts/avatars/108/409/825/840/442/987/original/eea3627456786998.jpg");')
-    //  .navigation-bar__profile
-    //    a.permalink.acct(href='https://mastodon.cipherbliss.com/@voixdunucleaire')
-    //      strong  @voixdunucleaire
-
-
-    //p=accounts_to_select.length
-
     select(method="post", name="author", value=bodyReq ? bodyReq.author : "", id="author_select")
-      option(value="tykayn")
+      each val, index in accounts_to_select
-        span TyKayn
+        option(value=val.value)
-      option(value="voixdunucleaire")
+          span=val.label
-        span voix du nucléaire
-      option(value="modominem")
-        span modo minem
-      option(value="curator")
-        span curator
-      option(value="qzine")
-        span qzine
-      option(value="meme")
-        span meme
-      option(value="cil_gometz")
-        span CIL Gometz
-
-        // each item in accounts_to_select.length ? item : ['There are no values']
-        //   option(value=item.label)
-        //     span=item.value
-    br
-    img.account__avatar-overlay(src="https://mastodon.cipherbliss.com/system/accounts/avatars/000/003/032/original/2bb8b90d21d3fdca.jpg", onclick="selectAccount('qzine')")
-    img.account__avatar-overlay(src="https://mastodon.cipherbliss.com/system/accounts/avatars/000/107/055/original/7dac1a35f1423b94.jpg", onclick="selectAccount('cil_gometz')")
-    img.account__avatar-overlay(src="https://mastodon.cipherbliss.com/system/accounts/avatars/000/002/978/original/b2f2e817572c93e9.png", onclick="selectAccount('meme')")
     div.compose-form__autosuggest-wrapper
       .autosuggest-textarea
         label
@@ -68,7 +49,12 @@ block content
     script.
       function selectAccount(somePseudo) {
         console.log('account selected', document.querySelector('#author_select').value)
-        document.querySelector('#author_select').value = somePseudo
+        let selector=document.querySelector('#author_select');
+        selector.value = somePseudo
+        selector.classList.add("changed")
+        setTimeout(()=>{
+          selector.classList.remove("changed")
+        },500)
         console.log('account changed', somePseudo)
       }