增加题目列表页和部分 ajax js [CI SKIP]

oj/urls.py

@@ -15,5 +15,5 @@ urlpatterns = [
     url(r'^problem/(?P<problem_id>\d+)/$', "problem.views.problem_page", name="problem_page"),
 
     url(r'^admin/contest/$', TemplateView.as_view(template_name="admin/contest/add_contest.html"), name="add_contest_page"),
-
+    url(r'^problems/$', TemplateView.as_view(template_name="oj/problem/problem_list.html"), name="problem_list_page"),
 ]

static/src/css/oj.css

@@ -75,4 +75,14 @@ label {
 
 #submit-code-button{
     margin: 10px;
+}
+
+li.list-group-item {
+    padding: 10px 15px;
+    margin-bottom: -1px;
+    border: 1px solid #e5e5e5;
+}
+
+.panel>.list-group{
+    padding: 0 0;
 }

static/src/js/app/oj/problem/problem_list.js

@@ -0,0 +1,6 @@
+require(["jquery", "avalon"], function($, avalon){
+    var vm = avalon.define({
+        $id: "problem_list",
+        problem_list: []
+    })
+});

template/oj/index.html

@@ -8,7 +8,7 @@
 
             <p class="lead">走心的在线评测平台和算法交流社区，全新登场~</p>
 
-            <p><a class="btn btn-lg btn-primary" href="#" role="button">开始刷题！</a></p>
+            <p><a class="btn btn-lg btn-primary" href="/problems/" role="button">开始刷题！</a></p>
         </div>
 
         <!-- Example row of columns -->

template/oj/problem/problem.html

@@ -89,5 +89,5 @@
 </div>
 {% endblock %}
 {% block js_block %}
-    <script src="/static/js/require.js" data-main="/static/js/app/oj/problem/submit_code.js"></script>
+    <script src="/static/js/app/oj/problem/submit_code.js"></script>
 {% endblock %}

template/oj/problem/problem_list.html

@@ -0,0 +1,91 @@
+{% extends "oj_base.html" %}
+{% block body %}
+    <div class="container" ms-controller="problem_list">
+        <div class="row">
+            <div class="col-lg-9">
+                <div class="row">
+                    <div class="col-lg-3 col-lg-offset-9">
+                        <input type="text" class="form-control" placeholder="搜索题号，标题">
+                    </div>
+                </div>
+                <div>
+                    <table class="table table-striped">
+                        <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>题目</th>
+                            <th>难度</th>
+                            <th>通过率</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <th scope="row"><a href="/problem/1/">1</a></th>
+                            <td><a href="/problem/1/">Mark</a></td>
+                            <td>Otto</td>
+                            <td>@mdo</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">2</th>
+                            <td>Jacob</td>
+                            <td>Thornton</td>
+                            <td>@fat</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">3</th>
+                            <td>Larry</td>
+                            <td>the Bird</td>
+                            <td>@twitter</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="col-lg-3">
+                <div class="panel panel-info">
+                    <div class="panel-heading">
+                        <h3 class="panel-title">
+                            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
+                            公告
+                        </h3></div>
+                    <div class="panel-body"> Panel content</div>
+                </div>
+                <div class="panel panel-info">
+                    <div class="panel-heading">
+                        <h3 class="panel-title">
+                            <span class="glyphicon glyphicon-tag" aria-hidden="true"></span>
+                            分类
+                        </h3>
+                    </div>
+                    <ul class="list-group">
+                        <li class="list-group-item problem-tag">
+                            <span class="badge">14</span>
+                            Cras justo odio
+                        </li>
+                        <li class="list-group-item problem-tag">
+                            <span class="badge">14</span>
+                            Cras justo odio
+                        </li>
+                        <li class="list-group-item problem-tag">
+                            <span class="badge">14</span>
+                            Cras justo odio
+                        </li>
+                        <li class="list-group-item problem-tag">
+                            <span class="badge">14</span>
+                            Cras justo odio
+                        </li>
+                        <li class="list-group-item problem-tag">
+                            <span class="badge">14</span>
+                            Cras justo odio
+                        </li>
+                    </ul>
+                </div>
+
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+{% block js_block %}
+<script src="/static/js/app/oj/problem/problem_list.js"></script>
+{% endblock %}

template/oj_base.html

@@ -38,14 +38,16 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand" href="#">qduoj</a>
+            <a class="navbar-brand" href="/">qduoj</a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav">
-                <li class="active"><a href="#">主页</a></li>
+                <li><a href="/problems/">题目</a></li>
-                <li><a href="#about">题目</a></li>
+                <li><a href="/submissions/">提交</a></li>
-                <li><a href="#contact">提交</a></li>
+                <li><a href="/contests/">比赛</a></li>
+                <li><a href="/about/">关于</a></li>
             </ul>
+            {% if not request.user.is_authenticated %}
             <ul class="nav navbar-nav navbar-right">
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
@@ -60,6 +62,15 @@
                     </ul>
                 </li>
             </ul>
+            {% else %}
+                <ul class="nav navbar-nav navbar-right">
+                <li class="dropdown">
+                    <a href="/login/" class="dropdown-toggle">
+                        登录
+                    </a>
+                </li>
+            </ul>
+            {% endif %}
         </div>
     </div>
 </nav>
@@ -88,6 +99,10 @@
 </div>
 
 <script src="/static/js/config.js"></script>
+<script src="/static/js/require.js"></script>
+<script>
+    require(["bootstrap"]);
+</script>
 {% block js_block %}{% endblock %}
 <!-- footer begin -->
 <div class="footer">