cryptex dashboard final

models/cryptex.js

@@ -0,0 +1,12 @@
+var mongoose = require('mongoose');
+
+
+var cryptexSchema = mongoose.Schema({
+    level : Number,
+    question  : String,
+    answer  : String,
+    image : String
+});
+
+// create the model for users and expose it to our app
+module.exports = mongoose.model('Cryptex', cryptexSchema);

package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "body-parser": "~1.15.1",
+    "connect-multiparty": "^2.0.0",
     "cookie-parser": "~1.4.3",
     "debug": "~2.2.0",
     "ejs": "^2.5.3",

public/cryptex_dashboard.ejs

@@ -40,31 +40,33 @@
         <%if (!isLoggedIn) { %>
                 <% include partials/reg-form %>
         <% } %>
-        <section class="cryptex-wrapper footer-adjust question">
-            <div class="row backtoques">
-                <a href="/cryptex/leaderboard">Leaderboard ></a>
-            </div>
+        <section class="cryptex-wrapper question">
             <div class="row">
                 <div class="small-10 small-centered medium-12 column contentmain">
-                    <span class="level-text" >Level #1<span>
+                    <span class="level-text" >Level #<%- levelNumber %><span>
                     <div class="row">
                         <div class="small-10 medium-8 large-6 small-centered column">
                             <div class="contentImage text-center">
-                                <form action="" method="post" enctype="multipart/form-data">
-                                  <input type="file" name="file" />
-                                </form>
-                            </div>
-                            <div class="contentQues">
-                                Q. Why did Kattapa kill Bahubali?
-                            </div>
-                            <form action="javascript:void(0)" class="text-center">
-                                <div class="group group-center">
-                                    <input type="text" id="in-name" class="user-name" required>
-                                    <span class="highlight"></span>
-                                    <label>Answer</label>
-                                </div>
-                                <input type="submit" value="Submit" class="reg-form-btn-register cryptex-btn" onclick="addMember()">
-                            </from>
+                                <form action="editlevel/image/<%= levelNumber %>" class="dropzone dropzone-art" id="my-awesome-dropzone"></form>
+                                <% if(doc.image !== undefined){ %>
+                                    <div class="contentImage text-center">
+                                        <img src="<%= doc.image %>">
+                                    </div>
+                                <%}%>
+                                <form action="javascript:void(0)" class="text-center">
+                                    <div class="group group-center">
+                                        <input type="text" id="in-name" class="cryptex-question" value="<%= doc.question %>" required>
+                                        <span class="highlight"></span>
+                                        <label>Question</label>
+                                    </div>
+                                    <div class="group group-center">
+                                        <input type="text" id="in-name" class="cryptex-answer" value="<%= doc.answer %>" required>
+                                        <span class="highlight"></span>
+                                        <label>Answer</label>
+                                    </div>
+                                    <br>
+                                    <input type="submit" value="Submit" class="reg-form-btn-register cryptex-btn" onclick="editLevel()">
+                                </from>
                         </div>
                     </div>
                 </div>
@@ -73,8 +75,57 @@
 
         <% include partials/footer%>
         <script src="js/index.js"></script>
-        <script src="js/cryptex-dashboard.js"></script>
         <script src="js/vendor/dropzone.js"></script>
+        <script>
+            Dropzone.options.myAwesomeDropzone = {
+              paramName: "file", // The name that will be used to transfer the file
+              maxFilesize: 0.5, // MB
+              headers : {"level" : "<%= levelNumber %>"},
+              acceptedFiles : 'image/*',
+              uploadMultiple : false,
+            };
+
+            function editLevel(){
+                var x = getQuestionAnswer();
+                if(!validateQuestionAnswer(x)){
+                    return;
+                }
+                $.post( {
+                    url: "/cryptex/editlevel/question",
+                    contentType: 'application/json; charset=utf-8',
+                    dataType : 'json',
+                    data: JSON.stringify(x)
+                })
+                .done(function( data ) {
+                    deactivateLoader();
+                    if(data.response){
+                        notifDisplay(1,1);
+                    }
+                    else {
+                        notifDisplay(0,0);
+                    }
+                })
+                .fail(function(response) {
+                    apiCallFail(response);
+                });
+            }
+
+            function getQuestionAnswer(){
+                userDetail ={
+                    question : $('.cryptex-question').val(),
+                    answer : $('.cryptex-answer').val(),
+                    level : <%= levelNumber %>
+                }
+                return userDetail;
+            }
+
+            function validateQuestionAnswer(data){
+                if(data.question === "" || data.answer === "")
+                    return false;
+                else
+                    return true;
+            }
+        </script>
 
     </body>
 </html>

public/cryptex_question.ejs

@@ -49,10 +49,10 @@
                     <div class="row">
                         <div class="small-10 medium-8 large-6 small-centered column">
                             <div class="contentImage text-center">
-                                <img src="media/plinth-preview.jpg">
+                                <img src="<%= doc.image %>">
                             </div>
                             <div class="contentQues">
-                                Q. Why did Kattapa kill Bahubali?
+                                Q. <%= doc.question %>
                             </div>
                             <form action="javascript:void(0)" class="text-center">
                                 <div class="group group-center">

public/css/cryptex-dashboard.css

@@ -1,34 +1,11 @@
-.box__dragndrop,
-.box__uploading,
-.box__success,
-.box__error {
-  display: none;
-}
-
-.box.has-advanced-upload {
-  background-color: white;
-  outline: 2px dashed black;
-  outline-offset: -10px;
-}
-.box.has-advanced-upload .box__dragndrop {
-  display: inline;
-}
-
-.box.is-dragover {
-  background-color: grey;
-}
-
-
-.box.is-uploading .box__input {
-  visibility: none;
-}
-.box.is-uploading .box__uploading {
-  display: block;
-}
-
-.box__button {
-  display: none;
-}
-.no-js .box__button {
-  display: block;
+.dropzone-art{
+    border: 2px dashed #4a4a4a;
+    border-radius: 5px;
+    background: white;
+    cursor: pointer;
+    padding: 40px;
+    margin-bottom: 40px;
+}
+.dz-success-mark, .dz-error-mark{
+    display: none;
 }

public/js/cryptex-dashboard.js

@@ -1 +1,5 @@
-"use strict"
+Dropzone.options.myAwesomeDropzone = {
+  paramName: "file", // The name that will be used to transfer the file
+  maxFilesize: 0.5, // MB
+  acceptedFiles : 'image/*',
+};