From 9d8e7ea919bb136a242be5a756fcd43cd9c34d4e Mon Sep 17 00:00:00 2001
From: James Wang <jameswang9909@hotmail.com>
Date: Sat, 2 Jan 2016 20:01:30 -0500
Subject: [PATCH] Render problems for admin problem view

---
 web/js/admin/problem.js       | 11 ---------
 web/js/admin/problems.js      | 44 +++++++++++++++++++++++++++++++++++
 web/pages/admin/problems.html | 44 +++++++++++++++++++++++++++++++++++
 3 files changed, 88 insertions(+), 11 deletions(-)
 delete mode 100644 web/js/admin/problem.js
 create mode 100644 web/js/admin/problems.js
 create mode 100644 web/pages/admin/problems.html

diff --git a/web/js/admin/problem.js b/web/js/admin/problem.js
deleted file mode 100644
index 2adbfb1..0000000
--- a/web/js/admin/problem.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function add_problem(name, category, description, hint, flag, value) {
-    $.post("/api/problem/add", {
-        name: name,
-        category: category,
-        hint: hint,
-        flag: flag,
-        value: value
-    }, function(data) {
-
-    })
-}
diff --git a/web/js/admin/problems.js b/web/js/admin/problems.js
new file mode 100644
index 0000000..ae53ad4
--- /dev/null
+++ b/web/js/admin/problems.js
@@ -0,0 +1,44 @@
+function render_problems() {
+    $.post("/api/problem/data", {
+    }, function(data) {
+        data = data["data"];
+        for (var i = 0; i < data.length; i++) {
+            files = data[i]["files"];
+            problem =
+`<div class=\"panel panel-info\">
+    <div class=\"panel-heading\">
+        <h3 class=\"panel-title\">` + data[i]["name"] + ` | ` + data[i]["category"] + `<span style=\"float: right\">` + data[i]["value"] + ` points</span></h3>
+    </div>
+    <div class=\"panel-body\">
+       <p>` + data[i]["description"]  + `</p>
+        <div class=\"input-group\">
+            <input type=\"text\" class=\"form-control\" placeholder=\"Flag\">
+            <span class=\"input-group-btn\">
+                <button class=\"btn btn-success\" id=\"hint\" type=\"button\" onclick=\"show_hint(\'` + data[i]["pid"] + `\');\">Hint</button>
+                <button class=\"btn btn-success\" type=\"button\">Submit!</button>
+            </span>
+        </div>
+    </div>
+    <div class=\"panel-footer\">`
+
+            for (var j = 0; j < files.length; j++) {
+                file_name = files[j].split("/").pop();
+                problem +=
+`<a href=\"` + files[j] + `\" class=\"filelink\" target=\"_blank\">
+    <h4 class=\"probfile\">` + file_name + `</h4>
+</a>`
+            }
+
+            problem += `<br>
+        <div id=\"hint_` + data[i]["pid"] + `\" style=\"display:none\">` + data[i]["hint"] + `</div>
+</div></div>`
+            $("#problems").append(problem);
+        }
+    });
+}
+
+function show_hint(pid) {
+    $("#hint_" + pid).slideToggle(120, "swing");
+}
+
+$(document).ready( render_problems() );
diff --git a/web/pages/admin/problems.html b/web/pages/admin/problems.html
new file mode 100644
index 0000000..97695ec
--- /dev/null
+++ b/web/pages/admin/problems.html
@@ -0,0 +1,44 @@
+<center class="fade_in ng-scope">
+    <h1>Problems</h1>
+    <div class="status"></div>
+    <div class="panel panel-info">
+        <form id="add-form" method="POST" action="/api/problem/add" enctype="multipart/form-data">
+            <div class="panel-heading">
+                <div class="row">
+                    <div class="col-md-6">
+                        <input type="text" name="name" id="name" autocomplete="on" placeholder="Name" class="form-control">
+                    </div>
+                    <div class="col-md-6">
+                        <input type="text" name="category" id="category" autocomplete="on" placeholder="Category" class="form-control">
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body">
+                <textarea type="text" name="description" id="description" autocomplete="on" placeholder="Description" class="form-control"></textarea>
+                <br><br>
+                <div class="row">
+                    <div class="col-md-6">
+                        <input type="text" name="flag" id="flag" autocomplete="off" placeholder="EasyCTF{insert_correct_flag_here}" class="form-control">
+                    </div>
+                    <div class="col-md-6">
+                        <input type="text" name="hint" id="hint" autocomplete="off" placeholder="Hint" class="form-control">
+                    </div>
+                </div>
+                <br>
+                <div class="row">
+                    <input type="number" name="value" id="value" autocomplete="off" placeholder="Value" class="form-control-number">
+                </div>
+            </div>
+            <div class="panel-footer">
+                <h4>These are important files!</h4>
+                <hr>
+                <div class="row">
+                    <input type="file" name="files[]" id="files" multiple="true">
+                </div>
+            </div>
+            <input type="submit" class="btn btn-success" id="add-problem" value="Add Problem">
+        </form>
+    </div>
+    <div id="problems"></div>
+    <script src="js/admin/problems.js"></script>
+</center>