☰

Tocas-UI CK_Announcement

Prettify CK Announcement

  1. // ==UserScript==
  2. // @name         Tocas-UI CK_Announcement
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.2
  5. // @description  Prettify CK Announcement
  6. // @author       oToToT
  7. // @match        https://web.ck.tp.edu.tw/ann/*
  8. // @match        http://web.ck.tp.edu.tw/ann/*
  9. // @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  10. // @require      https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js
  11. // @require      https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js
  12. // @require      https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.zh.min.js
  13. // @grant        GM_addStyle
  14. // ==/UserScript==
  15.  
  16. /* initialize */
  17. if(location.protocol === 'http:'){
  18.     location.protocol = 'https:'
  19. }else{
  20.     const AddStylesheet = async function(href){
  21.         let script = document.createElement('link');
  22.         script.setAttribute('href', href);
  23.         script.setAttribute('rel','stylesheet');
  24.         script.setAttribute('type', 'text/css');
  25.         await document.head.appendChild(script);
  26.     };
  27.     const identify = new URL(location.href);
  28.     const page_type = identify.pathname
  29.     console.log("Using: "+page_type);
  30.     if(page_type === "/ann/" || page_type==="/ann/index.php"){
  31.         (async()=>{
  32.             /* add scripts */
  33.             await AddStylesheet("https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css");
  34.             await AddStylesheet("https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css");
  35.             GM_addStyle(`body{
  36. background-color: rgb(243, 227, 203)
  37. }
  38. .ts.surrounded{
  39. padding: 1.8em !important;
  40. }`);
  41.             /* my script */
  42.             let anns = [];
  43.             $("table:eq(1) tr:not(:eq(0))").each(function(){
  44.                 let obj = {};
  45.                 obj.level = $(this).find("td:eq(0)").text().trim();
  46.                 obj.title = $(this).find("td:eq(1)").text().trim();
  47.                 obj.origin = $(this).find("td:eq(2)").text().trim();
  48.                 obj.date = $(this).find("td:eq(3)").text().trim();
  49.                 obj.popularity = $(this).find("td:eq(4)").text().trim();
  50.                 obj.href = $(this).find('a').attr("href");
  51.                 anns.push(obj);
  52.             });
  53.             let htmlData = `<div class="ts fluid top link huge menu">
  54. <div class="ts narrow container"><a class="item" href="/">台北市立建國高級中學公告系統</a><span class="item right"><a href="/ann/index.php">
  55.         <button class="ts mini very compact basic button">列出全部</button></a></span></div>
  56. </div>
  57. <div class="ts narrow container surrounded">
  58. <table class="ts attatched selectable striped celled table">
  59. <thead>
  60. <tr>
  61. <th>標題</th>
  62. <th>單位</th>
  63. <th>日期</th>
  64. <th>人氣</th>
  65. </tr>
  66. </thead>
  67. <tbody>
  68. ${anns.map((ele)=>{
  69.     let ret_str = "";
  70.     if(ele.level === '普通'){
  71.         ret_str += `<tr class="info indicated">
  72. <!-- 普通-->`;
  73.     }else if(ele.level === '重要'){
  74.         ret_str += `<tr class="primary indicated">
  75. <!-- 重要-->`;
  76.     }else if(ele.level === '急件'){
  77.         ret_str += `<tr class="negative indicated">
  78. <!-- 急件-->`;
  79.     }else{ return `<tr><td>Parsing Failed</td><td>Parsing Failed</td><td>Parsing Failed</td><td>Parsing Failed</td></tr>`;}
  80.     ret_str += `
  81. <td><a href="${ele.href}">${ele.title}</a></td>
  82. <td>${ele.origin}</td>
  83. <td>${ele.date}</td>
  84. <td>${ele.popularity}</td>
  85. </tr>`
  86.     return ret_str;
  87. }).join('')}
  88. </tbody>
  89. </table>
  90. <div class="ts horizontal list">
  91. <a class="item${(typeof $("a:contains('上一頁')").attr('href') === 'undefined')?" disabled":""}" href="${$("a:contains('上一頁')").attr('href')}">上一頁</a>
  92. <a class="item${(typeof $("a:contains('下一頁')").attr('href') === 'undefined')?" disabled":""}" href="${$("a:contains('下一頁')").attr('href')}">下一頁</a>
  93. <span class="item">
  94. <select class="ts dropdown basic" onchange="location=this.value;">
  95. ${$('select:eq(-1)').html()}
  96. </select>
  97. ${$('select:eq(-1)').next().text()}
  98. </span>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="ts surrounded">
  103. <div class="ts narrow container">
  104. <div class="ts slate">
  105. <form class="ts form" action="/ann/index.php" method="POST">
  106. <fieldset>
  107. <legend>搜尋參數</legend>
  108. <div class="inline field">
  109. <label for="mysearch">搜尋</label>
  110. <input id="mysearch" type="text" name="mysearch" />
  111. </div>
  112. <div class="field">
  113. <div class="ts toggle checkbox">
  114. <input id="stxt" type="checkbox" name="stxt" />
  115. <label for="stxt">含內容</label>
  116. </div>
  117. </div>
  118. <div class="inline fields">
  119. <div class="eight wide field">
  120. <label>幾天以內</label>
  121. <input type="number" name="myday" />
  122. </div>
  123. <div class="eight wide field">
  124. <label>何時之前</label>
  125. <input class="datepicker-here" id="mydate" type="text" data-language="zh" data-min-view="months" data-view="months" data-date-format="yyyy, MM" />
  126. <input type="hidden" name="myyear" id="myyear">
  127. <input type="hidden" name="mymonth" id="mymonth">
  128. </div>
  129. </div>
  130. </fieldset>
  131. <div class="ts two fields">
  132. <div class="field">
  133. <label>類別</label>
  134. <select name="myclass">
  135. ${$("select[name='myclass']:eq(0)").html()}
  136. </select>
  137. </div>
  138. <div class="field">
  139. <label>群組</label>
  140. <select onchange="location.href=this.options[this.selectedIndex].value">
  141. ${$("select[name='mypartid']:eq(1)").html()}
  142. </select>
  143. </div>
  144. </div>
  145. <button class="ts positive button">查詢</button>
  146. </form>
  147. </div>
  148. </div>
  149. </div>`;
  150.             // clear data
  151.             $("body").attr("background","");
  152.             $("center").remove();
  153.             $("br").remove();
  154.             $("style[id^='stylus']").remove();
  155.             // append html
  156.             document.body.innerHTML += htmlData;
  157.             $("#mydate").datepicker({
  158.                 "onSelect": function(str, d, inst) {
  159.                     $("#myyear").val(d.getFullYear());
  160.                     $("#mymonth").val(d.getMonth());
  161.                 }
  162.             });
  163.         })();
  164.     }else if(page_type === "show"){
  165.     }
  166. }