[optimize] several UI details (#4)

source/index.html

@@ -77,6 +77,15 @@
                 公益捐助
               </a>
             </li>
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                target="_blank"
+                href="https://github.com/stonelf/China-college-application"
+              >
+                开源代码
+              </a>
+            </li>
             <li class="nav-item">
               <a class="nav-link" href="javascript: ;">
                 访问量：<span id="pageView"></span>

source/index.webmanifest

@@ -1,7 +1,7 @@
 {
   "name": "填教授",
   "short_name": "填教授",
-  "start_url": "https://college-applier.fcc-cd.dev/",
+  "start_url": "/",
   "description": "高考志愿填报助手",
   "scope": "/",
   "display": "standalone",
@@ -14,7 +14,7 @@
     {
       "src": "images/logo.png",
       "type": "image/png",
-      "sizes": "256x256"
+      "sizes": "128x128"
     }
   ]
 }

source/pages/donation.html

@@ -18,5 +18,8 @@ <h2 class="m-3">请程序员喝杯咖啡</h2>
       <img src="../images/alipay.jpg" />
       <figcaption>支付宝</figcaption>
     </figure>
+    <script>
+      self.localStorage.moreData = 1;
+    </script>
   </body>
 </html>

source/pages/manual.html

@@ -12,20 +12,20 @@
     <h2 class="text-center">使用说明</h2>
     <ol>
       <li>
-        选择考生所在省份，分科后，填入高考成绩后，点击查询按钮即可查询到根据往年录取情况有可能考上的学校和专业
+        选择考生所在省份、分科后，再填入高考成绩，点击查询按钮即可查询到根据往年录取情况有可能考上的学校和专业
       </li>
       <li>
-        可以下拉选择不同的上线概率后重新查询，来筛选相对保险(高概率、保底)的专业和相对有挑战(低概率)的专业，
+        可以下拉选择不同的上线概率后重新查询，来筛选相对保险（高概率、保底）的专业和相对有挑战（低概率）的专业
       </li>
       <li>对于公布位次的省份，可以选择按照位次来查询筛选专业</li>
       <li>
-        筛选后页面出现过滤按钮，可以输入感兴趣的学校和专业关键字在结果中进行进一步的筛选。
+        筛选后页面出现过滤按钮，可以输入感兴趣的学校和专业关键字在结果中进行进一步的筛选
       </li>
       <li>
-        每年招生情况都会发生变化，因此考生在查询后仍需要通过其他途径进一步了解相关专业当年的招生信息
+        每年招生情况都会发生变化，因此考生在查询后可点击学校、专业名称的链接，进一步了解相关专业当年的招生信息
       </li>
       <li>
-        搬砖不易，请程序员喝杯咖啡的考生除了增加人品值，可能会获得更多隐藏功能。
+        搬砖不易，请程序员喝杯咖啡的考生除了增加人品值，可能会获得更多隐藏功能
       </li>
     </ol>
   </body>

source/pages/query.html

@@ -34,6 +34,18 @@
           autofocus
         />
       </div>
+      <div class="form-group col-6 col-sm-4" hidden>
+        <label for="position">位次</label>
+        <input
+          type="number"
+          class="form-control"
+          id="position"
+          name="position"
+          required
+          min="0"
+          disabled
+        />
+      </div>
       <div class="form-group col-6 col-sm-4">
         <label for="percent">上线概率</label>
         <select class="form-control" id="percent" name="percent">
@@ -112,7 +124,8 @@ <h6 class="card-subtitle mb-2 text-muted">
         </div>
       </div>
     </template>
-    <footer class="text-center">
+
+    <footer class="p-3 text-center">
       <a class="btn btn-success" href="manual.html">
         使用说明
       </a>

source/pages/query.ts

@@ -43,17 +43,42 @@ queryForm.prepend(
  * 分数、位次切换
  */
 const resultBox = document.querySelector("body > main"),
-  scoreLabel = document.querySelector('label[for="score"]');
+  scoreInput = document.querySelector<HTMLInputElement>("#score"),
+  positionInput = document.querySelector<HTMLInputElement>("#position");
+
+function switchMode(type: string) {
+  if (type === "s") {
+    scoreInput.disabled = scoreInput.parentElement.hidden = false;
+    positionInput.disabled = positionInput.parentElement.hidden = true;
+  } else {
+    scoreInput.disabled = scoreInput.parentElement.hidden = true;
+    positionInput.disabled = positionInput.parentElement.hidden = false;
+  }
+  filterForm.hidden = true;
+  resultBox.innerHTML = "";
+}
 
 document.querySelector<HTMLSelectElement>("#search_by").onchange = ({
   target,
-}) => {
-  const { value } = target as HTMLSelectElement;
+}) => switchMode((target as HTMLSelectElement).value);
+/**
+ * 输入缓存
+ */
+for (const input of queryForm.elements) {
+  const { name } = input as HTMLInputElement;
+  const value = self.localStorage[name];
 
-  scoreLabel.textContent = searchBy[value].slice(1);
+  if (!value) continue;
 
-  filterForm.hidden = true;
-  resultBox.innerHTML = "";
+  (input as HTMLInputElement).value = value;
+
+  if (name === "search_by") switchMode(value);
+}
+
+queryForm.onchange = ({ target }) => {
+  const { name, value } = target as HTMLInputElement;
+
+  self.localStorage[name] = value;
 };
 /**
  * 查询、渲染数据
@@ -71,17 +96,33 @@ function renderAll() {
 queryForm.onsubmit = async (event) => {
   event.preventDefault();
 
-  const { province, division, percent, score, search_by } = Object.fromEntries(
-      Array.from(queryForm.elements, ({ name, value }: HTMLInputElement) => [
-        name,
-        value,
-      ])
+  const {
+      province,
+      division,
+      percent,
+      score,
+      position,
+      search_by,
+    } = Object.fromEntries(
+      Array.from(
+        queryForm.elements,
+        ({ name, disabled, value }: HTMLInputElement) => [
+          name,
+          !disabled && value,
+        ]
+      )
     ),
     button = queryForm.querySelector("button");
 
-  const path = [province, division, percent, score, search_by, "data.js"].join(
-    "/"
-  );
+  const path = [
+    province,
+    division,
+    percent,
+    score || position,
+    search_by,
+    self.localStorage.moreData == 1 ? "list.js" : "data.js",
+  ].join("/");
+
   ping(path);
 
   button.disabled = true;
@@ -93,17 +134,25 @@ queryForm.onsubmit = async (event) => {
 
   const two_columns = +percent !== 50;
 
-  data = list.map(({ [scoreKey]: score, s50, p50, ...rest }) => ({
-    score: two_columns ? s50 || p50 : score,
-    position: two_columns ? score : "",
-    dimension: searchBy[search_by].slice(1),
-    percent: +percent,
-    ...rest,
-  })) as Major[];
+  data = list
+    .map(
+      ({ [scoreKey]: score, s50, p50, ...rest }) =>
+        ({
+          score: two_columns ? s50 || p50 : score,
+          position: two_columns ? score : "",
+          dimension: searchBy[search_by].slice(1),
+          percent: +percent,
+          ...rest,
+        } as Major)
+    )
+    .sort(({ position: A, score: C }, { position: B, score: D }) =>
+      search_by === "s" ? B - A || D - C : A - B || C - D
+    );
 
   renderAll();
 
   button.disabled = filterForm.hidden = false;
+  (filterForm.elements[0] as HTMLInputElement).value = "";
 };
 /**
  * 筛选数据