app.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. import { Lang } from '/web/lib/polyglot-lang.js';
  2. var options = {
  3. query: 'pathname=' + window.location.pathname.slice(1,
  4. window.location.pathname.lastIndexOf("/")),
  5. secure: window.location.protocol === "https:",
  6. reconnection: false,
  7. transports: ['websocket']
  8. };
  9. var socket = io.connect(window.location.protocol + "//" + window.location.host, options);
  10. socket.on('getWebAppUpdate', function (msg) {
  11. parseAppInstancesData(msg)
  12. //console.log(msg);
  13. });
  14. function parseAppInstancesData(data) {
  15. var needToUpdate = true;
  16. if (data == "{}") {
  17. var el = document.querySelector(".instance");
  18. if (el) {
  19. var topEl = el.parentNode;
  20. topEl.removeChild(el);
  21. }
  22. // let removeElements = elms => Array.from(elms).forEach(el => el.remove());
  23. }
  24. let jsonObj = JSON.parse(data);
  25. var parsed = {};
  26. for (var prop in jsonObj) {
  27. var name = prop.split('/')[1];
  28. if (parsed[name]) {
  29. parsed[name][prop] = jsonObj[prop];
  30. } else {
  31. parsed[name] = {};
  32. parsed[name][prop] = jsonObj[prop];
  33. }
  34. }
  35. //console.log(parsed);
  36. document.querySelector("#main")._emptyLists();
  37. for (var prop in parsed) {
  38. var name = prop;
  39. let element = document.getElementById(name + 'List');
  40. if (element) {
  41. element._setListData(parsed[prop]);
  42. }
  43. //needToUpdate = true
  44. }
  45. // console.log(data)
  46. }
  47. function getAllAppInstances() {
  48. let allInatances = httpGetJson('allinstances.json')
  49. .then(res => {
  50. parseAppInstancesData(res);
  51. });
  52. }
  53. function getSiteHeader(){
  54. return {
  55. $type: "div",
  56. class: "mdc-layout-grid",
  57. $components: [
  58. {
  59. $type: "div",
  60. class: "mdc-layout-grid__inner",
  61. $components: [
  62. {
  63. $cell: true,
  64. $type: "div",
  65. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  66. $components: [
  67. {
  68. $cell: true,
  69. $type: "h1",
  70. class: "mdc-typography--display1 mdc-theme--text-hint-on-background",
  71. $text: "Virtual Worlds"
  72. }
  73. ]
  74. }
  75. ]
  76. }
  77. ]
  78. }
  79. }
  80. function parseWebAppDataForCell(data) {
  81. document.querySelector("#main").$cell({
  82. $cell: true,
  83. $type: "div",
  84. id: "main",
  85. _jsonData: {},
  86. _emptyLists: function () {
  87. Object.entries(this._jsonData).forEach(function (element) {
  88. //console.log(element);
  89. document.getElementById(element[0] + 'List')._setListData({});
  90. });
  91. },
  92. $init: function () {
  93. this._jsonData = JSON.parse(data);
  94. },
  95. _makeWorldCard: function (m) {
  96. return {
  97. $cell: true,
  98. $type: "div",
  99. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
  100. $components: [
  101. this._worldCardDef(m)
  102. ]
  103. }
  104. },
  105. $update: function () {
  106. this.$components = [
  107. //getSiteHeader(),// siteHeader,
  108. {
  109. $type: "div",
  110. class: "mdc-layout-grid",
  111. $components: [
  112. {
  113. $type: "div",
  114. class: "mdc-layout-grid__inner",
  115. $components: Object.entries(this._jsonData).map(this._makeWorldCard)
  116. }
  117. ]
  118. },
  119. ]
  120. },
  121. _worldCardDef: function (desc) {
  122. return {
  123. $cell: true,
  124. $type: "div",
  125. class: "mdc-card world-card",
  126. $components: [
  127. {
  128. $type: "section",
  129. class: "mdc-card__media world-card__16-9-media",
  130. $init: function () {
  131. if (desc[1].imgUrl !== "") {
  132. this.style.backgroundImage = 'linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(' + desc[1].imgUrl + ')';
  133. }
  134. }
  135. },
  136. {
  137. $type: "section",
  138. class: "mdc-card__primary",
  139. $components: [
  140. {
  141. $type: "h1",
  142. class: "mdc-card__title mdc-card__title--large",
  143. $text: desc[1].title
  144. },
  145. {
  146. $type: "h2",
  147. class: "mdc-card__subtitle mdc-theme--text-secondary-on-background",
  148. $text: desc[1].text
  149. }
  150. ]
  151. },
  152. {
  153. $type: "section",
  154. class: "mdc-card__actions",
  155. $components: [
  156. {
  157. $type: "a",
  158. class: "mdc-button mdc-button--compact mdc-card__action mdc-button--stroked",
  159. $text: "Start new",
  160. target: "_blank",
  161. href: "/" + desc[0],
  162. onclick: function (e) {
  163. refresh();
  164. }
  165. }
  166. ]
  167. },
  168. {
  169. $type: "section",
  170. class: "mdc-card__actions",
  171. $components: [
  172. {
  173. $type: "ul",
  174. _listData: {},
  175. _setListData: function (data) {
  176. this._listData = data;
  177. },
  178. class: "mdc-list mdc-list--two-line",
  179. id: desc[0] + 'List',
  180. $update: function () {
  181. var connectText = {}
  182. if (Object.entries(this._listData).length !== 0) {
  183. connectText = {
  184. // $type: "span",
  185. // class: "mdc-theme--text-secondary",
  186. // $text: "...or connect to:"
  187. }
  188. }
  189. this.$components = [
  190. {
  191. $type: "hr",
  192. class: "mdc-list-divider"
  193. }
  194. ].concat(Object.entries(this._listData).map(this._worldListItem))
  195. // [connectText]
  196. // }].concat(Object.entries(this._listData).map(this._worldListItem))
  197. },
  198. _worldListItem: function (m) {
  199. return {
  200. $type: "li",
  201. class: "mdc-list-item",
  202. $components: [
  203. {
  204. $type: "span",
  205. class: "world-link mdc-list-item__text",
  206. $components: [
  207. {
  208. $type: "a",
  209. $text: m[1].instance,
  210. target: "_blank",
  211. href: window.location.protocol + "//" + m[1].instance,
  212. onclick: function (e) {
  213. refresh();
  214. }
  215. },
  216. {
  217. $type: "span",
  218. class: "mdc-list-item__text__secondary",
  219. $text: "Users online: " + m[1].clients
  220. }
  221. ]
  222. }
  223. ]
  224. }
  225. }
  226. }
  227. ]
  228. }
  229. ]
  230. }
  231. }
  232. })
  233. }
  234. function getAppDetails(val) {
  235. let appDetails = httpGetJson(val)
  236. .then(res => {
  237. parseWebAppDataForCell(res)
  238. })
  239. .then(res => refresh());
  240. }
  241. function refresh() {
  242. // socket.emit('getWebAppUpdate', "");
  243. }
  244. function httpGet(url) {
  245. return new Promise(function (resolve, reject) {
  246. // do the usual Http request
  247. let request = new XMLHttpRequest();
  248. request.open('GET', url);
  249. request.onload = function () {
  250. if (request.status == 200) {
  251. resolve(request.response);
  252. } else {
  253. reject(Error(request.statusText));
  254. }
  255. };
  256. request.onerror = function () {
  257. reject(Error('Network Error'));
  258. };
  259. request.send();
  260. });
  261. }
  262. async function httpGetJson(url) {
  263. // check if the URL looks like a JSON file and call httpGet.
  264. let regex = /\.(json)$/i;
  265. if (regex.test(url)) {
  266. // call the async function, wait for the result
  267. return await httpGet(url);
  268. } else {
  269. throw Error('Bad Url Format');
  270. }
  271. }
  272. export {getAppDetails};