submission-review/index.htm at gh-pages · sitcon-tw/submission-review · 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 lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>SITCON Reviewing Tool</title>
  <script src="https://unpkg.com/vue@2.5.16/dist/vue.js" integrity="sha384-uDHwRgVGzCbHUyl2dKQHqgCAab0OIx/w9PqT3pvjaX/ZGARjKanO5mJGjmdixblb" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js" integrity="sha384-+mbV2IY1Zk/X1p/nWllGySJSUN8uMs+gUAN10Or95UBH0fpj6GfKgPmgC5EXieXG" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.css" integrity="sha384-2QMA5oZ3MEXJddkHyZE/e/C1bd30ZUPdzqHrsaHMP3aGDbPA9yh77XDHXC9Imxw+" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">
  <link rel="stylesheet" href="style.css" media="all">
  <meta property="og:title" content="SITCON Submissions Reviewing Tool">
  <meta property="og:description" content="Make you more comfortable to review submissions.">
  <meta property="og:url" content="https://sitcon.org/submission-review/">
  <meta property="og:image" content="https://sitcon.org/submission-review/open-graph.png">
  <meta property="og:image:type" content="website">
  <link rel="icon" href="https://sitcon.org/submission-review/favicon.png">
  <script src="config.js"></script>
</head>
<body>
  <div id="app"></div>

  <!---------------------------

      BEGIN VUE.JS TEMPLATES

  ---------------------------->

  <template id="t">
    <div class="container">
      <h1>SITCON Submissions Reviewing Tool</h1>

      <section v-if="state === 'DONE' && sheets.length > 1" class="sheet-switcher">
        <label for="sheetSelect">Worksheet</label>
        <select id="sheetSelect" :value="activeSheetName" @change="switchSheet($event.target.value)">
          <option v-for="s in sheets" :key="s.name" :value="s.name">{{s.name}}</option>
        </select>
        <span class="text-muted small">{{sheets.length}} sheets in ZIP</span>
      </section>

      <section v-if="fields.length" class="config-panel">
        <div class="config-header">
          <div>
            <h2>Display fields</h2>
            <p class="text-muted small">Choose which fields appear in each submission. Updates instantly.</p>
          </div>
          <div class="config-actions">
            <button type="button" class="btn btn-inline btn-ghost" @click="selectAllFields">Select all</button>
            <button type="button" class="btn btn-inline btn-ghost" @click="clearSelectedFields">Clear</button>
          </div>
        </div>
        <div class="config-meta">
          Showing {{displayFields.length}} of {{fields.length}} fields
        </div>
        <label class="skip-row-control" for="skipRows">
          <span>Skip rows</span>
          <input id="skipRows" type="number" min="0" step="1" v-model.number="skipRows" @change="normalizeSkipRows">
        </label>
        <div class="config-grid">
          <label v-for="field in fields" v-if="field" class="checkbox-row">
            <input type="checkbox" :value="field" v-model="selectedFields">
            <span>{{field}}</span>
          </label>
        </div>
      </section>

      <div v-if="db.length > 0 && displayFields.length === 0" class="empty-fields text-muted small">
        No fields selected. Choose fields above to show submissions.
      </div>
      <data-view v-if="db.length > 0" v-for="(data, i) in db" :key="i" :data="data" :fields="displayFields"></data-view>
      <div v-if="state === 'LOADING'">Loading...</div>
      <div v-if="state === 'NOFILE'">
        Please drag an HTML or ZIP file into this window or click the button below to upload.
        <br>
        <label for="file" class="drop-container">
          <span class="drop-title">Drop the file here</span>
          or
          <input type="file" @change="onUploadByButton" accept=".html, .htm, .zip">
        </label>
      </div>
      <div v-if="state === 'ERROR'">Loading failed. The file may be corrupted or the ZIP may not contain the expected worksheet HTML. Please try another HTML or ZIP file.</div>
      <div v-if="state === 'DONE' && db.length == 0">NO DATA</div>

      <div class="button-container">
        <button type="button" class="btn" id="btnReturnToHome" v-on:click="returnToHome">
          <span class="material-symbols-outlined">
            home
          </span>
        </button>
        <button type="button" class="btn" id="btnSwitchTheme" v-on:click="changeTheme">
          <span class="material-symbols-outlined">
            dark_mode
          </span>
        </button>
        <button type="button" class="btn" id="btnScrollToTop" v-on:click="scrollToTop">
          <span class="material-symbols-outlined">
            arrow_upward
          </span>
        </button>
      </div>
    </div>
  </template>

  <template id="data-field">
    <div class="field">
      <span class="field-name" :class="!data[field] ? 'small text-muted' : ''">{{field}}</span>
      <span class="field-content">
        <a v-if="typeof data[field] === 'string' && data[field].match(/^https?:(?!http).*$/)" :href="data[field]" target="_blank">{{data[field]}}</a>
        <span v-else-if="data[field]">{{data[field]}}</span>
        <span class="small text-muted" v-else>None</span>
      </span>
    </div>
  </template>

  <template id="data-view">
    <div class="data">
      <div class="data-actions">
        <button type="button" class="btn btn-inline btn-icon" @click="copyAsMarkdown" :disabled="!fields || fields.length === 0" title="Copy as Markdown" aria-label="Copy as Markdown" data-tooltip="Copy as Markdown">
          <span class="material-symbols-outlined">content_copy</span>
        </button>
        <button type="button" class="btn btn-inline btn-icon btn-ghost" @click="copyFieldsAsMarkdown($event)" :disabled="!fields || fields.length === 0" title="Copy selected fields as Markdown" aria-label="Copy fields as Markdown" data-tooltip="Copy selected fields">
          <span class="material-symbols-outlined">checklist</span>
        </button>
      </div>
      <data-field v-for="(field, i) in fields" :key="i" v-if="field" :field="field" :data="data"></data-field>
    </div>
  </template>

  <!---------------------------

       END VUE.JS TEMPLATES

  ---------------------------->

  <script src="app.js"></script>
</body>
</html>
<!--
  vim: et sw=2
-->