component-detail.php 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <?php
  2. session_start();
  3. //Can't come in without logged in
  4. if (!isset($_SESSION['loggedin'])) {
  5. header('Location: pages-signin.html');
  6. exit;
  7. }
  8. ?>
  9. <!doctype html>
  10. <html class="fixed">
  11. <head>
  12. <?php include("bim-support-header.html"); ?>
  13. <script src="./script/js/global.js"></script>
  14. <script>
  15. var isFavorite = false;
  16. var revitVersion = "";
  17. var searchURL = window.location.search;
  18. searchURL = searchURL.substring(1, searchURL.length);
  19. var name = decodeURIComponent(searchURL.split("&")[0].split("=")[1]);
  20. var type = searchURL.split("&")[1].split("=")[1];
  21. var parent = searchURL.split("&")[2].split("=")[1];
  22. var typeInChinese = "";
  23. var parentInChinese = "";
  24. var userName = '<?php echo $_SESSION['name']; ?>';
  25. var header = [];
  26. var sizeHeader = [];
  27. var value = [];
  28. var sizeValue = [];
  29. pageHeader = "元件庫";
  30. $.getJSON('./assets/equipmentTable2.json', function(data) {
  31. for (var i = 0; i < data.length; i++) {
  32. if (parent == data[i].category_code) {
  33. parentInChinese = data[i].category_name;
  34. }
  35. for (var j = 0; j < data[i].children.length; j++) {
  36. if (type == data[i].children[j].component_code) {
  37. typeInChinese = data[i].children[j].component_name;
  38. }
  39. }
  40. }
  41. });
  42. </script>
  43. <style>
  44. .hide-image {
  45. display: none;
  46. z-index: 100;
  47. position: absolute;
  48. }
  49. .preview:hover .hide-image {
  50. display: block
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <section class="body">
  56. <!-- start: header -->
  57. <header-menu></header-menu>
  58. <!-- end: header -->
  59. <div class="inner-wrapper">
  60. <!-- start: sidebar -->
  61. <side-bar></side-bar>
  62. <!-- end: sidebar -->
  63. <section role="main" class="content-body">
  64. <header class="page-header">
  65. <h2>{{pageHeader}}</h2>
  66. </header>
  67. <!-- start: page -->
  68. <section class="content-with-menu content-with-menu-has-toolbar media-gallery">
  69. <div class="content-with-menu-container">
  70. <inner-menu>
  71. <template v-slot:inner-equipment>
  72. <equipment-list></equipment-list>
  73. </template>
  74. </inner-menu>
  75. <div class="inner-body mg-main">
  76. <div class="inner-toolbar">
  77. <ul>
  78. <li>
  79. <label>
  80. <span id="insertComponentName" style="font-size: 30px; color: white;"></span>
  81. </label>
  82. </li>
  83. <li class="right">
  84. <a href="#" onclick="window.history.go(-1); return false;"><i class="fa fa-undo"></i> 返回</a>
  85. </li>
  86. <li class="right">
  87. <div style="cursor: pointer;" onclick="AddFavorite();"><i id="heart" class="fa fa-heart"></i><span id="favorite"> 加入清單</span></div>
  88. </li>
  89. </ul>
  90. </div>
  91. <div class="row">
  92. <div class="col-md-6">
  93. <div class="tabs">
  94. <ul class="nav nav-tabs nav-justified">
  95. <li class="active">
  96. <a href="#content" data-toggle="tab" class="text-center">3D元件模型</a>
  97. </li>
  98. <li>
  99. <a href="#2DImage" data-toggle="tab" class="text-center">2D圖例</a>
  100. </li>
  101. </ul>
  102. <div class="tab-content">
  103. <div id="content" class="tab-pane active" style="width:500px; position: relative; padding: 0 0 0;">
  104. </div>
  105. <div id="2DImage" class="tab-pane" style="overflow: auto;">
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="col-md-6">
  111. <section class="panel">
  112. <div class="panel-body" style="padding: 0px;">
  113. <div class="table-responsive">
  114. <table class="table table-bordered mb-none">
  115. <tbody id="table">
  116. </tbody>
  117. </table>
  118. </div>
  119. </div>
  120. </section>
  121. <h3>尺寸:</h3>
  122. <section class="panel">
  123. <div class="panel-body" style="padding: 0px;">
  124. <div class="table-responsive">
  125. <table class="table table-bordered mb-none">
  126. <tbody id="sizeTable">
  127. </tbody>
  128. </table>
  129. </div>
  130. </div>
  131. </section>
  132. </div>
  133. </div>
  134. </div>
  135. </section>
  136. <!-- end: page -->
  137. </section>
  138. </div>
  139. </section>
  140. <script>
  141. /*Vue */
  142. vm.mount('.body');
  143. </script>
  144. <?php include("bim-support-body.html"); ?>
  145. <script>
  146. $(document).ready(function() {
  147. $.ajax({
  148. url: "./script/php/equipment_group_detail.php",
  149. type: "GET",
  150. data: {
  151. type: typeInChinese,
  152. object: name,
  153. parent: parentInChinese
  154. },
  155. contentType: "application/json",
  156. dataType: "json"
  157. }).done(function(data) {
  158. header = data.header;
  159. value = data.value;
  160. sizeHeader = data.sizeHeader;
  161. sizeValue = data.sizeValue;
  162. for (var i = 0; i < header.length; i++) {
  163. if (value[i] == null)
  164. value[i] = "";
  165. if (header[i] == "元件版本")
  166. revitVersion = value[i];
  167. if (data.header[i] == "族群品類" || data.header[i] == "族群名稱" || data.header[i] == "類型名稱") {
  168. $('#table').append("<tr><td><div class='preview'>" + data.header[i] + "<img src='./assets/images/" + data.header[i] + ".jpg' class='hide-image'></div></td><td><div>" + data.value[i] + "</div></td></tr>");
  169. } else {
  170. $('#table').append("<tr><td><div>" + data.header[i] + "</div></td><td><div>" + data.value[i] + "</div></td></tr>");
  171. }
  172. }
  173. for (var i = 0; i < sizeHeader.length; i++) {
  174. if (value[i] == null)
  175. value[i] = "";
  176. if (data.sizeHeader[i] != 0 && data.sizeValue[i] != 0) {
  177. $('#sizeTable').append("<tr><td>" + data.sizeHeader[i] + "</td><td>" + data.sizeValue[i] + "</td></tr>");
  178. } else
  179. $('#sizeTable').append("<tr><td>無資料</td><td>無資料</td></tr>");
  180. }
  181. $("#insertComponentName").text(name);
  182. $.ajax({
  183. url: "./assets/glb/Revit元件/Components/" + parentInChinese + "/" + typeInChinese + "/" + name + ".PNG",
  184. success: function() {
  185. $("#2DImage").append("<img src='./assets/glb/Revit元件/Components/" + parentInChinese + "/" + typeInChinese + "/" + name + ".PNG' style='width: 100%; aspect-ratio: 1 / 1;'>")
  186. },
  187. error: function() {
  188. $("#2DImage").append("<span>此元件沒有2D圖例</span>");
  189. }
  190. });
  191. }).error(function(error) {
  192. console.log(error.responseText);
  193. });
  194. $.ajax({
  195. url: "./script/php/addFavorite.php",
  196. type: "GET",
  197. data: {
  198. type: typeInChinese,
  199. object: name,
  200. },
  201. contentType: "application/json",
  202. dataType: "json"
  203. }).done(function(data) {
  204. isFavorite = data;
  205. if (isFavorite) {
  206. $("#heart").css("color", "Tomato");
  207. $("#favorite").html('移出清單');
  208. } else {
  209. $("#heart").css("color", "white");
  210. $("#favorite").html('加入清單');
  211. }
  212. }).error(function(error) {
  213. console.log(error.responseText);
  214. });
  215. });
  216. for (var i = 0; i < jsonData.length; i++) {
  217. for (var j = 0; j < jsonData[i].children.length; j++) {
  218. $("a").each(function() {
  219. if (jsonData[i].category_code == parent) {
  220. if (jsonData[i].children[j].component_code == type) {
  221. var searchText = jsonData[i].children[j].component_name;
  222. var found;
  223. if ($(this).context.innerText == searchText && $(this).context.name == jsonData[i].category_code) {
  224. $(this).context.classList.add("highlight");
  225. $(this).context.parentNode.parentNode.parentNode.classList.add("nav-expanded");
  226. }
  227. }
  228. }
  229. });
  230. }
  231. }
  232. function AddFavorite() {
  233. var stack_bar_top = {
  234. "dir1": "down",
  235. "dir2": "right",
  236. "push": "top",
  237. "spacing1": 0,
  238. "spacing2": 0
  239. };
  240. if (isFavorite) {
  241. $.ajax({
  242. url: "./script/php/addFavorite.php",
  243. type: "POST",
  244. data: {
  245. DelFavorite: parentInChinese + "/" + typeInChinese + "/" + name,
  246. username: userName
  247. }
  248. }).done(function(data) {
  249. var notice = new PNotify({
  250. title: '通知',
  251. text: '移出清單成功!',
  252. type: 'success',
  253. addclass: 'stack-bar-top',
  254. stack: stack_bar_top,
  255. width: "100%"
  256. });
  257. isFavorite = false;
  258. $("#heart").css("color", "white");
  259. $("#favorite").html('加入清單');
  260. }).error(function(error) {
  261. var notice = new PNotify({
  262. title: '通知',
  263. text: '移出清單失敗!',
  264. type: 'error',
  265. addclass: 'stack-bar-top',
  266. stack: stack_bar_top,
  267. width: "100%"
  268. });
  269. console.log(error);
  270. });
  271. } else {
  272. $.ajax({
  273. url: "./script/php/addFavorite.php",
  274. type: "POST",
  275. data: {
  276. AddFavorite: parentInChinese + "/" + typeInChinese + "/" + name,
  277. username: userName,
  278. revitVersion: revitVersion
  279. }
  280. }).done(function(data) {
  281. var notice = new PNotify({
  282. title: '通知',
  283. text: '加入清單成功!',
  284. type: 'success',
  285. addclass: 'stack-bar-top',
  286. stack: stack_bar_top,
  287. width: "100%"
  288. });
  289. isFavorite = true;
  290. $("#heart").css("color", "Tomato");
  291. $("#favorite").html('移出清單');
  292. }).error(function() {
  293. var notice = new PNotify({
  294. title: '通知',
  295. text: '加入清單失敗!',
  296. type: 'error',
  297. addclass: 'stack-bar-top',
  298. stack: stack_bar_top,
  299. width: "100%"
  300. });
  301. });
  302. }
  303. }
  304. </script>
  305. <!-- Vendor -->
  306. <script src="script/js/3Dpic-detail.js" type="module" async></script>
  307. </body>
  308. </html>