Add icons for judge status

models/problem.js

@@ -129,26 +129,23 @@ class Problem extends Model {
     this.testdata_id = file.id;
   }
 
-  async getSubmitStatus(user) {
+  async getJudgeState(user) {
     if (!user) return null;
 
     let JudgeState = syzoj.model('judge_state');
 
-    let status = await JudgeState.model.findAll({
-      attributes: ['status'],
-      where: {
+    let states = await JudgeState.query(null, {
       user_id: user.id,
       problem_id: this.id
-      }
-    });
+    }, [['submit_time', 'desc']]);
 
-    if (!status || status.length === 0) return null;
+    if (!states || states.length === 0) return null;
 
-    for (let x of status) {
-      if (x.get('status') === 'Accepted') return true;
+    for (let x of states) {
+      if (x.status === 'Accepted') return x;
     }
 
-    return false;
+    return states[0];
   }
 
   getModel() { return model; }

modules/problem.js

@@ -31,7 +31,7 @@ app.get('/problem', async (req, res) => {
 
     await problems.forEachAsync(async problem => {
       problem.allowedEdit = await problem.isAllowedEditBy(res.locals.user);
-      problem.status = await problem.getSubmitStatus(res.locals.user);
+      problem.judge_state = await problem.getJudgeState(res.locals.user);
     });
 
     res.render('problem_set', {

static/style.css

@@ -128,3 +128,19 @@ th {
     color: rgba(0, 0, 0, 0.6);
     font-size: 0.85em;
 }
+
+/* Animated spinner */
+@keyframes spinner-icon-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner.icon {
+  animation: spinner-icon-rotate 3s linear infinite;
+  width: 16.52px;
+  height: 16.52px;
+}

views/judge_detail.ejs

@@ -52,7 +52,10 @@
       'Runtime Error': 'bomb',
       'Time Limit Exceed': 'clock',
       'Memory Limit Exceed': 'disk outline',
-		'Output Limit Exceed': 'expand'
+      'Output Limit Exceed': 'expand',
+      'Waiting': 'spinner',
+      'Compile Error': 'code',
+      'System Error': 'server'
     }
 	  %>
       <i class="<%= icon[testcase.status] || 'remove' %> icon"></i>

views/judge_state.ejs

@@ -36,6 +36,20 @@
         <% if (!judge.hidden) { %>
         <td><a href="<%= syzoj.utils.makeUrl(['judge_detail', judge.id]) %>">
             <span class="status <%= judge.status.toLowerCase().split(' ').join('_') %>">
+            <%
+            let icon = {
+              'Accepted': 'checkmark',
+              'Wrong Answer': 'remove',
+              'Runtime Error': 'bomb',
+              'Time Limit Exceed': 'clock',
+              'Memory Limit Exceed': 'disk outline',
+              'Output Limit Exceed': 'expand',
+              'Waiting': 'spinner',
+              'Compile Error': 'code',
+              'System Error': 'server'
+            }
+            %>
+            <i class="<%= icon[judge.status] || 'remove' %> icon"></i>
             <%= judge.status %>
             </span>
         </a></td>

views/problem_set.ejs

@@ -27,10 +27,23 @@
         <tr>
             <% if (user) { %>
                 <td>
-                <% if (problem.status === true) { %>
-                    <i class="checkmark icon"></i>
-                <% } else if (problem.status === false) { %>
-                    <i class="remove icon"></i>
+                <% if (problem.judge_state) { %>
+                  <%
+                    let icon = {
+                      'Accepted': 'checkmark',
+                      'Wrong Answer': 'remove',
+                      'Runtime Error': 'bomb',
+                      'Time Limit Exceed': 'clock',
+                      'Memory Limit Exceed': 'disk outline',
+                      'Output Limit Exceed': 'expand',
+                      'Waiting': 'spinner',
+                      'Compile Error': 'code',
+                      'System Error': 'server'
+                    }
+                  %>
+                  <span class="status <%= problem.judge_state.status.toLowerCase().split(' ').join('_') %>">
+                    <i class="<%= icon[problem.judge_state.status] || 'remove' %> icon"></i>
+                  </span>
                 <% } %>
                 </td>
             <% } %>