#wip: Conseguido acabar las Polls. Falta la selección y pista. Ya van dos horas de Jam. Va la cuarta y última... Esperemos... xD

PHP/GamUsino.php

@@ -32,13 +32,13 @@
                         break;
                         case "add_option":
                             $database = $this->load_database();
-                            if(isset($database["polls"]) && isset($database["polls"][$data["name"]])){
+                            if(isset($database["polls"]) && isset($database["polls"][$data["i"]])){
-                                $database["polls"][$data["name"]][] = [
+                                $database["polls"][$data["i"]]["options"][] = [
                                     "text" => $data["text"], 
                                     "points" => 0
                                 ];
                                 $this->save_database($database);
-                                $this->response(200, $database["polls"][$data["name"]]);
+                                $this->response(200, $database["polls"][$data["i"]]["options"]);
                             }else 
                                 $this->response(404, [
                                     "message" => "poll_not_exists", 

Public/ecma/GamUsino.ecma.js

@@ -138,22 +138,6 @@ GamUsino = function(custom){
         
     };
 
-    this.add_poll = (item, event) => {
-
-        const poll_name = item.parentNode.parentNode.querySelector("input").value;
-
-        if(poll_name)
-            self.confirm("add_poll_sure", () => {
-                self.send({
-                    action : "add_poll", 
-                    name : poll_name
-                }, response => {
-                    console.log(response);
-                });
-            });
-
-    };
-
     this.preload = (selector, callback) => {
         if(!selector){
             callback(null, false);
@@ -209,23 +193,84 @@ GamUsino = function(custom){
         });
     };
 
-    const build_polls = polls => document.querySelector(".polls-box>.polls").innerHTML = polls.map((poll, i) => self.string_variables(fragments.poll_menu_fragment, {
+    const build_polls = polls => {
+
+        const text = document.querySelector(".polls-box [type=text]").value.trim();
+
+        document.querySelector(".polls-box>.polls>ul").innerHTML = polls.map((poll, i) => self.string_variables(fragments.poll_menu_fragment, {
             ...poll, 
-        i : i
+            i : i, 
+            visible : !text || poll.name.includes(text)
         })).join("");
 
+    };
+
+    this.add_poll = (item, event) => {
+
+        const poll_name = item.parentNode.parentNode.querySelector("input").value;
+
+        poll_name && self.confirm("add_poll_sure", () => {
+            self.send({
+                action : "add_poll", 
+                name : poll_name
+            }, data => build_polls(data.content));
+        });
+
+    };
+
     this.show_poll = (item, event) => {
+
+        const i = Number(item.getAttribute("data-i"));
+
         document.querySelectorAll(".polls-box>.polls [data-seleted=true]").forEach(item => item.setAttribute("data-selected", false));
         item.setAttribute("data-selected", true);
+
         self.send({
             action : "get_poll", 
-            i : Number(item.getAttribute("data-i"))
+            i : i
         }, data => {
             console.log(data);
-            document.querySelector(".poll-box>.poll").innerHTML = data.content.name;
+            document.querySelector(".poll-box>.poll").innerHTML = self.string_variables(fragments.poll_box, {
+                ...data.content, 
+                i : i, 
+                maximum_points : data.content.options.length ? Math.max(...data.content.options.map(option => option.points)) : 0, 
+                options : data.content.options.map((option, j) => self.string_variables(fragments.option_item, {
+                    ...option, 
+                    i : j
+                })).join("")
+            });
+        });
+
+    };
+
+    this.add_option = (item, event) => {
+
+        const text = item.parentNode.parentNode.querySelector("textarea").value, 
+              i = Number(document.querySelector(".polls-box>.polls [data-selected=true]").getAttribute("data-i"));
+
+        !isNaN(i) && text && self.confirm("add_option_sure", () => {
+            self.send({
+                action : "add_option", 
+                i : i, 
+                text : text
+            }, data => build_options(data.content));
         });
     };
 
+    const build_options = options => {
+
+        const text = document.querySelector(".poll-box textarea").value.trim();
+
+        document.querySelector(".poll-box>.poll .options>ul").innerHTML = options.map((option, k) => self.string_variables(fragments.option_item, {
+            ...option, 
+            i : k, 
+            visible : !text || option.text.includes(text)
+        })).join("");
+
+    };
+    
+    this.select_option = (item, event) => {};
+
     constructor();
 
 };

Public/index.html

@@ -20,13 +20,37 @@
     </head>
     <body>
         <div class="html-structure-fragments">
+
             <!-- [[poll_menu_fragment]] -->
-            <li class="poll-menu-item" data-i="{i}" data-i18n="{name}" data-i18n-without="true" title="{name}" onclick="gamusino.show_poll(this, event);" data-selected="false">
+            <li class="poll-menu-item" data-i="{i}" data-i18n="{name}" data-i18n-without="true" title="{name}" onclick="gamusino.show_poll(this, event);" data-selected="false" data-visible="{visible}">
                 <span data-icon="menu_item_selected"></span>
                 <span data-icon="{name}"></span>
                 <span data-i18n="{name}">{name}</span>
             </li>
             <!-- [[poll_menu_fragment]] -->
+
+            <!-- [[poll_box]] -->
+            <form method="post" action="#" onsubmit="return false;" data-name="{name}" data-i="{i}" data-maximum-points="{maximum_points}">
+                <fieldset>
+                    <legend data-i18n="{name}">{name}</legend>
+                    <nav class="options">
+                        <ul>{options}</ul>
+                    </nav>
+                </fieldset>
+            </form>
+            <!-- [[poll_box]] -->
+
+            <!-- [[option_item]] -->
+            <li class="option-item" data-i="{i}" data-i18n="{text}" data-i18n-without="true" title="{text}" data-visible="{visible}">
+                <span data-i18n="{text}">{text}</span>
+                <span class="bar" data-points="0"></span>
+                <span class="select checkbox">
+                    <input type="checkbox" name="option_{i}" onchange="gamusino.select_option(this, event);" />
+                    <span data-icon="chckbox"></span>
+                </span>
+            </li>
+            <!-- [[option_item]] -->
+
         </div>
         <header>
             <h1 data-i18n="gamusino" title="GAM-USINO" data-i18n-without="true">
@@ -55,15 +79,13 @@
             <section class="poll-box">
                 <h2 data-i18n="poll">Encuesta</h2>
                 <div class="group">
-                    <span class="input"><input type="text" name="option" data-i18n="option" data-i18n-without="true" placeholder="Opción..." /></span>
+                    <span class="input"><textarea name="option" data-i18n="option" data-i18n-without="true" placeholder="Opción..."></textarea></span>
                     <span class="input"><button data-i18n="add" data-i18n-without="true" title="Añadir" onclick="gamusino.add_option(this, event);">
                         <span data-icon="add"></span>
                         <span data-i18n="add">Añadir</span>
                     </button></span>
                 </div>
-                <nav class="poll">
+                <div class="poll"></div>
-                    <ul></ul>
-                </nav>
             </section>
         </main>
         <footer>