ISL_Web/admin_review.html at main · AnushkaPandit-21/ISL_Web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html>
<head>
  <title>Admin Review Dashboard</title>

  <style>
    body {
      font-family: Arial;
      background: #0b0f17;
      color: white;
      padding: 20px;
    }

    h1 {
      color: #6ea8fe;
    }

    .box {
      background: #121a27;
      padding: 15px;
      border-radius: 12px;
      margin-bottom: 20px;
    }

    .item {
      padding: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .anno {
      font-size: 13px;
      margin-left: 15px;
      margin-top: 5px;
      color: #cccccc;
    }

    .empty {
      color: gray;
      font-style: italic;
    }
  </style>
</head>

<body>

<h1>Admin Review Dashboard</h1>

<!-- Summary -->
<div class="box" id="summary">
  Loading review summary...
</div>

<!-- Categories -->
<div class="box">
  <h2>Both Commented Videos</h2>
  <div id="bothCommentList"></div>
</div>

<div class="box">
  <h2>Mismatched Annotations</h2>
  <div id="mismatchList"></div>
</div>

<div class="box">
  <h2>One Missing Annotations</h2>
  <div id="missingList"></div>
</div>


<script>
const BASE = "/isl";

/* ✅ Helper: Render one category list */
function renderList(divId, list) {

  const div = document.getElementById(divId);
  div.innerHTML = "";

  // Empty case
  if (list.length === 0) {
    div.innerHTML = `<p class="empty">No videos in this category ✅</p>`;
    return;
  }

  // Render each video
  list.forEach(v => {

    let annoHTML = "";

    // If annotations exist, show them
    if (v.annotations) {
      annoHTML = v.annotations.map(a => `
        <div class="anno">
          Annotator <b>${a.annotator}</b> :
          <b>${a.label}</b>
          ${a.note ? " - " + a.note : ""}
        </div>
      `).join("");
    }

    div.innerHTML += `
      <div class="item">
        <b>Video ID:</b> ${v.id} |
        <b>Word:</b> ${v.word} |
        <b>User:</b> ${v.user_id}
        ${annoHTML}
      </div>
    `;
  });
}

/* ✅ Load dashboard data */
async function loadReview() {

  const res = await fetch(BASE + "/api/admin/review_summary");

  if (!res.ok) {
    alert("❌ Admin only or session expired. Please login again.");
    return;
  }

  const data = await res.json();

  /* ✅ Summary */
  document.getElementById("summary").innerHTML =
    "<b>Annotated (Correct):</b> " + data.annotated + "<br>" +
    "<b>Not Annotated:</b> " + data.not_annotated + "<br>" +
    "<b>One Missing:</b> " + data.one_missing.length + "<br>" +
    "<b>Mismatched:</b> " + data.mismatch.length + "<br>" +
    "<b>Both Commented:</b> " + data.both_comment.length;

  /* ✅ Render all categories */
  renderList("bothCommentList", data.both_comment);
  renderList("mismatchList", data.mismatch);
  renderList("missingList", data.one_missing);
}

/* Run */
loadReview();
</script>

</body>
</html>