api-upload.php 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. <?php
  2. include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_right.php");
  3. ?>
  4. <!doctype html>
  5. <html class="fixed">
  6. <head>
  7. <!-- jstree CSS -->
  8. <link rel="stylesheet" href="/Common/assets/vendor/jstree/themes/default/style.css" />
  9. <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet">
  10. <?php include("bim-support-header.html"); ?>
  11. <script src="./script/js/global.js"></script>
  12. <style>
  13. th {
  14. width: 10%;
  15. text-align: center;
  16. }
  17. .vjs-tech {
  18. height: 100%;
  19. }
  20. </style>
  21. <script type="application/javascript">
  22. var i = 0;
  23. var api = [];
  24. var fileName;
  25. var folder;
  26. var software;
  27. var userName = "<?php echo $_SESSION['name'] ?>";
  28. var role = "<?php echo ($groupName); ?>";
  29. var right = <?php echo ($right); ?>;
  30. var webLink;
  31. var source;
  32. /*$.ajax({
  33. url: "./script/php/update_popularity.php",
  34. type: "GET",
  35. async: false,
  36. data: {
  37. api_id: object,
  38. update_type: "viewTimes",
  39. },
  40. contentType: "application/json",
  41. dataType: "json"
  42. });*/
  43. pageHeader = "BIM程式庫";
  44. </script>
  45. </head>
  46. <body>
  47. <canvas id="c"></canvas>
  48. <section class="body">
  49. <!-- start: header -->
  50. <header-menu></header-menu>
  51. <!-- end: header -->
  52. <div class="inner-wrapper">
  53. <!-- start: sidebar -->
  54. <side-bar></side-bar>
  55. <!-- end: sidebar -->
  56. <section role="main" class="content-body">
  57. <header class="page-header">
  58. <h2>{{pageHeader}}</h2>
  59. </header>
  60. <!-- start: page -->
  61. <div class="row">
  62. <div class="col-md-12">
  63. <div class="tabs tabs-primary">
  64. <ul class="nav nav-tabs nav-justified">
  65. <li class="active">
  66. <a href="#upload" data-toggle="tab" class="text-center"><i class="fa fa-upload"></i>上傳工具</a>
  67. </li>
  68. <li>
  69. <a href="#edit" data-toggle="tab" class="text-center"><i class="fa fa-edit"></i>編輯工具</a>
  70. </li>
  71. </ul>
  72. <div class="tab-content">
  73. <div id="upload" class="tab-pane active">
  74. <form id="uploadForm">
  75. <div class="row">
  76. <div class="col-sm-6">
  77. <div class="form-group" id="APIName-Form">
  78. <label class="control-label">API名稱</label>
  79. <input required="required" type="text" id="APIName" name="APIName" class="form-control">
  80. </div>
  81. </div>
  82. <div class="col-sm-6">
  83. <div class="form-group">
  84. <label class="control-label">開發者</label>
  85. <input type="text" name="source" id="source" class="form-control">
  86. </div>
  87. </div>
  88. </div>
  89. <div class="row">
  90. <div class="col-sm-6">
  91. <div class="form-group">
  92. <label class="control-label">類型</label>
  93. <select class="form-control mb-md" id="software" name="software">
  94. <option value="Revit">Revit</option>
  95. <option value="Dynamo">Dynamo</option>
  96. </select>
  97. </div>
  98. </div>
  99. <div class="col-sm-6">
  100. <div class="form-group">
  101. <label class="control-label">版本</label>
  102. <select class="form-control mb-md" id="version" name="version">
  103. <option value="通用">Revit 通用</option>
  104. <option value="2014">Revit 2014</option>
  105. <option value="2015">Revit 2015</option>
  106. <option value="2016">Revit 2016</option>
  107. <option value="2017" selected>Revit 2017</option>
  108. <option value="2018">Revit 2018</option>
  109. <option value="2019">Revit 2019</option>
  110. <option value="2020">Revit 2020</option>
  111. <option value="2021">Revit 2021</option>
  112. <option value="2022">Revit 2022</option>
  113. <option value="2023">Revit 2023</option>
  114. </select>
  115. </div>
  116. </div>
  117. </div>
  118. <div class="row">
  119. <div class="col-sm-6">
  120. <div class="form-group">
  121. <label class="control-label">細節說明</label>
  122. <textarea class="form-control" rows="3" id="detail" name="detail" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
  123. </div>
  124. </div>
  125. <div class="col-sm-6">
  126. <div class="form-group">
  127. <label class="control-label">操作方式</label>
  128. <textarea class="form-control" rows="3" id="operate" name="operate" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="row">
  133. <div class="col-sm-6">
  134. <div class="form-group">
  135. <label class="control-label">適用性</label>
  136. <select id="type" name="type" class="form-control mb-md">
  137. <option value="土建">土建</option>
  138. <option value="土開">土開</option>
  139. <option value="軌道">軌道</option>
  140. <option value="機電">機電</option>
  141. <option value="資訊">資訊</option>
  142. <option value="通用">通用</option>
  143. </select>
  144. </div>
  145. </div>
  146. <div class="col-sm-6">
  147. <div class="form-group">
  148. <label class="control-label">關鍵字</label>
  149. <input name="keyword" id="keyword" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="">
  150. </div>
  151. </div>
  152. </div>
  153. <div class="row">
  154. <div class="col-sm-6">
  155. <div class="form-group">
  156. <label class="control-label">物件 (例:結構)</label>
  157. <input name="object" id="object" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="">
  158. </div>
  159. </div>
  160. <div class="col-sm-6">
  161. <div class="form-group">
  162. <label class="control-label">功能 (例:匯出)</label>
  163. <input name="usage" id="usage" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="">
  164. </div>
  165. </div>
  166. </div>
  167. <div class="row">
  168. <div class="col-sm-6">
  169. <div class="form-group">
  170. <label class="control-label">備註</label>
  171. <textarea class="form-control" rows="3" id="notes" name="notes" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
  172. </div>
  173. </div>
  174. <div class="col-sm-6">
  175. <div class="form-group">
  176. <label class="control-label">外部連結</label>
  177. <input type="text" id="webLink" name="webLink" class="form-control" value="空">
  178. </div>
  179. </div>
  180. </div>
  181. <div class="row">
  182. <div class="col-sm-6">
  183. <div class="form-group">
  184. <label class="control-label">上傳API</label>
  185. <div class="fileupload fileupload-new" data-provides="fileupload">
  186. <div class="input-append">
  187. <div class="uneditable-input">
  188. <span id="fileCount" class="fileupload-preview"></span>
  189. </div>
  190. <span class="btn btn-default btn-file">
  191. <span class="fileupload-exists">更換檔案</span>
  192. <span class="fileupload-new">選擇檔案</span>
  193. <input type="file" id="files" multiple webkitdirectory mozdirectory>
  194. </span>
  195. <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
  196. <span class="help-block"><strong>注意事項:</strong>請選擇要上傳的資料夾,盡量不要有子資料夾,若有請壓縮後再上傳
  197. <br>(例:拖放元件)</span>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. <div class="col-sm-6">
  203. <div class="progress progress-striped light active m-md">
  204. <div id="bar" class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  205. 0%
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. <footer class="panel-footer">
  211. <button id="submit" class="btn btn-primary">上傳檔案</button>
  212. <button id="reset" type="reset" class="btn btn-default">清除表單</button>
  213. </footer>
  214. </form>
  215. </div>
  216. <div id="edit" class="tab-pane">
  217. <!-- <form method="post" enctype="multipart/form-data" action="./script/php/importTool/uploadExcel.php">
  218. <div class="row">
  219. <div class="col-sm-6">
  220. <div class="form-group">
  221. <label class="control-label">API名稱</label>
  222. <input type="text" name="APIName" class="form-control">
  223. </div>
  224. </div>
  225. <div class="col-sm-6">
  226. <div class="form-group">
  227. <label class="control-label">開發者</label>
  228. <input type="text" name="source" class="form-control">
  229. </div>
  230. </div>
  231. </div>
  232. <div class="row">
  233. <div class="col-sm-6">
  234. <div class="form-group">
  235. <label class="control-label">類型</label>
  236. <select class="form-control mb-md" id="software" name="software">
  237. <option value="Revit">Revit</option>
  238. <option value="Dynamo">Dynamo</option>
  239. </select>
  240. </div>
  241. </div>
  242. <div class="col-sm-6">
  243. <div class="form-group">
  244. <label class="control-label">版本</label>
  245. <select class="form-control mb-md" id="version" name="version">
  246. <option value="通用">Revit 通用</option>
  247. <option value="2014">Revit 2014</option>
  248. <option value="2015">Revit 2015</option>
  249. <option value="2016">Revit 2016</option>
  250. <option value="2017" selected>Revit 2017</option>
  251. <option value="2018">Revit 2018</option>
  252. <option value="2019">Revit 2019</option>
  253. <option value="2020">Revit 2020</option>
  254. <option value="2021">Revit 2021</option>
  255. <option value="2022">Revit 2022</option>
  256. <option value="2023">Revit 2023</option>
  257. </select>
  258. </div>
  259. </div>
  260. </div>
  261. <div class="row">
  262. <div class="col-sm-6">
  263. <div class="form-group">
  264. <label class="control-label">細節說明</label>
  265. <textarea class="form-control" rows="3" id="detail" name="detail" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
  266. </div>
  267. </div>
  268. <div class="col-sm-6">
  269. <div class="form-group">
  270. <label class="control-label">操作方式</label>
  271. <textarea class="form-control" rows="3" id="operate" name="operate" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
  272. </div>
  273. </div>
  274. </div>
  275. <div class="row">
  276. <div class="col-sm-6">
  277. <div class="form-group">
  278. <label class="control-label">適用性</label>
  279. <select id="type" name="type" class="form-control mb-md">
  280. <option value="土建">土建</option>
  281. <option value="土開">土開</option>
  282. <option value="軌道">軌道</option>
  283. <option value="機電">機電</option>
  284. <option value="資訊">資訊</option>
  285. <option value="通用">通用</option>
  286. </select>
  287. </div>
  288. </div>
  289. <div class="col-sm-6">
  290. <div class="form-group">
  291. <label class="control-label">關鍵字</label>
  292. <input name="keyword" id="keyword" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="資訊">
  293. </div>
  294. </div>
  295. </div>
  296. <div class="row">
  297. <div class="col-sm-6">
  298. <div class="form-group">
  299. <label class="control-label">物件</label>
  300. <input name="object" id="object" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="結構">
  301. </div>
  302. </div>
  303. <div class="col-sm-6">
  304. <div class="form-group">
  305. <label class="control-label">功能</label>
  306. <input name="usage" id="usage" data-role="tagsinput" data-tag-class="label label-primary" class="form-control" value="匯出">
  307. </div>
  308. </div>
  309. </div>
  310. <div class="row">
  311. <div class="col-sm-6">
  312. <div class="form-group">
  313. <label class="control-label">備註</label>
  314. <textarea class="form-control" rows="3" id="notes" name="notes" data-plugin-textarea-autosize="" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 74px;"></textarea>
  315. </div>
  316. </div>
  317. <div class="col-sm-6">
  318. <div class="form-group">
  319. <label class="control-label">外部連結</label>
  320. <input type="text" id="webLink" name="webLink" class="form-control" value="空">
  321. </div>
  322. </div>
  323. </div>
  324. <div class="row">
  325. <div class="col-sm-12">
  326. <div class="form-group">
  327. <label class="control-label">上傳API</label>
  328. <div class="fileupload fileupload-new" data-provides="fileupload">
  329. <div class="input-append">
  330. <div class="uneditable-input">
  331. <i class="fa fa-file fileupload-exists"></i>
  332. <span class="fileupload-preview"></span>
  333. </div>
  334. <span class="btn btn-default btn-file">
  335. <span class="fileupload-exists">更換檔案</span>
  336. <span class="fileupload-new">選擇檔案</span>
  337. <input type="file" name="excel" id="excel" required="required" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
  338. </span>
  339. <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
  340. <span class="help-block"><strong>注意事項:</strong>請選擇要上傳的資料夾,盡量不要有子資料夾,若有請壓縮後再上傳
  341. <br>(例:拖放元件)</span>
  342. </div>
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347. <footer class="panel-footer">
  348. <button id="submit" class="btn btn-primary">上傳檔案</button>
  349. <button id="reset" type="reset" class="btn btn-default">清除表單</button>
  350. </footer>
  351. </form> -->
  352. </div>
  353. </div>
  354. </div>
  355. </div>
  356. </div>
  357. <!-- end: page -->
  358. </section>
  359. </div>
  360. </section>
  361. <script>
  362. /*Vue */
  363. var isDuplicate = false;
  364. vm.mount('.body');
  365. addUserImage(userName.charAt(0), role);
  366. const stack_bar_top = {
  367. "dir1": "down",
  368. "dir2": "right",
  369. "push": "top",
  370. "spacing1": 0,
  371. "spacing2": 0
  372. };
  373. const revit = ['通用', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'];
  374. const dynamo = ['1.3', '2.0', '2.1', '2.2', '2.3', '2.13'];
  375. $(document).ready(function() {
  376. $("#source").val(userName);
  377. $("#software").on('change', function(event) {
  378. $("#version").empty();
  379. switch (event.currentTarget.value) {
  380. case 'Revit':
  381. let optionTemp1 = '';
  382. for (i = 0; i < revit.length; i++) {
  383. if (revit[i] == '2017')
  384. optionTemp1 += `<option value="${revit[i]}" selected>Revit ${revit[i]}</option>`;
  385. else
  386. optionTemp1 += `<option value="${revit[i]}">Revit ${revit[i]}</option>`;
  387. }
  388. $("#version").append(optionTemp1);
  389. break;
  390. case 'Dynamo':
  391. let optionTemp2 = '';
  392. for (i = 0; i < dynamo.length; i++) {
  393. if (dynamo[i] == '2.3')
  394. optionTemp2 += `<option value="${dynamo[i]}" selected>Dynamo ${dynamo[i]}</option>`;
  395. else
  396. optionTemp2 += `<option value="${dynamo[i]}">Dynamo ${dynamo[i]}</option>`;
  397. }
  398. $("#version").append(optionTemp2);
  399. break;
  400. }
  401. });
  402. $("#APIName").on('change', function() {
  403. isDuplicate = checkDuplicate($(this).val())
  404. if (isDuplicate) {
  405. $("#APIName-Form").append(`<label id="APIName-label" class="error">此API已經匯入過</label>`);
  406. $("#APIName-Form").addClass("has-error");
  407. } else {
  408. $("#APIName-label").remove();
  409. $("#APIName-Form").attr("class", "form-group");
  410. }
  411. })
  412. $("#uploadForm").submit(function(e) {
  413. e.preventDefault();
  414. if (isDuplicate) {
  415. showNotification('警告','尚未提供上傳不同版本功能,請勿重複上傳!','error');
  416. return;
  417. }
  418. if ($("#files").val() === "") {
  419. showNotification('警告','請先選擇上傳檔案!','error');
  420. return;
  421. }
  422. var formData = new FormData();
  423. $(".form-control").each(function(ele) {
  424. formData.append($(this).attr('name'), $(this).val());
  425. })
  426. for (i = 0; i < $("#files").prop('files').length; i++) {
  427. formData.append("files[]", $("#files").prop('files')[i]);
  428. }
  429. $.ajax({
  430. type: "POST",
  431. url: "./script/php/api_upload.php",
  432. data: formData,
  433. cache: false,
  434. processData: false,
  435. contentType: false,
  436. dataType: 'text', // 回傳的資料格式
  437. success: function(data) {
  438. console.log(data);
  439. showNotification('成功','轉檔上傳成功!','success');
  440. },
  441. xhr: function() {
  442. var xhr = new window.XMLHttpRequest(); // 建立xhr(XMLHttpRequest)物件
  443. xhr.upload.addEventListener("progress", function(progressEvent) { // 監聽ProgressEvent
  444. if (progressEvent.lengthComputable) {
  445. var percentComplete = progressEvent.loaded / progressEvent.total;
  446. var percentVal = Math.round(percentComplete * 100) + "%";
  447. $("#bar").text(percentVal); // 進度條百分比文字
  448. $("#bar").width(percentVal); // 進度條顏色
  449. if(percentVal == '100%'){
  450. showNotification('提示','上傳成功!請稍待轉檔完成','info');
  451. }
  452. }
  453. }, false);
  454. return xhr; // 注意必須將xhr(XMLHttpRequest)物件回傳
  455. }
  456. }).fail(function() {
  457. $("#bar").text("0%"); // 錯誤發生進度歸0%
  458. $("#bar").width("0%");
  459. });
  460. });
  461. });
  462. function checkDuplicate(APIName) {
  463. var isDuplicate = false;
  464. $.ajax({
  465. url: "./script/php/get_api_duplicate.php",
  466. type: "POST",
  467. data: {
  468. APIName: APIName,
  469. },
  470. async: false,
  471. dataType: "json"
  472. }).done(function(result) {
  473. if (result != "") {
  474. isDuplicate = true;
  475. }
  476. }).error(function(error) {
  477. console.log(error);
  478. });
  479. return isDuplicate;
  480. }
  481. function showNotification(title,text,type) {
  482. var notice = new PNotify({
  483. title: title,
  484. text: text,
  485. type: type,
  486. addclass: 'stack-bar-top',
  487. stack: stack_bar_top,
  488. width: "100%"
  489. });
  490. }
  491. </script>
  492. <?php include("bim-support-body.html"); ?>
  493. </body>
  494. </html>