Add turno dialog in show interface

ging · Aug 17, 2020 · 8568a8d · 8568a8d
1 parent ae572ae
commit 8568a8d
Show file tree

Hide file tree

Showing 15 changed files with 231 additions and 62 deletions.
diff --git a/controllers/play_controller.js b/controllers/play_controller.js
@@ -115,11 +115,12 @@ exports.writeMessage = async (req, res) => {
     const turnos = await models.turno.findAll({"where": {"escapeRoomId": escapeRoom.id}, "order": [["date", "ASC NULLS LAST"]]});
     const participants = await models.user.findAll(queries.user.participantsWithTurnoAndTeam(escapeRoom.id, undefined, "name"));
     const teams = await models.team.findAll(queries.team.teamComplete(escapeRoom.id, undefined, "name"));
-
-    res.render("escapeRooms/messages", {escapeRoom, turnos, participants, teams});
+    const {turnId} = req.query;
+    console.log(turnId)
+    res.render("escapeRooms/messages", {escapeRoom, turnos, participants, teams, turnId});
 };
 
-// GET /escapeRooms/:escapeRoomId/messages
+// POST /escapeRooms/:escapeRoomId/messages
 exports.sendMessage = async (req, res) => {
     const {to, turnId, teamId, msg, waiting} = req.body;
     const message = {"type": MESSAGE, "payload": {msg}};

diff --git a/helpers/utils.js b/helpers/utils.js
@@ -60,6 +60,7 @@ exports.playInterface = async (name, req, res, next) => {
             "hints": [],
             "turnoId": req.params.turnoId,
             "isStudent": false,
+            "status": req.turn.status,
             "endPoint": name,
             "layout": false
         });

diff --git a/i18n/en.json b/i18n/en.json
@@ -944,6 +944,8 @@
         "noTurnAvailable": "No turn available for this ER",
         "theres": "There is",
         "thereare": "There are",
+        "start": "Start shift",
+        "stop": "Stop shift",
         "spot": "open spot",
         "spots": "open spots",
         "openSpots": "in this shift",

diff --git a/i18n/es.json b/i18n/es.json
@@ -928,6 +928,8 @@
         "noTurnAvailable": "No hay ningún turno disponible en esta escape room",
         "theres": "Queda",
         "thereare": "Quedan",
+        "start": "Comenzar turno",
+        "stop": "Detener turno",
         "spot": "puesto libre",
         "spots": "puestos libres",
         "openSpots": "en este turno",

diff --git a/public/stylesheets/dialogs.sass b/public/stylesheets/dialogs.sass
@@ -80,8 +80,47 @@
             color: $brightgreen
         .hl
             color: $brightblue
+    .dialog-turno
+        background: white
+        padding: 10px
+        max-width: 100%
+        .flex-dialog-container
+            position: relative
+            display: flex
+            flex-direction: row
+            flex-wrap: wrap
+            .flex-block
+                width: 33.33%
+                padding: 10px
+                a
+                    width: 100%
+                button
+                    width: 100%
+                    border: 2px solid rgba($textpurple, 0.3)
+                    border-radius: 0px
+                    .material-icons
+                        color: var(--brightorange)
+                        display: block
+                        font-size: 60px
+                        margin-bottom: 15px
+                .overlay-trigger
+                    box-shadow: 0px 0px 5px #999 !important
+                    .flex-buttons
+                        text-align: right
+                        button
+                            border: none !important
+                            width: auto
+
+        @media (max-width: 992px)
+            .flex-block
+                width: 50% !important
+        @media (max-width: 700px)
+            .flex-block
+                width: 100% !important
     .ui-dialog
         outline: none !important
+        max-width: 90% !important
+        width: 850px !important
     .ui-dialog-title
         line-height: 50px
         padding-left: 15px

diff --git a/public/stylesheets/escapeRoomShow.sass b/public/stylesheets/escapeRoomShow.sass
@@ -188,7 +188,7 @@
       color: $lightred
 
 
-@media (max-width: 768px)
+@media (max-width: 900px)
   #mainSection
     .main.escapeRoomShow
       .flexRow

