core: init graphql

packages/ui-default/build/index.js

@@ -29,6 +29,9 @@ require.extensions['.js'] = function loader(module, filename) {
   const content = fs.readFileSync(filename, 'utf-8');
   return module._compile(content, filename);
 };
+require.extensions['.ts'] = function loader(module, filename) {
+  return module._compile(transform(filename), filename);
+};
 const main = require('./main.js');
 
 if (!module.parent) main();

packages/ui-default/misc/PageLoader.js

@@ -2,8 +2,8 @@ import { Page } from './Page';
 
 export default class PageLoader {
   constructor() {
-    const pages = require.context('../pages/', true, /\.page\.jsx?$/i);
-    const components = require.context('../components/', true, /\.page\.jsx?$/i);
+    const pages = require.context('../pages/', true, /\.page\.[jt]sx?$/i);
+    const components = require.context('../components/', true, /\.page\.[jt]sx?$/i);
     this.pageInstances = [
       ...pages.keys().map((key) => {
         const page = pages(key).default;

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.17.8",
+  "version": "4.18.0",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -41,6 +41,7 @@
     "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "fs-extra": "^10.0.0",
+    "graphiql": "^1.4.2",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "gulp-iconfont": "^11.0.0",

packages/ui-default/pages/api.page.styl

@@ -0,0 +1,2 @@
+.graphiql-container .doc-explorer-title, .graphiql-container .history-title
+  padding: 2px !important

packages/ui-default/pages/api.page.tsx

@@ -0,0 +1,45 @@
+import { NamedPage } from 'vj/misc/Page';
+import request from 'vj/utils/request';
+import React from 'react';
+import { render } from 'react-dom';
+import 'graphiql/graphiql.css';
+
+const Logo = () => <span>Hydro API Console </span>;
+
+// @ts-ignore
+
+const page = new NamedPage('api', async () => {
+  const [{ default: GraphiQL }, { buildSchema }, res] = await Promise.all([
+    import('graphiql'),
+    import('graphql'),
+    request.get('/api?schema'),
+  ]);
+  // @ts-ignore
+  GraphiQL.Logo = Logo;
+  console.log(res);
+  const App = () => (
+    <GraphiQL
+      schema={buildSchema(res.schema)}
+      style={{ height: '100vh' }}
+      fetcher={async (graphQLParams) => {
+        const data = await fetch(
+          '/api',
+          {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(graphQLParams),
+            credentials: 'same-origin',
+          },
+        );
+        return data.json().catch(() => data.text());
+      }}
+    />
+  );
+
+  render(<App />, document.getElementById('graphiql'));
+});
+
+export default page;

packages/ui-default/templates/api.html

@@ -0,0 +1,4 @@
+{% extends "layout/basic.html" %}
+{% block content %}
+<div id="graphiql" style="height:90vh;"></div>
+{% endblock %}

packages/ui-default/templates/components/record.html

@@ -1,9 +1,12 @@
-{% macro render_status_td(rdoc, rid_key='_id', class='') %}
+{% macro render_status_td(rdoc, rid_key='_id', class='', allDomain = false) %}
 <td class="col--status record-status--border {{ class }} {{ model.builtin.STATUS_CODES[rdoc.status] }}">
   <div class="col--status__text">
     <span class="icon record-status--icon {{ model.builtin.STATUS_CODES[rdoc.status] }}"></span>
     <span style="color: {{ utils.status.getScoreColor(rdoc.score|default(0)) }}">{{ rdoc.score|default(0) }}</span>
-    <a href="{{ url('record_detail', rid=rdoc[rid_key]) }}" class="record-status--text {{ model.builtin.STATUS_CODES[rdoc.status] }}">
+    <a 
+      href="{{ url('record_detail', rid=rdoc[rid_key], domainId=rdoc.domainId) if allDomain else url('record_detail', rid=rdoc[rid_key]) }}"
+      class="record-status--text {{ model.builtin.STATUS_CODES[rdoc.status] }}"
+    >
       {{ model.builtin.STATUS_TEXTS[rdoc.status] }}
     </a>
   </div>

packages/ui-default/templates/contest_detail.html

@@ -10,14 +10,14 @@
         <h1 class="section__title">{{ tdoc.title }}</h1>
       </div>
       <div class="section__body">
-        <span class="bp3-tag bp3-large bp3-minimal problem__tag-item">{{ _('Status') }}: {{ _(model.contest.statusText(tdoc)) }}</span>
-        <span class="bp3-tag bp3-large bp3-minimal problem__tag-item bp3-icon-standard bp3-icon-book">{{ _(model.contest.RULES[tdoc.rule].TEXT) }}</span>
+        <span class="bp3-tag bp3-large bp3-minimal problem__tag-item">{{ _(model.contest.statusText(tdoc)) }}</span>
+        <span class="bp3-tag bp3-large bp3-minimal problem__tag-item icon icon-award">{{ _(model.contest.RULES[tdoc.rule].TEXT) }}</span>
         <span class="bp3-tag bp3-large bp3-minimal problem__tag-item">{{ _('Start at') }}: {{ contest.render_time(tdoc.beginAt) }}</span>
-        <span class="bp3-tag bp3-large bp3-minimal problem__tag-item">{{ _('End at') }}: {{ contest.render_time(tdoc.endAt) }}</span>
+        <span class="bp3-tag bp3-large bp3-minimal problem__tag-item icon icon-schedule">{{ contest.render_duration(tdoc) }} {{ _('hour(s)') }}</span>
         <span class="bp3-tag bp3-large bp3-minimal problem__tag-item">{{ _('Host') }}: {{ user.render_inline(udict[tdoc.owner], badge=false) }}</span>
-        <span class="bp3-tag bp3-large bp3-minimal problem__tag-item">{{ _('Partic.') }}: {{ tdoc['attend']|default(0) }}</span>
+        <span class="bp3-tag bp3-large bp3-minimal problem__tag-item icon icon-user--multiple">{{ tdoc['attend']|default(0) }}</span>
         {% if attended %}
-          <span class="bp3-tag bp3-large bp3-minimal problem__tag-item bp3-icon-standard bp3-icon-tick">{{ _('Attended') }}</span>
+          <span class="bp3-tag bp3-large bp3-minimal problem__tag-item icon icon-check">{{ _('Attended') }}</span>
         {% endif %}
       </div>
     </div>

packages/ui-default/templates/error.html

@@ -1,4 +1,3 @@
-{% set no_path_section = true %}
 {% extends "layout/basic.html" %}
 {% block content %}
 <div class="error__container clearfix">

packages/ui-default/templates/record_main_tr.html

@@ -1,10 +1,10 @@
 {% import "components/record.html" as record with context %}
 {% import "components/problem.html" as problem with context %}
 <tr data-rid="{{ rdoc['_id'] }}">
-  {{ record.render_status_td(rdoc) }}
+  {{ record.render_status_td(rdoc, allDomain = all) }}
   <td class="col--problem col--problem-name">
   {% if handler.user.hasPerm(perm.PERM_REJUDGE) %}
-    <form class="form--inline" method="post" action="{{ url('record_detail', rid=rdoc._id) }}">
+    <form class="form--inline" method="post" action="{{ url('record_detail', rid=rdoc._id, domainId=rdoc.domainId) }}">
       <input type="hidden" name="operation" value="rejudge">
       <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
       <button type="submit" class="link text-maroon lighter">