api-upload.php 21 KB

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