app.js 12 KB

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