diff --git a/public/stylesheets/flash.sass b/public/stylesheets/flash.sass
@@ -10,6 +10,7 @@
   opacity: 0.9
   padding-top: 0px
   left: 0px
+  z-index: 99999
   .close
     content: '\2716'
     top: 0

diff --git a/public/stylesheets/play.css b/public/stylesheets/play.css
@@ -468,7 +468,8 @@ ranking {
 
 @media (min-width: 768px){
 .navbar-expand-md .navbar-nav .nav-link {
-    padding-right: 0.05rem !important;
+    margin-right: 0.05rem !important;
+    padding-right: 0rem !important;
     padding-bottom: 0 !important;
     padding-top: 0 !important;
 }

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -602,8 +602,47 @@ body .daterangepicker {
   .main #dialog-preview-api .hl, .main #dialog-share .hl, .main #dialog-start .hl {
     color: #36A2EB; }
 
+.main .dialog-turno {
+  background: white;
+  padding: 10px;
+  max-width: 100%; }
+  .main .dialog-turno .flex-dialog-container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap; }
+    .main .dialog-turno .flex-dialog-container .flex-block {
+      width: 33.33%;
+      padding: 10px; }
+      .main .dialog-turno .flex-dialog-container .flex-block a {
+        width: 100%; }
+      .main .dialog-turno .flex-dialog-container .flex-block button {
+        width: 100%;
+        border: 2px solid rgba(101, 102, 131, 0.3);
+        border-radius: 0px; }
+        .main .dialog-turno .flex-dialog-container .flex-block button .material-icons {
+          color: var(--brightorange);
+          display: block;
+          font-size: 60px;
+          margin-bottom: 15px; }
+      .main .dialog-turno .flex-dialog-container .flex-block .overlay-trigger {
+        box-shadow: 0px 0px 5px #999 !important; }
+        .main .dialog-turno .flex-dialog-container .flex-block .overlay-trigger .flex-buttons {
+          text-align: right; }
+          .main .dialog-turno .flex-dialog-container .flex-block .overlay-trigger .flex-buttons button {
+            border: none !important;
+            width: auto; }
+  @media (max-width: 992px) {
+    .main .dialog-turno .flex-block {
+      width: 50% !important; } }
+  @media (max-width: 700px) {
+    .main .dialog-turno .flex-block {
+      width: 100% !important; } }
+
 .main .ui-dialog {
-  outline: none !important; }
+  outline: none !important;
+  max-width: 90% !important;
+  width: 850px !important; }
 
 .main .ui-dialog-title {
   line-height: 50px;
@@ -990,7 +1029,7 @@ body .daterangepicker {
     border-color: white !important;
     color: #F47E84; }
 
-@media (max-width: 768px) {
+@media (max-width: 900px) {
   #mainSection .main.escapeRoomShow .flexRow {
     flex-direction: column; }
   #mainSection .main.escapeRoomShow .menuERShow {
@@ -1404,7 +1443,8 @@ body .daterangepicker {
   padding: 15px;
   opacity: 0.9;
   padding-top: 0px;
-  left: 0px; }
+  left: 0px;
+  z-index: 99999; }
   #flassmessages .close {
     content: '\2716';
     top: 0;
@@ -3554,9 +3594,10 @@ table.mainTable {
         font-size: 10px; }
         #mainSection .main .flexBoxTurnos .turno .place .no-place em {
           opacity: 0.8; }
+    #mainSection .main .flexBoxTurnos .turno:not(.finished) .always {
+      color: #48C18E; }
     #mainSection .main .flexBoxTurnos .turno .always {
       font-size: 17px;
-      color: #48C18E;
       line-height: 25px;
       vertical-align: top; }
 

diff --git a/public/stylesheets/turnos.sass b/public/stylesheets/turnos.sass
@@ -146,11 +146,13 @@
             font-size: 10px
             em
               opacity: 0.8
+        &:not(.finished) .always
+          color: $brightgreen
         .always
           font-size: 17px
-          color: $brightgreen
           line-height: 25px
           vertical-align: top
+
     .turno-date-title-show
       color: white
       margin: 5px

diff --git a/views/escapeRooms/messages.ejs b/views/escapeRooms/messages.ejs
@@ -15,14 +15,14 @@
         <form id="messages-form" action="/escapeRooms/<%=escapeRoom.id%>/message" method="POST">
             <textarea name="msg" id="msg" rows="5" minlength="1" placeholder="<%=i18n.message.msgPlaceholder%>"></textarea><br>
             <h2>To:</h2>
-            <input type="radio" id="everyone" name="to" value="everyone" checked>
+            <input type="radio" id="everyone" name="to" value="everyone" <%if(!turnId){%>checked<%}%>>
             <label for="everyone"><%=i18n.message.everyone%></label><br>
-            <input type="radio" id="shift" name="to" value="shift">
+            <input type="radio" id="shift" name="to" value="shift"  <%if(turnId){%>checked<%}%>>
             <label for="shift"><%=i18n.message.shift%> &nbsp;&nbsp;
                 <select name="turnId" id="shift-id" onclick="$('#shift').prop('checked', true)">
                     <option value=""></option>
                     <% for (let turno of turnos){%>
-                        <option value="<%=turno.id%>"><%= turno.date ? getFullDate(turno.date): i18n.turno.alwaysOpen%> <% if (turno.place) { %>(<%= turno.place %>)<% } %></option>
+                        <option value="<%=turno.id%>" <%if(turnId == turno.id){%>selected<%}%>><%= turno.date ? getFullDate(turno.date): i18n.turno.alwaysOpen%> <% if (turno.place) { %>(<%= turno.place %>)<% } %></option>
                     <%}%>
                 </select>
             </label><br>
@@ -31,7 +31,7 @@
                 <select name="teamId" id="team-id" onclick="$('#team').prop('checked', true)">
                     <option value=""></option>
                     <% for (let team of teams){%>
-                        <option value="<%=team.id%>"><%=team.name%></option>
+                        <option value="<%=team.id%>" ><%=team.name%></option>
                     <%}%>
                 </select>
             </label><br>

diff --git a/views/escapeRooms/play/play.ejs b/views/escapeRooms/play/play.ejs
@@ -156,58 +156,62 @@
                                     </p>
                                     `
                                 
-                            })
+                            });
                             $(document).on("click", ".live-support-popover .popover-btn", ()=>{
                                 $('.live_support').popover('hide');
                                 
-                            })
-                        })
+                            });
+                        });
                     </script>
                 </li>
                 <%}%>
                 <% if (endPoint === "class") {%>
-                <li class="nav-item active">
-                    <a class="nav-link" href="#" id="stop-tooltip" data-toggle="tooltip" title="<%=i18n.escapeRoom.play.stop%>">
-                        <button class="btn btn-warning stop-turno" data-container="body" data-placement="bottom" onclick="$('#stop-tooltip').tooltip('hide')" data-toggle="popover" title="<%=i18n.escapeRoom.play.stop%>">
-                            <span class="material-icons ">stop</span>
-                        </button>
-                    </a>
-                    <form id="stop-turno" method="POST" action="/escapeRooms/<%=escapeRoom.id%>/activate?_method=put">
-                        <input type="hidden" id="turnSelected" name="turnSelected" value="<%=turnoId%>"></input>
-                    </form>
-                    <script>
-                        $(()=>{
-                            $('.stop-turno').popover({
-                                html: true,
-                                content: `<p stop-popover">
-                                    <%=i18n.turno.areYouSureStop%>
-                                    </p>
-                                    <p class="popover-p stop-popover">
-                                            <a class="btn btn-primary btn-sm popover-btn" href="#">
-                                                <%=i18n.common.cancel%>
-                                            </a>
-                                            <a class="btn btn-success btn-sm popover-btn stop-turno-confirm" href="#">
-                                                <%=i18n.common.confirm%>
-                                            </a>
+                    <% if (status === "active") {%>
+                    <li class="nav-item active">
+                        <a class="nav-link" href="#" id="stop-tooltip" data-toggle="tooltip" title="<%=i18n.escapeRoom.play.stop%>">
+                            <button class="btn btn-warning stop-turno" data-container="body" data-placement="bottom" onclick="$('#stop-tooltip').tooltip('hide')" data-toggle="popover" title="<%=i18n.escapeRoom.play.stop%>">
+                                <span class="material-icons ">stop</span>
+                            </button>
+                        </a>
+                        <form id="stop-turno" method="POST" action="/escapeRooms/<%=escapeRoom.id%>/activate?_method=put">
+                            <input type="hidden" id="turnSelected" name="turnSelected" value="<%=turnoId%>"></input>
+                        </form>
+                        <script>
+                            $(()=>{
+                                $('.stop-turno').popover({
+                                    html: true,
+                                    content: `<p stop-popover">
+                                        <%=i18n.turno.areYouSureStop%>
                                         </p>
-                                    `
+                                        <p class="popover-p stop-popover">
+                                                <a class="btn btn-primary btn-sm popover-btn" href="#">
+                                                    <%=i18n.common.cancel%>
+                                                </a>
+                                                <a class="btn btn-success btn-sm popover-btn stop-turno-confirm" href="#">
+                                                    <%=i18n.common.confirm%>
+                                                </a>
+                                            </p>
+                                        `
+                                });
+                                $(document).on("click", ".stop-popover .popover-btn", ()=>{
+                                    $('.stop-turno').popover('hide');
+                                });
+                                $(document).on("click", ".stop-turno-confirm", ()=>{
+                                    $('#stop-turno').submit();
+                                });
                             })
-                            $(document).on("click", ".stop-popover .popover-btn", ()=>{
-                                $('.stop-turno').popover('hide');
-                            })
-                            $(document).on("click", ".stop-turno-confirm", ()=>{
-                                $('#stop-turno').submit();
-                            })
-                        })
-                    </script>
-                </li>
-                <li class="nav-item active">
-                    <a class="nav-link" href="/escapeRooms/<%=escapeRoom.id%>/analytics?turnId=<%=turnoId%>" data-toggle="tooltip" title="<%=i18n.escapeRoom.play.Analytics%>">
-                        <button class="btn btn-success" >
-                            <span class="material-icons ">timeline</span>
-                        </button>
-                    </a>
-                </li>
+                        </script>
+                    </li>
+                    <%}%>
+                    <li class="nav-item active">
+                        <a class="nav-link" href="/escapeRooms/<%=escapeRoom.id%>/analytics?turnId=<%=turnoId%>" data-toggle="tooltip" title="<%=i18n.escapeRoom.play.Analytics%>">
+                            <button class="btn btn-success" >
+                                <span class="material-icons ">timeline</span>
+                            </button>
+                        </a>
+                    </li>
+                   
+
                 <%}%>
                 <li class="nav-item active">
                     <a class="nav-link" href="/escapeRooms/<%=escapeRoom.id%>" data-toggle="tooltip" title="<%=i18n.escapeRoom.play.Exit%>">

diff --git a/views/escapeRooms/show.ejs b/views/escapeRooms/show.ejs
@@ -309,7 +309,7 @@
     var dialogOptions = {
         autoOpen: false,
         resizable: false,
-        width: window.innerWidth > 800 ? 860 : window.innerWidth*0.9,
+        width: window.innerWidth > 900 ? 860 : window.innerWidth*0.8,
         height: "auto",
         modal: true,
         show: {

diff --git a/views/turnos/_indexActivate.ejs b/views/turnos/_indexActivate.ejs
@@ -28,7 +28,7 @@
 
                 <div class="flex-cell flex-links">
                     <a href="/escapeRooms/<%=escapeRoom.id%>/analytics?turnId=<%=turno.id%>">
-                        <button class="turno-btn" title="<%=i18n.analytics.main.title%>" >
+                        <button class="turno-btn" title="<%=i18n.analytics.main.title%>" style="color: var(--mainpurple);">
                             <span class="material-icons">timeline</span>
                         </button>
                     </a>
@@ -39,7 +39,7 @@
                     </a>
                     
                     <a href="/escapeRooms/<%=escapeRoom.id%>/turnos/<%=turno.id%>/play">
-                        <button class="turno-btn" title="<%=i18n.showTeacher.actionList.classInterface%>" style="color: var(--mainpurple);">
+                        <button class="turno-btn" title="<%=i18n.showTeacher.actionList.classInterface%>" >
                             <span class="material-icons">cast_for_education</span>
                         </button>
                     </a>