Add button to delete problems

This commit is contained in:
James Wang 2016-01-04 21:12:50 -05:00
parent 6e17439289
commit f8e22decc0
4 changed files with 119 additions and 44 deletions

View file

@ -18,7 +18,7 @@ def problem_add():
name = request.form["name"]
category = request.form["category"]
description = request.form["description"]
hint = request.form["hint"]
hint = request.form["problem-hint"]
flag = request.form["flag"]
value = request.form["value"]
@ -54,7 +54,7 @@ def problem_delete():
problem = Problems.query.filter_by(pid=pid).first()
if problem:
Solves.query.filter_by(pid=pid).delete()
Challenges.query.filter_by(pid=pid).delete()
Problems.query.filter_by(pid=pid).delete()
db.session.commit()
return { "success": 1, "message": "Success!" }
return { "success": 0, "message": "Problem does not exist!" }

View file

@ -174,3 +174,19 @@ li a, .navbar-brand {
-moz-animation-duration: 1s;
animation-duration: 1s;
}
.modal {
text-align: center;
}
@media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

View file

@ -52,7 +52,8 @@ function render_problems() {
problem += `<br>
<div id="hint_` + data[i]["pid"] + `" style="display:none">` + data[i]["hint"] + `</div>
<div class="row" id="status_` + data[i]["pid"] + `"></div><br>
<input class="btn btn-success" type="submit" name="update" value="Update!">
<input class="btn btn-success" type="submit" name="update" value="Update">
<input class="btn btn-danger" name="delete-modal" type="button" data-toggle="modal" data-target="#delete-modal" value="Delete">
</div></form></div>`
$("#problems").append(problem);
}
@ -68,10 +69,18 @@ function render_problems() {
var disabled = $("input[name=disabled]", problem).prop("checked") ? 1 : 0;
update_problem(pid, name, category, description, hint, flag, disabled, value);
});
$("[name=delete-modal]").click(function(e) {
var problem = $(this).parents("form:first");
var pid = $("input[name=pid]", problem).val();
var div = $(this).closest("div.panel");
$("#delete").off().click(function(e) {
delete_problem(pid, div);
});
});
});
}
function update_problem (pid, name, category, description, hint, flag, disabled, value) {
function update_problem(pid, name, category, description, hint, flag, disabled, value) {
$.post("/api/problem/update", {
pid: pid,
name: name,
@ -87,7 +96,24 @@ function update_problem (pid, name, category, description, hint, flag, disabled,
} else {
display_message("status_" + pid, "danger", data.message, function() {});
}
})
});
}
function delete_problem(pid, div) {
$.post("/api/problem/delete", {
pid: pid
}, function(data) {
if (data.success == 1) {
display_message("delete_status", "success", data.message, function() {
div.slideUp("normal", function() {
$(this).remove();
$("#delete-modal").modal("hide");
} );
});
} else {
display_message("delete_status", "warning", data.message, function() {});
}
});
}
$(function() {

View file

@ -1,44 +1,77 @@
<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="status"></div>
<input type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#add-modal" value="Add Problem">
<div id="problems"></div>
<div class="modal fade" id="add-modal" tabindex="-2" role="dialog" aria-labelledby="add-modal-label" data-backdrop="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="add-modal-label">Add Problem</h4>
</div>
<div class="modal-body">
<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="problem-hint" id="problem-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 center-block">
</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>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input form="add-form" id="add-problem" type="submit" class="btn btn-primary" value="Add Problem">
</div>
</div>
</div>
</div>
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="delete-modal-label" data-backdrop="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="delete-modal-label">Delete Problem</h4>
</div>
<div class="modal-body">
Are you sure you want to delete this problem? You cannot undo this.
<div id="delete_status"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" id="delete" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
<script src="js/admin/problems.js"></script>
</center>