1Framework7.registerComponent( 2 'app-journey', 3 (props, { $, $h, $ref, $emit }) => { 4 const { 5 journeySelected, title 6 } = props.data; 7 const journeySelectedRef = $ref(journeySelected); 8 9 const updateLearningValue = (e) => { 10 let val = $(e.target).text(); 11 journeySelectedRef.value = val; 12 $emit('clickLearning', val); 13 } 14 15 const updateAllLearningValue = (e) => { 16 $emit('clickAllLearning'); 17 } 18 19 return () => $h` 20 <div class="journey"> 21 <div class="container"> 22 <section class="${title ? 'IPOT Journey' : 'no-margin'}" id="section-journey"> 23 <div class="row"> 24 <div class="col-100 xlarge-50"> 25 <div class="home-title text-center-sm">${title ? 'IPOT Journey' : ''}</div> 26 </div> 27 28 <div class="col-100 xlarge-50 align-self-center"> 29 <div class="home-options justify-content-flex-end-lg" data-section="journey-learning"> 30 <div class="home-subtitle home-subtitle-selected" @click=${updateLearningValue}>Beginner</div> 31 <div class="home-subtitle" @click=${updateLearningValue}>Intermediate</div> 32 <div class="home-subtitle" @click=${updateLearningValue}>Advanced</div> 33 </div> 34 </div> 35 </div> 36 37 <div class="journey-title-container"> 38 <div class="journey-title text-center-sm">${journeySelectedRef.value} Webinar</div> 39 </div> 40 </section> 41 </div> 42 43 <div class="swiper-container" data-section="journey-learning"> 44 <div class="swiper-wrapper"></div> 45 </div> 46 47 <div class="container"> 48 <div class="row journey-title-container"> 49 <div class="col-100 xlarge-30 align-self-center"> 50 <div class="journey-title text-center-sm">Semua Materi</div> 51 </div> 52 53 <div class="col-100 xlarge-70"> 54 <div class="home-options justify-content-flex-end-lg" data-section="journey-topic"> 55 <div class="home-subtitle"> 56 <a class="item-link smart-select smart-select-init display-flex align-items-center" 57 data-open-in="popover" data-value-el=".item-title-topic" data-close-on-select="true" 58 data-sheet-backdrop="true" data-sheet-close-link-text=""> 59 <select id="select-topic" @change=${updateAllLearningValue}> 60 <option value="" selected>All Topic</option> 61 </select> 62 <div class="item-content"> 63 <div class="item-inner"> 64 <div class="item-title item-title-topic">All Topic</div> 65 </div> 66 </div> 67 <span class="material-icons margin-left-half">expand_more</span> 68 </a> 69 </div> 70 <div class="home-subtitle"> 71 <a class="item-link smart-select smart-select-init display-flex align-items-center" 72 data-open-in="popover" data-value-el=".item-title-level" data-close-on-select="true" 73 data-sheet-backdrop="true" data-sheet-close-link-text=""> 74 <select id="select-level" @change=${updateAllLearningValue}> 75 <option value="" selected>All Level</option> 76 </select> 77 <div class="item-content"> 78 <div class="item-inner"> 79 <div class="item-title item-title-level">All Level</div> 80 </div> 81 </div>
82 <span class="material-icons margin-left-half">expand_more</span> 83 </a> 84 </div> 85 <div class="home-subtitle"> 86 <a class="item-link smart-select smart-select-init display-flex align-items-center" 87 data-open-in="popover" data-value-el=".item-title-type" data-close-on-select="true" 88 data-sheet-backdrop="true" data-sheet-close-link-text=""> 89 <select id="select-type" @change=${updateAllLearningValue}> 90 <option value="" selected>All Type</option> 91 </select> 92 <div class="item-content"> 93 <div class="item-inner"> 94 <div class="item-title item-title-type">All Type</div> 95 </div> 96 </div> 97 <span class="material-icons margin-left-half">expand_more</span> 98 </a> 99 </div> 100 </div> 101 </div> 102 </div> 103 </div> 104 105 <div class="swiper-container" data-section="journey-topic"> 106 <div class="swiper-wrapper"></div> 107 </div> 108 </div> 109 ` 110 } 111) 112 113Framework7.registerComponent( 114 'app-bg-registration', 115 (props, { $, $h }) => { 116 let xgoto = false; 117 let noimage = false; 118 119 if (props.data) { 120 xgoto = props.data.xgoto; 121 noimage = props.data.noimage; 122 } 123 124 if (noimage) { 125 return () => $h` 126 <div class="col-100"> 127 <div class="display-flex align-items-center ${xgoto ? 'justify-content-center' : ''}" style="padding: 50px 0 0;"> 128 <img src="app/assets/img/ic_goto.png" class="ic-goto ${xgoto ? '' : 'display-none'}" alt="GOTO" /> 129 <span class="material-icons ic-close ${xgoto ? '' : 'display-none'}">close</span> 130 <img src="app/assets/img/ic_ipot_text.png" class="ic-ipot" alt="IPOT" /> 131 </div> 132 </div>` 133 } else { 134 return () => $h` 135 <div class="col-100 medium-50 display-flex flex-direction-column h-100-md"> 136 <div class="display-flex align-items-center ${xgoto ? 'justify-content-center' : ''}" style="padding: 50px 0 0;"> 137 <img src="app/assets/img/ic_goto.png" class="ic-goto ${xgoto ? '' : 'display-none'}" alt="GOTO" /> 138 <span class="material-icons ic-close ${xgoto ? '' : 'display-none'}">close</span> 139 <img src="app/assets/img/ic_ipot_text.png" class="ic-ipot" alt="IPOT" /> 140 </div> 141 <img src="app/assets/img/bg_registration${xgoto ? '_goto' : ''}.png" class="d-block-auto d-none-sm img-fluid" id="bg-registration" alt="GOTO" /> 142 </div>` 143 } 144 } 145) 146 147Framework7.registerComponent( 148 'app-bg-registration-sm', 149 (props, { $, $h }) => { 150 let xgoto = false; 151 let noimage = false; 152 153 if (props.data) { 154 xgoto = props.data.xgoto; 155 noimage = props.data.noimage; 156 } 157 158 if (noimage) { 159 return () => $h`` 160 } else { 161 return () => $h` 162 <img src="app/assets/img/bg_registration${xgoto ? '_goto' : ''}.png" class="d-block-auto d-none-md img-fluid margin-bottom" id="bg-registration-sm" alt="GOTO" style="margin-top: 50px;" />` 163 } 164 } 165) 166 167Framework7.registerComponent( 168 'app-skeleton-ob', 169 (props, { $, $h }) => { 170 let left = props.data.left; 171 172 if (left) { 173 return () => $h` 174 <div class="row no-gap col-50"> 175 <div class="col-20"></div> 176 <div class="col-35 display-flex justify-content-flex-end"> 177 <div class="skeleton-block skeleton-effect-fade ob-skeleton"></div> 178 </div> 179 <div class="col-45 display-flex justify-content-flex-end"> 180 <div class="skeleton-block skeleton-effect-fade ob-skeleton"></div> 181 </div> 182 </div>` 183 } else { 184 return () => $h` 185 <div class="row no-gap col-50"> 186 <div class="col-45 display-flex justify-content-flex-end"> 187 <div class="skeleton-block skeleton-effect-fade ob-skeleton"></div> 188 </div> 189 <div class="col-35 display-flex justify-content-flex-end"> 190 <div class="skeleton-block skeleton-effect-fade ob-skeleton"></div> 191 </div> 192 <div class="col-20"></div> 193 </div>` 194 } 195 } 196) 197 198Framework7.registerComponent( 199 'app-fab', 200 async (props, { $, $el, $h, $store }) => { 201 let stock = $store.state.list.stock; 202 let favoriteListName = { 203 '1': stock.fav_name_1, 204 '2': stock.fav_name_2, 205 '3': stock.fav_name_3, 206 '4': stock.fav_name_4, 207 '5': stock.fav_name_5 208 }; 209 let favorite = app.form.getFormData('fv-stock'); 210 let initTabLinkOption = false;
211 212 const setTabLinkOption = (name) => { 213 if ((props.trending && !initTabLinkOption) || props.skipinittablinkoption == 'true') { 214 return; 215 } 216 217 initTabLinkOption = true; 218 219 setTimeout(() => { 220 $$('.tab-link-option').html(` 221 <div class="display-flex align-items-center"> 222 <a href="/app/favorite-list" class="icon-star-fab"> 223 <span class="material-icons fsize-18 text-color-white">star</span> 224 </a> 225 <span class="margin-left text">${name}</span> 226 <span class="material-icons fsize-18 text-color-white">arrow_drop_up</span> 227 </div> 228 `).attr('data-name', name) 229 $$('.label-stock-list').text(name); 230 }, 300); 231 } 232 233 if (stock.fav_name_1.length == 0) { 234 await $store.dispatch('getFavoriteListName', { context: stock.fav_context_name_1 }) 235 .then((res) => { 236 if (res) { 237 favoriteListName['1'] = res; 238 239 if (!favorite) { 240 setTabLinkOption(res); 241 } 242 } 243 }); 244 } else if (!favorite) { 245 setTabLinkOption(stock.fav_name_1); 246 } 247 248 if (stock.fav_name_2.length == 0) { 249 await $store.dispatch('getFavoriteListName', { context: stock.fav_context_name_2 }) 250 .then((res) => { 251 if (res) { 252 favoriteListName['2'] = res; 253 254 if (favorite == 2) { 255 setTabLinkOption(res); 256 } 257 } 258 }); 259 } else if (favorite == 2) { 260 setTabLinkOption(stock.fav_name_2); 261 } 262 263 if (stock.fav_name_3.length == 0) { 264 await $store.dispatch('getFavoriteListName', { context: stock.fav_context_name_3 }) 265 .then((res) => { 266 if (res) { 267 favoriteListName['3'] = res; 268 269 if (favorite == 3) { 270 setTabLinkOption(res); 271 } 272 } 273 }); 274 } else if (favorite == 3) { 275 setTabLinkOption(stock.fav_name_3); 276 } 277 278 if (stock.fav_name_4.length == 0) { 279 await $store.dispatch('getFavoriteListName', { context: stock.fav_context_name_4 }) 280 .then((res) => { 281 if (res) { 282 favoriteListName['4'] = res; 283 284 if (favorite == 4) { 285 setTabLinkOption(res); 286 } 287 } 288 }); 289 } else if (favorite == 4) { 290 setTabLinkOption(stock.fav_name_4); 291 } 292 293 if (stock.fav_name_5.length == 0) { 294 await $store.dispatch('getFavoriteListName', { context: stock.fav_context_name_5 }) 295 .then((res) => { 296 if (res) { 297 favoriteListName['5'] = res; 298 299 if (favorite == 5) { 300 setTabLinkOption(res); 301 } 302 } 303 }); 304 } else if (favorite == 5) { 305 setTabLinkOption(stock.fav_name_5); 306 } 307 308 const toggleExpand = (e) => { 309 e.stopPropagation(); 310 311 let el; 312 let child = $$(e.target).hasClass('material-icons'); 313 314 if (child) { 315 el = $$(e.target).parent(); 316 } else { 317 el = $$(e.target); 318 } 319 320 let expanded = el.hasClass('expanded'); 321 322 $$('.expanded').removeClass('expanded'); 323 324 if (expanded) { 325 el.removeClass('expanded'); 326 } else { 327 el.addClass('expanded'); 328 } 329 } 330 331 return () => $h` 332 <div class="fab fab-left-bottom"> 333 <a href="#" class="fab-options display-none"></a> 334 <div class="fab-buttons fab-buttons-top fab-buttons-option"> 335 ${(props.trending || 'true') == 'true' ? $h` 336 <a href="#" class="fab-button fab-button-option bg-color-transparant no-ripple"> 337 <div class="row h-100 w-inherit"> 338 <div class="col fab-label-container" data-name="TRENDING"> 339 <div class="fab-label-option-helper center w-100 pointer" data-name="TRENDING" 340 @click="${toggleExpand}"> 341 Trending
342 <span class="material-icons icon-expand-less margin-right-half" 343 @click="${toggleExpand}">expand_less</span> 344 <span class="material-icons icon-expand-more margin-right-half" 345 @click="${toggleExpand}">expand_more</span> 346 </div> 347 <div class="fab-label-option w-100"> 348 <div class="row display-flex justify-content-space-around"> 349 <div class="col-20 pointer fab-close" data-name="15 VAL">15'</div> 350 <div class="col-60 text-align-center" style="color: #53471E;">Value</div> 351 <div class="col-20 pointer fab-close" data-name="30 VAL">30'</div> 352 </div> 353 <div class="row display-flex justify-content-space-around"> 354 <div class="col-20 pointer fab-close" data-name="15 FRQ">15'</div> 355 <div class="col-60 text-align-center" style="color: #53471E;">Freq</div> 356 <div class="col-20 pointer fab-close" data-name="30 FRQ">30'</div> 357 </div> 358 <div class="row display-flex justify-content-space-around"> 359 <div class="col-20 pointer fab-close" data-name="15 G.K100">15'</div> 360 <div class="col-60 text-align-center" style="color: #53471E;">Gain K100</div> 361 <div class="col-20 pointer fab-close" data-name="30 G.K100">30'</div> 362 </div> 363 <div class="row display-flex justify-content-space-around"> 364 <div class="col-20 pointer fab-close" data-name="15 G.ALL">15'</div> 365 <div class="col-60 text-align-center" style="color: #53471E;">Gain All</div> 366 <div class="col-20 pointer fab-close" data-name="30 G.ALL">30'</div> 367 </div> 368 <div class="row display-flex justify-content-space-around"> 369 <div class="col-20 pointer fab-close" data-name="15 L.K100">15'</div> 370 <div class="col-60 text-align-center" style="color: #53471E;">Loss K100</div> 371 <div class="col-20 pointer fab-close" data-name="30 L.K100">30'</div> 372 </div> 373 <div class="row display-flex justify-content-space-around"> 374 <div class="col-20 pointer fab-close" data-name="15 L.ALL">15'</div> 375 <div class="col-60 text-align-center" style="color: #53471E;">Loss All</div> 376 <div class="col-20 pointer fab-close" data-name="30 L.ALL">30'</div> 377 </div> 378 </div> 379 </div> 380 </div> 381 </a>`: $h` 382 ${''} 383 `} 384 385 <a href="#" class="fab-button fab-button-option bg-color-transparant no-ripple"> 386 <div class="row h-100 w-inherit"> 387 <div class="col fab-label-container" data-name="IPO30;REC30"> 388 <div class="row justify-content-space-around w-100"> 389 <div class="col fab-label-option fab-close text-align-center pointer" data-name="IPO30"> 390 IPO30 391 </div> 392 <div class="col fab-label-option fab-close text-align-center pointer" data-name="REC30"> 393 Recent30 394 </div> 395 </div> 396 </div> 397 </div> 398 </a> 399 400 <a href="#" class="fab-button fab-button-option bg-color-transparant no-ripple"> 401 <div class="row h-100 w-inherit"> 402 <div class="col display-flex flex-direction-column align-self-flex-end"> 403 <a href="/app/favorite-list" class="padding-horizontal margin-bottom" style="width: fit-content; background: rgba(63, 86, 149, 0.5) !important;">
404 <span class="material-icons fsize-18">star</span> 405 <span class="font-bold margin-left-half">Favorite Settings</span> 406 </a> 407 <div class="fab-label-container" data-name="FAVORITELIST" style="align-self: unset;"> 408 <div class="fab-label-option-helper center w-100 pointer" data-name="FAVORITELIST" 409 @click="${toggleExpand}"> 410 Favorite 411 <span class="material-icons icon-expand-less margin-right-half" 412 @click="${toggleExpand}">expand_less</span> 413 <span class="material-icons icon-expand-more margin-right-half" 414 @click="${toggleExpand}">expand_more</span> 415 </div> 416 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="${favoriteListName['1']}"> 417 ${favoriteListName['1'] || 'FAVORIT 1'} 418 </div> 419 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="${favoriteListName['2']}"> 420 ${favoriteListName['2'] || 'FAVORIT 2'} 421 </div> 422 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="${favoriteListName['3']}"> 423 ${favoriteListName['3'] || 'FAVORIT 3'} 424 </div> 425 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="${favoriteListName['4']}"> 426 ${favoriteListName['4'] || 'FAVORIT 4'} 427 </div> 428 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="${favoriteListName['5']}"> 429 ${favoriteListName['5'] || 'FAVORIT 5'} 430 </div> 431 </div> 432 </div> 433 </div> 434 </a> 435 </div> 436 <div class="fab-buttons fab-buttons-top fab-buttons-option"> 437 <a href="#" class="fab-button fab-button-option bg-color-transparant no-ripple"> 438 <div class="row h-100 w-inherit"> 439 <div class="col fab-label-container" data-name="PORTO;ORDER"> 440 <div class="row justify-content-space-around w-100"> 441 ${(props.trending || 'true') == 'true' ? $h` 442 ${''}` : $h` 443 <div class="col fab-label-option fab-close text-align-center pointer" data-name="ALL"> 444 All 445 </div> 446 `} 447 448 <div class="col fab-label-option fab-close text-align-center pointer" data-name="PORTO"> 449 Porto 450 </div> 451 <div class="col fab-label-option fab-close text-align-center pointer" data-name="ORDER"> 452 Order 453 </div> 454 </div> 455 </div> 456 </div> 457 </a> 458 459 <a href="#" class="fab-button fab-button-option bg-color-transparant no-ripple"> 460 <div class="row h-100 w-inherit"> 461 <div class="col fab-label-container" data-name="SEKTORAL"> 462 <div class="fab-label-option-helper center w-100 pointer" data-name="SEKTORAL" 463 @click="${toggleExpand}"> 464 Sektoral
465 <span class="material-icons icon-expand-less margin-right-half" 466 @click="${toggleExpand}">expand_less</span> 467 <span class="material-icons icon-expand-more margin-right-half" 468 @click="${toggleExpand}">expand_more</span> 469 </div> 470 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXENERGY"> 471 IDXENERGY 472 </div> 473 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXBASIC"> 474 IDXBASIC 475 </div> 476 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXINDUST"> 477 IDXINDUST 478 </div> 479 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXNONCYC"> 480 IDXNONCYC 481 </div> 482 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXCYCLIC"> 483 IDXCYCLIC 484 </div> 485 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXHEALTH"> 486 IDXHEALTH 487 </div> 488 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXFINANCE"> 489 IDXFINANCE 490 </div> 491 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXPROPERT"> 492 IDXPROPERT 493 </div> 494 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXTECHNO"> 495 IDXTECHNO 496 </div> 497 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXINFRA"> 498 IDXINFRA 499 </div> 500 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="IDXTRANS"> 501 IDXTRANS 502 </div> 503 </div> 504 </div> 505 </a> 506 507 <a href="#" class="fab-button fab-button-option bg-color-transparant no-ripple"> 508 <div class="row h-100 w-inherit"> 509 <div class="col fab-label-container" data-name="MARGIN"> 510 <div class="fab-label-option-helper center w-100 pointer" data-name="MARGIN" 511 @click="${toggleExpand}"> 512 Margin 513 <span class="material-icons icon-expand-less margin-right-half" 514 @click="${toggleExpand}">expand_less</span> 515 <span class="material-icons icon-expand-more margin-right-half" 516 @click="${toggleExpand}">expand_more</span> 517 </div> 518 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="G.MARGIN"> 519 Gain Margin 520 </div> 521 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="L.MARGIN"> 522 Loss Margin 523 </div> 524 </div> 525 </div> 526 </a> 527 528 <a href="#" class="fab-button fab-button-option bg-color-transparant no-ripple"> 529 <div class="row h-100 w-inherit"> 530 <div class="col fab-label-container" data-name="MOVER"> 531 <div class="fab-label-option-helper center w-100 pointer" data-name="MOVER" 532 @click="${toggleExpand}"> 533 Mover
534 <span class="material-icons icon-expand-less margin-right-half" 535 @click="${toggleExpand}">expand_less</span> 536 <span class="material-icons icon-expand-more margin-right-half" 537 @click="${toggleExpand}">expand_more</span> 538 </div> 539 <div class="fab-label-option-helper-more fab-label-option center w-100"> 540 <span class="margin-left-half">Composite</span> 541 </div> 542 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="VAL"> 543 <span class="fsize-14 margin-left" data-name="VAL">Value</span> 544 </div> 545 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="FREQ"> 546 <span class="fsize-14 margin-left" data-name="FREQ">Frequency</span> 547 </div> 548 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="G.ALL"> 549 <span class="fsize-14 margin-left" data-name="G.ALL">Gain</span> 550 </div> 551 <div class="fab-label-option fab-label-option-sub w-100 pointer fab-close" data-name="L.ALL"> 552 <span class="fsize-14 margin-left" data-name="L.ALL">Loss</span> 553 </div> 554 <div class="fab-label-option-helper-more fab-label-option center w-100"> 555 <span class="margin-left-half">IDX30 by</span> 556 </div> 557 <div class="fab-label-option fab-label-option-sub w-100"> 558 <span class="fsize-14 margin-left pointer fab-close" data-name="IDX30">Abc</span> 559 <span class="fsize-14 margin-left-half pointer fab-close" data-name="G.IDX30">Gain</span> 560 <span class="fsize-14 margin-left-half pointer fab-close" data-name="L.IDX30">Loss</span> 561 </div> 562 <div class="fab-label-option-helper-more fab-label-option center w-100"> 563 <span class="margin-left-half">LQ45 by</span> 564 </div> 565 <div class="fab-label-option fab-label-option-sub w-100"> 566 <span class="fsize-14 margin-left pointer fab-close" data-name="LQ45">Abc</span> 567 <span class="fsize-14 margin-left-half pointer fab-close" data-name="G.LQ45">Gain</span> 568 <span class="fsize-14 margin-left-half pointer fab-close" data-name="L.LQ45">Loss</span> 569 </div> 570 <div class="fab-label-option-helper-more fab-label-option center w-100"> 571 <span class="margin-left-half">K100 by</span> 572 </div> 573 <div class="fab-label-option fab-label-option-sub w-100"> 574 <span class="fsize-14 margin-left pointer fab-close" data-name="K100">Abc</span> 575 <span class="fsize-14 margin-left-half pointer fab-close" data-name="G.K100">Gain</span> 576 <span class="fsize-14 margin-left-half pointer fab-close" data-name="L.K100">Loss</span> 577 </div> 578 </div> 579 </div> 580 </a> 581 </div> 582 </div>` 583 } 584) 585 586Framework7.registerComponent( 587 'app-no-data', 588 (props, { $h }) => { 589 let title = props.data?.title || 'Data Not Available';
590 let subtitle = props.data?.subtitle || 'Please come back later or change another time period'; 591 let displaySubtitle = true; 592 593 if (props.data?.displaySubtitle == 'N') { 594 displaySubtitle = false; 595 } 596 597 // <img src="app/assets/img/app/bg_no_data.png" class="d-block-auto padding" /> 598 599 return () => $h` 600 <div> 601 <div class="fsize-16 text-align-center text-color-white font-bold"> 602 ${title} 603 </div> 604 <div class="fsize-12 text-align-center ${displaySubtitle ? '' : 'display-none'}" style="color: #639DB6"> 605 ${subtitle} 606 </div> 607 </div>` 608 } 609) 610 611let rc = { 612 trends: [ 613 { 614 code: 'F', 615 subsids: [] 616 }, 617 { 618 code: 'V', 619 subsids: [] 620 }, 621 { 622 code: 'G', 623 subsids: [] 624 }, 625 { 626 code: 'L', 627 subsids: [] 628 } 629 ], 630 stockSumSubsid: {}, 631 subscribeTrending: null, 632 unsubscribeTrending: null, 633 trendCodesFocus: [], 634 update: null, 635 tickerInterval: null 636} 637 638Framework7.registerComponent( 639 'app-ticker', 640 async (props, { $h, $update }) => { 641 await new Promise((resolve, reject) => { 642 setTimeout(() => { 643 resolve(); 644 }, 1000); 645 }); 646 if (isVendor()) return () => $h`<div></div>`; 647 let { 648 name, level 649 } = props; 650 let tickerState = true; 651 let tickerStateData = app.form.getFormData('tickerState'); 652 let tickerFavoriteStockSet = app.form.getFormData('fv-ticker-stockset') || 'All'; 653 654 let trendItems = { 655 'LIVE': { 656 F: [], 657 V: [], 658 G: [], 659 L: [], 660 }, 661 '5': { 662 F: [], 663 V: [], 664 G: [], 665 L: [] 666 } 667 }; 668 let trendMultiple = { 669 subsids: [], 670 trendItems: { 671 'LIVE': [], 672 '5': [] 673 } 674 }; 675 676 let stockSum = {}; 677 let session = sc.cache.mi.session; 678 679 let sp; 680 let porto = []; 681 let order = []; 682 let ticker_flag = false; 683 684 if (tickerStateData != undefined) { 685 tickerState = tickerStateData; 686 } 687 688 if (!level) { 689 level = 1; 690 } 691 692 const getMax = () => { 693 let max = 0; 694 let children = $$('.toolbar-inner-slide').children(); 695 696 children.forEach((el, i) => { 697 max += $$(el).outerWidth(true); 698 }); 699 700 return max; 701 } 702 703 const getTrendItems = (trend, multiple = false) => { 704 if (multiple) { 705 let r1 = trendMultiple.trendItems['LIVE']; 706 let r2 = trendMultiple.trendItems['5']; 707 let r3 = app.utils.extend([], r1); 708 709 for (let i = 0; i < r2.length; i++) { 710 let it = r3.find((o) => o.sec == r2[i].sec); 711 712 if (!it) { 713 r3.push(r2[i]); 714 } 715 } 716 717 return r3; 718 } else { 719 let r1 = trendItems['LIVE'][trend]; 720 let r2 = trendItems['5'][trend]; 721 let r3 = app.utils.extend([], r1); 722 723 for (let i = 0; i < r2.length; i++) { 724 let it = r3.find((o) => o.sec == r2[i].sec); 725 726 if (!it) { 727 r3.push(r2[i]); 728 } 729 } 730 731 return r3; 732 } 733 } 734 735 const isNoData = (trend, multiple = false) => { 736 let items = getTrendItems(trend, multiple); 737 let name = $$('.label-ticker-stockset').text(); 738 let noData = false; 739 740 if (items.length == 0) { 741 noData = true; 742 } else if (name != 'All') { 743 for (let i = 0; i < items.length; i++) { 744 let it = items[i]; 745 746 if (isValidateTrendFocus(it.sec)) { 747 break; 748 } 749 750 if (i == items.length - 1) { 751 noData = true; 752 } 753 } 754 } 755 756 return noData; 757 } 758 759 const isValidateTrendFocus = (sec) => { 760 let name = $$('.label-ticker-stockset').text(); 761 762 if (name == 'All') { 763 return true; 764 } else if (rc.trendCodesFocus.length > 0) { 765 return rc.trendCodesFocus.indexOf(sec) >= 0; 766 } else { 767 return false;
768 } 769 } 770 771 const isValidateTrendInfo = (trendinfo, sec) => { 772 let hasF = $$('.label-trend[data-code="F"]').hasClass('active'); 773 let hasV = $$('.label-trend[data-code="V"]').hasClass('active'); 774 let hasG = $$('.label-trend[data-code="G"]').hasClass('active'); 775 let hasL = $$('.label-trend[data-code="L"]').hasClass('active'); 776 777 let codes = []; 778 779 if (hasF) { 780 codes.push(svc.getTrendingCode('F')) 781 } 782 783 if (hasV) { 784 codes.push(svc.getTrendingCode('V')) 785 } 786 787 if (hasG) { 788 codes.push(svc.getTrendingCode('G')) 789 } 790 791 if (hasL) { 792 codes.push(svc.getTrendingCode('L')) 793 } 794 795 if (trendinfo) { 796 trendinfo.forEach(info => { 797 let code = info.split(':')[1]; 798 let i = codes.indexOf(code); 799 800 if (i >= 0) { 801 codes.splice(i, 1); 802 } 803 }); 804 } 805 806 return codes.length == 0; 807 } 808 809 const onClickStockSet = async (e) => { 810 let name = $$(e.target).text(); 811 812 if (name == 'All') { 813 rc.trendCodesFocus = []; 814 app.form.removeFormData('fv-ticker-stockset'); 815 } else { 816 let list = await getStockList(name); 817 818 app.form.storeFormData('fv-ticker-stockset', name); 819 820 rc.trendCodesFocus = list; 821 } 822 823 $update() 824 } 825 826 const startTicker = async (subs) => { 827 if (ticker_flag) { 828 setTimeout(() => { 829 ticker_flag = false; 830 }, 1000); 831 832 return; 833 } else { 834 let data = $$('.page-current').dataset(); 835 836 if (name != data.name) { 837 name = data.name; 838 } 839 840 if (subs) { 841 ticker_flag = true; 842 } 843 844 if (rc.tickerInterval) { 845 $$('.page[data-name="' + name + '"]').find('.toolbar-inner-slide').scrollLeft(0); 846 clearInterval(rc.tickerInterval); 847 } else if (sc.IsAuthPin()) { 848 getStockList('PORTO') 849 .then((res) => { 850 if (res) porto = res; 851 }); 852 853 getStockList('ORDER') 854 .then((res) => { 855 if (res) order = res; 856 }); 857 858 sc.CustData() 859 .then((cust) => { 860 sp = cust.cache.STOCKPOS; 861 }); 862 } 863 864 $$('.page[data-name="' + name + '"]').find('.toolbar-inner-slide').scrollLeft(app.width * 0.8); 865 866 rc.tickerInterval = setInterval(() => { 867 let path = getCurrentRoute('path'); 868 let exists = $$('.page[data-name="' + name + '"]').find('.toolbar-inner-slide').length > 0; 869 870 $$('.tab-link-ticker').each(el => { 871 let left = $$(el).offset().left; 872 873 if (left == 0) { 874 $$(el).attr('style', 'border-radius: 0 14px 14px 0 !important;'); 875 } else { 876 $$(el).attr('style', 'border-radius: 14px !important;'); 877 } 878 }); 879 880 if (exists) { 881 let left = $$('.page[data-name="' + name + '"]').find('.toolbar-inner-slide').offset().left; 882 let end = left + app.width; 883 884 if (Math.abs(end - getMax()) < 10) { 885 $$('.page[data-name="' + name + '"]').find('.toolbar-inner-slide').scrollLeft(0); 886 } else if (!onticker && path != '/app/stock-dashboard') { 887 $$('.page[data-name="' + name + '"]').find('.toolbar-inner-slide').scrollLeft(left += 4); 888 } 889 } else { 890 clearInterval(rc.tickerInterval); 891 } 892 }, 20); 893 } 894 } 895 896 const subscribeStockSum = (trend, code) => { 897 let subsid = 'ticker_stocksum_' + code; 898 let param = { 899 cmd: 'stocksum', code, subsid 900 }; 901 902 if (rc.stockSumSubsid[code]) { 903 return; 904 } 905 906 rc.stockSumSubsid[code] = subsid; 907 908 sc.Subscribe(param, (err, data) => { 909 if (data) { 910 let selector; 911 912 if (trendMultiple.subsids.length > 0) { 913 selector = '.tab-link[data-sec="' + code + '"]'; 914 } else { 915 selector = '.tab-link[data-trend="' + trend + '"][data-sec="' + code + '"]'; 916 } 917 918 stockSum[code] = data.data; 919 920 $update(function () { 921 if (data.data.chgtfreq > 0) { 922 blink(selector + ' .value-ticker-plast'); 923 } 924 }); 925 } 926 }); 927 } 928 929 const subscribeTrending = (trend, nwr = true, multi = false) => { 930 let code = svc.getTrendingCode(trend, nwr); 931 let item = rc.trends.find((o) => o.code == trend); 932 let multiple = trend.length > 1 || multi; 933 934 ['LIVE', '5'].forEach((interval, i) => { 935 let rtype = 'TREND_R10_' + interval; 936 let subsid = 'ticker_' + rtype + '_' + trend; 937 let param = { 938 cmd: 'subscribe', 939 service: 'mi', 940 code, 941 rtype, 942 subsid 943 }; 944 945 // console.log('sub: ', trend + ';' + rtype) 946 947 if (multiple) { 948 trendMultiple.subsids.push(subsid); 949 } else { 950 item.subsids.push(subsid); 951 } 952 953 sc.Subscribe(param, (err, data) => { 954 if (data) { 955 let res = data.data; 956 957 // console.log(trend + ';' + rtype + ';' + code, res) 958 959 if (res.length > 0) { 960 if (multiple) { 961 trendMultiple.trendItems[interval] = []; 962 } else { 963 trendItems[interval][trend] = []; 964 } 965 966 for (let i = 0; i < res.length; i++) { 967 let rec = res[i].split('|'); 968 let sec = rec[0]; 969 let vol = rec[1]; 970 let val = rec[2]; 971 let frq = rec[3]; 972 let chg = rec[4]; 973 let prv = rec[5]; 974 let op = rec[6]; 975 let hi = rec[7]; 976 let lo = rec[8]; 977 let cl = rec[9]; 978 979 let item = { 980 sec, vol, val, frq, chg, prv, op, hi, lo, cl, interval 981 }; 982 983 if (multiple) { 984 trendMultiple.trendItems[interval].push(item); 985 } else { 986 trendItems[interval][trend].push(item); 987 } 988 989 subscribeStockSum(trend, sec); 990 } 991 992 if (interval == '5') { 993 startTicker(true); 994 } 995
996 $update(); 997 } else { 998 trendItems[interval][trend] = []; 999 $update(); 1000 } 1001 1002 return 1; 1003 } 1004 }); 1005 }); 1006 } 1007 1008 const toggleTicker = () => { 1009 tickerState = !tickerState; 1010 1011 app.form.storeFormData('tickerState', tickerState); 1012 1013 if (tickerState) { 1014 startTicker(); 1015 1016 rc.trends.forEach(trend => { 1017 subscribeTrending(trend.code); 1018 }); 1019 } else { 1020 clearInterval(rc.tickerInterval); 1021 1022 unsubscribeTrend(); 1023 unsubscribeStockSum(); 1024 1025 $$('.toolbar-inner-slide').scrollLeft(0); 1026 } 1027 1028 $update(); 1029 } 1030 1031 const unsubscribeStockSum = () => { 1032 for (let code in rc.stockSumSubsid) { 1033 sc.Unsubscribe(rc.stockSumSubsid[code]); 1034 rc.stockSumSubsid[code] = ''; 1035 } 1036 } 1037 1038 const unsubscribeTrend = (multiple = false) => { 1039 if (multiple) { 1040 trendMultiple.subsids.forEach(subsid => { 1041 sc.Unsubscribe(subsid); 1042 }); 1043 1044 trendMultiple = { 1045 subsids: [], 1046 trendItems: { 1047 'LIVE': [], 1048 '5': [] 1049 } 1050 }; 1051 } else { 1052 for (let interval in trendItems) { 1053 for (let code in trendItems[interval]) { 1054 trendItems[interval][code] = []; 1055 } 1056 } 1057 1058 rc.trends.forEach(trend => { 1059 trend.subsids.forEach(subsid => { 1060 sc.Unsubscribe(subsid); 1061 }); 1062 1063 trend.subsids = []; 1064 }); 1065 } 1066 1067 $update(); 1068 } 1069 1070 rc.trendCodesFocus = []; 1071 rc.update = $update; 1072 rc.subscribeTrending = subscribeTrending; 1073 rc.unsubscribeTrending = unsubscribeTrend; 1074 1075 if (rc.tickerInterval) { 1076 clearInterval(rc.tickerInterval); 1077 rc.tickerInterval = ''; 1078 } 1079 1080 unsubscribeStockSum(); 1081 unsubscribeTrend(); 1082 1083 if (tickerState) { 1084 setTimeout(() => { 1085 $$('.page[data-name="' + name + '"]').on('click', '.fab-ticker-settings-container[data-type="stockset"] .label-stockset', function (e) { 1086 onClickStockSet(e); 1087 }); 1088 1089 rc.trends.forEach(trend => { 1090 subscribeTrending(trend.code); 1091 }); 1092 }, 1000); 1093 } 1094 1095 const getTrendFilterName = () => { 1096 let html = ''; 1097 let hasF = $$('.label-trend[data-code="F"]').hasClass('active'); 1098 let hasV = $$('.label-trend[data-code="V"]').hasClass('active'); 1099 let hasG = $$('.label-trend[data-code="G"]').hasClass('active'); 1100 let hasL = $$('.label-trend[data-code="L"]').hasClass('active'); 1101 1102 if (hasF) { 1103 html += '<span class="display-flex label-ticker-code font-bold">F</span>'; 1104 } 1105 1106 if (hasV) { 1107 html += '<span class="display-flex label-ticker-code font-bold">V</span>'; 1108 } 1109 1110 if (hasG) { 1111 html += '<span class="material-icons fsize-18 text-color-white">arrow_upward</span>'; 1112 } 1113 1114 if (hasL) { 1115 html += '<span class="material-icons fsize-18 text-color-white">arrow_downward</span>'; 1116 } 1117 1118 return html; 1119 } 1120 1121 const getDataCodeGL = () => { 1122 let hasF = $$('.label-trend[data-code="F"]').hasClass('active'); 1123 let hasV = $$('.label-trend[data-code="V"]').hasClass('active'); 1124 let hasG = $$('.label-trend[data-code="G"]').hasClass('active'); 1125 let hasL = $$('.label-trend[data-code="L"]').hasClass('active'); 1126 1127 if (hasF || hasV) { 1128 return 'F'; 1129 } if (hasG && hasL) { 1130 return 'GL'; 1131 } else if (hasG) { 1132 return 'G'; 1133 } else if (hasL) { 1134 return 'L'; 1135 } 1136 } 1137 1138 const hasPortoOrder = (code, label = false) => { 1139 let stock = store.state.list.stock; 1140 let fav1 = stock.fav; 1141 let fav2 = stock.fav_2; 1142 let fav3 = stock.fav_3; 1143 let fav4 = stock.fav_4; 1144 let fav5 = stock.fav_5; 1145 1146 if (!label) { 1147 if (session?.code != 'd' && session?.code != '4') { 1148 1149 } else { 1150 return ''; 1151 } 1152 } 1153 1154 if (porto.indexOf(code) >= 0) { 1155 if (label) { 1156 return 'PORTO'; 1157 } else { 1158 if (sp && sp[code]) { 1159 let { 1160 priceavg, pricelast 1161 } = sp[code].data; 1162 1163 if (priceavg > pricelast) { 1164 return 'fab-ticker-blink-porto-down'; 1165 } else if (priceavg < pricelast) { 1166 return 'fab-ticker-blink-porto-up'; 1167 } else { 1168 return ''; 1169 } 1170 } else { 1171 return ''; 1172 } 1173 } 1174 } else if (order.indexOf(code) >= 0) { 1175 if (label) { 1176 return 'ORDER'; 1177 } else { 1178 return 'fab-ticker-blink-order'; 1179 } 1180 } else if (fav1.indexOf(code) >= 0) { 1181 if (label) { 1182 return stock.fav_name_1; 1183 } else { 1184 return 'fab-ticker-blink-fav'; 1185 } 1186 } else if (fav2.indexOf(code) >= 0) { 1187 if (label) { 1188 return stock.fav_name_2; 1189 } else { 1190 return 'fab-ticker-blink-fav'; 1191 } 1192 } else if (fav3.indexOf(code) >= 0) { 1193 if (label) { 1194 return stock.fav_name_3; 1195 } else { 1196 return 'fab-ticker-blink-fav'; 1197 } 1198 } else if (fav4.indexOf(code) >= 0) { 1199 if (label) { 1200 return stock.fav_name_4; 1201 } else { 1202 return 'fab-ticker-blink-fav'; 1203 } 1204 } else if (fav5.indexOf(code) >= 0) { 1205 if (label) { 1206 return stock.fav_name_5; 1207 } else { 1208 return 'fab-ticker-blink-fav'; 1209 } 1210 } else { 1211 return ''; 1212 } 1213 } 1214 1215 const getLabelTickerClass = (sec) => { 1216 let label = hasPortoOrder(sec, true); 1217 1218 if (label == 'PORTO') { 1219 return 'label-ticker-porto'; 1220 } else if (label == 'ORDER') { 1221 return 'label-ticker-order'; 1222 } else if (label) { 1223 return 'label-ticker-fav'; 1224 } else { 1225 return ''; 1226 } 1227 } 1228 1229 return () => $h` 1230 <div class="toolbar toolbar-slide tabbar tabbar-scrollable toolbar-bottom toolbar-bottom-level-${level} no-shadow ${tickerState ? '' : 'bg-transparent'}"> 1231 <div class="toolbar-inner toolbar-inner-slide bg-color-card ${tickerState ? '' : 'display-none'}"> 1232 ${trendMultiple.subsids.length > 0 ? $h` 1233 <div class="tab-link tab-link-ticker flex-direction-row no-ripple ${session && session?.code != 'd' && session?.code != '4' ? 'container-trendinfo-blink' : ''}" 1234 data-code="${getDataCodeGL()}" innerHTML="${getTrendFilterName()}"> 1235 </div> 1236 1237 ${getTrendItems(null, true).map((it, i) => $h` 1238 1239 ${isValidateTrendFocus(it.sec) && isValidateTrendInfo(stockSum[it.sec]?.trendinfo, it.sec) ? $h` 1240 <div class="tab-link bg-transparent flex-direction-row no-padding-right no-ripple pointer" @click="${() => openStockDashboard(it.sec)}" data-sec=${it.sec}> 1241 <div class="display-flex align-items-center margin-horizontal-half" innerHTML="${getTrendInfo(stockSum[it.sec]?.trendinfo, false, false)}"></div>
1242 <span class="position-relative"> 1243 <span class="${getLabelTickerClass(it.sec)}">${hasPortoOrder(it.sec, true)}</span> 1244 <span class="value-ticker-code font-bold fab-ticker-blink-container ${hasPortoOrder(it.sec)}">${it.sec}</span> 1245 </span> 1246 <span class="value-ticker-plast font-bold ${getColorClassV2(stockSum[it.sec])}"> 1247 ${FN(stockSum[it.sec]?.plast || it.cl)} 1248 </span> 1249 <span class="value-ticker-icon display-flex" innerHTML="${getIconChangeV2(stockSum[it.sec])}" style="margin-top: 2px"></span> 1250 <span class="value-ticker-chg ${getColorClassChange(stockSum[it.sec]?.chg || 0)}"> 1251 ${FN(stockSum[it.sec]?.chg || 0)} 1252 </span> 1253 <span class="value-ticker-pcg ${getColorClassChange(stockSum[it.sec]?.chg || 0)}" style="margin-top: 4px"> 1254 ${stockSum[it.sec]?.chgpct || 0}% 1255 </span> 1256 </div>`: $h` 1257 ${''} 1258 `} 1259 1260 `)}` : $h` 1261 1262 ${rc.trends.map((item, i) => $h` 1263 1264 ${isNoData(item.code) ? $h` 1265 ${''}` : $h` 1266 <div class="tab-link tab-link-ticker flex-direction-row no-ripple ${session && session?.code != 'd' && session?.code != '4' ? 'container-trendinfo-blink' : ''}" data-code="${item.code}"> 1267 ${item.code == 'G' ? $h` 1268 <span class="material-icons fsize-18 text-color-white">arrow_upward</span>`: $h` 1269 1270 ${item.code == 'L' ? $h` 1271 <span class="material-icons fsize-18 text-color-white">arrow_downward</span>`: $h` 1272 <span class="display-flex label-ticker-code font-bold">${item.code}</span> 1273 `} 1274 1275 `} 1276 </div> 1277 `} 1278 1279 ${getTrendItems(item.code).map((it, j) => $h` 1280 1281 ${isValidateTrendFocus(it.sec) ? $h` 1282 <div class="tab-link bg-transparent flex-direction-row no-padding-right no-ripple pointer" @click="${() => openStockDashboard(it.sec)}" data-sec=${it.sec} data-trend=${item.code}> 1283 <div class="display-flex align-items-center margin-horizontal-half" innerHTML="${getTrendInfo(stockSum[it.sec]?.trendinfo, false, false)}"></div> 1284 <span class="position-relative"> 1285 <span class="${getLabelTickerClass(it.sec)}">${hasPortoOrder(it.sec, true)}</span> 1286 <span class="value-ticker-code font-bold fab-ticker-blink-container ${hasPortoOrder(it.sec)}">${it.sec}</span> 1287 </span> 1288 <span class="value-ticker-plast font-bold ${getColorClassV2(stockSum[it.sec])}"> 1289 ${FN(stockSum[it.sec]?.plast || it.cl)} 1290 </span> 1291 <span class="value-ticker-icon display-flex" innerHTML="${getIconChangeV2(stockSum[it.sec])}" style="margin-top: 2px"></span> 1292 <span class="value-ticker-chg ${getColorClassChange(stockSum[it.sec]?.chg || 0)}"> 1293 ${FN(stockSum[it.sec]?.chg || 0)} 1294 </span> 1295 <span class="value-ticker-pcg ${getColorClassChange(stockSum[it.sec]?.chg || 0)}" style="margin-top: 4px"> 1296 ${stockSum[it.sec]?.chgpct || 0}% 1297 </span> 1298 </div>`: $h` 1299 ${''} 1300 `} 1301 1302 `)} 1303 1304 `)} 1305 1306 `} 1307 </div> 1308 <div class="fab-ticker-settings ${tickerState ? '' : 'display-none'}" @click="${() => $$('.page-current .fab-ticker-options').click()}">
1309 <span class="label-ticker-stockset margin-right-half font-bold">All</span> 1310 <div class="display-flex align-items-center label-ticker-filter margin-right-half font-bold"></div> 1311 <span class="material-icons text-color-white fsize-18">settings</span> 1312 </div> 1313 <div class="fab-ticker-toggle" @click="${toggleTicker}"> 1314 <span class="material-icons text-color-white">${tickerState ? 'close' : 'directions_run'}</span> 1315 </div> 1316 </div>` 1317 } 1318) 1319 1320Framework7.registerComponent( 1321 'app-fab-ticker', 1322 async (props, { $h, $store, $update }) => { 1323 let { 1324 level 1325 } = props; 1326 let stock = $store.state.list.stock; 1327 let favoriteListName = { 1328 '1': stock.fav_name_1, 1329 '2': stock.fav_name_2, 1330 '3': stock.fav_name_3, 1331 '4': stock.fav_name_4, 1332 '5': stock.fav_name_5 1333 }; 1334 let tickerFavoriteStockSet = app.form.getFormData('fv-ticker-stockset') || 'All'; 1335 1336 if (!level) { 1337 level = 1; 1338 } 1339 1340 if (stock.fav_name_1.length == 0) { 1341 await $store.dispatch('getFavoriteListName', { context: stock.fav_context_name_1 }) 1342 .then((res) => { 1343 if (res) { 1344 favoriteListName['1'] = res; 1345 } 1346 }); 1347 } 1348 1349 if (stock.fav_name_2.length == 0) { 1350 await $store.dispatch('getFavoriteListName', { context: stock.fav_context_name_2 }) 1351 .then((res) => { 1352 if (res) { 1353 favoriteListName['2'] = res; 1354 } 1355 }); 1356 } 1357 1358 if (stock.fav_name_3.length == 0) { 1359 await $store.dispatch('getFavoriteListName', { context: stock.fav_context_name_3 }) 1360 .then((res) => { 1361 if (res) { 1362 favoriteListName['3'] = res; 1363 } 1364 }); 1365 } 1366 1367 if (stock.fav_name_4.length == 0) { 1368 await $store.dispatch('getFavoriteListName', { context: stock.fav_context_name_4 }) 1369 .then((res) => { 1370 if (res) { 1371 favoriteListName['4'] = res; 1372 } 1373 }); 1374 } 1375 1376 if (stock.fav_name_5.length == 0) { 1377 await $store.dispatch('getFavoriteListName', { context: stock.fav_context_name_5 }) 1378 .then((res) => { 1379 if (res) { 1380 favoriteListName['5'] = res; 1381 } 1382 }); 1383 } 1384 1385 const onClickStockSet = (e) => { 1386 let isActive = $$(e.target).hasClass('active'); 1387 let isFavorite = $$(e.target).hasClass('favorite'); 1388 1389 if (isFavorite) { 1390 popupoverFavorite(e, function (err, data) { 1391 if (data) { 1392 app.form.storeFormData('fv-ticker-stockset', data); 1393 1394 $$('.label-ticker-stockset').text(data); 1395 $$('.fab-ticker-settings-container .favorite').text(data).addClass('active').siblings().removeClass('active') 1396 1397 $update(); 1398 } 1399 }); 1400 } else if (!isActive) { 1401 let text = $$(e.target).text(); 1402 1403 if (!sc.IsAuthPin() && (text == 'Porto' || text == 'Order')) { 1404 mainView.router.navigate('/loginpin'); 1405 app.fab.close(); 1406 } else { 1407 $$('.label-ticker-stockset').text(text); 1408 $$(e.target).addClass('active').siblings().removeClass('active'); 1409 } 1410 } 1411 } 1412 1413 const isFavorite = (label) => { 1414 for (let key in favoriteListName) { 1415 if (favoriteListName[key] == label) { 1416 return true; 1417 } 1418 } 1419 } 1420 1421 const onClickTrendFilter = (e) => { 1422 let isCol = $$(e.target).hasClass('col'); 1423 let el = isCol ? $$(e.target) : $$(e.target).parent(); 1424 1425 el.toggleClass('active'); 1426 1427 let hasF = $$('.label-trend[data-code="F"]').hasClass('active'); 1428 let hasV = $$('.label-trend[data-code="V"]').hasClass('active'); 1429 let hasG = $$('.label-trend[data-code="G"]').hasClass('active'); 1430 let hasL = $$('.label-trend[data-code="L"]').hasClass('active'); 1431 let code = ''; 1432 let labelTickerFilter = ''; 1433 1434 if (hasF) { 1435 code += 'F'; 1436 labelTickerFilter += 'F'; 1437 } 1438 1439 if (hasV) { 1440 code += 'V'; 1441 labelTickerFilter += 'V'; 1442 } 1443 1444 if (hasG) { 1445 code += 'G'; 1446 labelTickerFilter += '<span class="material-icons fsize-18 text-color-white">arrow_upward</span>'; 1447 } 1448 1449 if (hasL) { 1450 code += 'L'; 1451 labelTickerFilter += '<span class="material-icons fsize-18 text-color-white">arrow_downward</span>'; 1452 } 1453 1454 $$('.label-ticker-filter').html(labelTickerFilter); 1455 1456 if (code) { 1457 rc.unsubscribeTrending(); 1458 rc.subscribeTrending(code, true, true); 1459 } else { 1460 rc.unsubscribeTrending(true); 1461 1462 setTimeout(() => { 1463 rc.trends.forEach(trend => { 1464 rc.subscribeTrending(trend.code); 1465 }); 1466 }, 300); 1467 } 1468 } 1469 1470 const popupoverFavorite = async (e, cb) => { 1471 let param = { 1472 content: ` 1473 <div class="popover"> 1474 <div class="font-bold padding">Favorite List</div> 1475 <div class="list simple-list no-hairlines"> 1476 <ul> 1477 <li class="pointer">
1478 <span class="label-fav">${stock.fav_name_1}</span> 1479 </li> 1480 <li class="pointer"> 1481 <span class="label-fav">${stock.fav_name_2}</span> 1482 </li> 1483 <li class="pointer"> 1484 <span class="label-fav">${stock.fav_name_3}</span> 1485 </li> 1486 <li class="pointer"> 1487 <span class="label-fav">${stock.fav_name_4}</span> 1488 </li> 1489 <li class="pointer"> 1490 <span class="label-fav">${stock.fav_name_5}</span> 1491 </li> 1492 </ul> 1493 </div> 1494 </div> 1495 `, 1496 targetEl: $$(e.target), 1497 on: { 1498 open: function (popup) { 1499 popup.$el.find('.popover-angle').remove(); 1500 }, 1501 opened: function (popover) { 1502 popover.$el.on('click', 'li', function (e) { 1503 let el = $$(e.target).hasClass('label-fav') ? $$(e.target) : $$(e.target).find('.label-fav'); 1504 let label = el.text(); 1505 let i = el.parent().index() + 1; 1506 1507 if (label && i >= 0) { 1508 // let isfav = el.next('.material-icons').length > 0; 1509 1510 // favorite = i; 1511 1512 // app.form.storeFormData('fv-stock', i); 1513 1514 // if (!isfav) { 1515 // cb(null, label); 1516 // } 1517 1518 // app.form.storeFormData('fv-stock', label); 1519 1520 cb(null, label); 1521 } 1522 1523 popover.close(); 1524 }); 1525 }, 1526 closed: async function (popover) { 1527 let name = $$('.label-ticker-stockset').text(); 1528 let list = await getStockList(name); 1529 1530 rc.trendCodesFocus = list; 1531 1532 rc.update(); 1533 } 1534 } 1535 }; 1536 1537 app.popover.create(param).open(); 1538 } 1539 1540 return () => $h` 1541 <div class="fab fab-right-bottom"> 1542 <a href="#" class="fab-ticker-options display-none"></a> 1543 ${DATA.sizes.SM > app.width ? $h` 1544 <div class="fab-buttons fab-buttons-ticker-sm fab-buttons-top" data-level="${level}"> 1545 <div class="row fab-ticker-settings-container margin-top"> 1546 <div class="col label-trend" @click=${onClickTrendFilter} data-code="F">F</div> 1547 <div class="col label-trend" @click=${onClickTrendFilter} data-code="V">V</div> 1548 <div class="col label-trend" @click=${onClickTrendFilter} data-code="G"> 1549 <span class="material-icons fsize-16">arrow_upward</span> 1550 </div> 1551 <div class="col label-trend" @click=${onClickTrendFilter} data-code="L"> 1552 <span class="material-icons fsize-16">arrow_downward</span> 1553 </div> 1554 </div> 1555 <div class="row fab-ticker-settings-container" data-type="stockset"> 1556 <div class="col label-stockset active" @click=${onClickStockSet}>All</div> 1557 <div class="col favorite w-fit-content" @click=${onClickStockSet}>Favorite</div> 1558 <div class="col label-stockset" @click=${onClickStockSet}>Porto</div> 1559 <div class="col label-stockset" @click=${onClickStockSet}>Order</div> 1560 </div> 1561 </div>`: $h` 1562 <div class="fab-buttons fab-buttons-ticker fab-buttons-top" data-level="${level}"> 1563 <div class="row display-flex h-inherit"> 1564 <div class="row col fab-ticker-settings-container" data-type="stockset"> 1565 <div class="col label-stockset active" @click=${onClickStockSet}>All</div> 1566 <div class="col favorite w-fit-content" @click=${onClickStockSet}>Favorite</div> 1567 <div class="col label-stockset" @click=${onClickStockSet}>Porto</div> 1568 <div class="col label-stockset" @click=${onClickStockSet}>Order</div> 1569 </div> 1570 <div class="row col fab-ticker-settings-container"> 1571 <div class="col label-trend" @click=${onClickTrendFilter} data-code="F">F</div> 1572 <div class="col label-trend" @click=${onClickTrendFilter} data-code="V">V</div> 1573 <div class="col label-trend" @click=${onClickTrendFilter} data-code="G">
1574 <span class="material-icons fsize-16">arrow_upward</span> 1575 </div> 1576 <div class="col label-trend" @click=${onClickTrendFilter} data-code="L"> 1577 <span class="material-icons fsize-16">arrow_downward</span> 1578 </div> 1579 </div> 1580 </div> 1581 </div> 1582 `} 1583 </div>` 1584 } 1585) 1586 1587Framework7.registerComponent( 1588 'app-fab-talk', 1589 async (props, { $h }) => { 1590 return () => $h` 1591 <div class="fab fab-right-bottom"> 1592 <a href="#" class="bg-transparent no-shadow"> 1593 <img src="app/assets/img/app/ic_fab_talk.png" height="40" width="40" /> 1594 </a> 1595 <div class="fab-buttons fab-buttons-top" style="margin-left: -460px"> 1596 <div class="talk-fab"> 1597 <div class="display-flex align-items-center justify-content-space-between"> 1598 <span class="label-fab-title"> 1599 Portfolio Consultation 1600 </span> 1601 <span class="material-icons-round tcs pointer fab-close">close</span> 1602 </div> 1603 <div class="display-flex align-items-center justify-content-space-between margin-top"> 1604 <div class="display-flex align-items-center"> 1605 <img src="app/assets/img/ic_not_found.png" class="rounded-circle" height="60" width="60" /> 1606 <div class="margin-left-half"> 1607 <div class="label-name">XXX</span> 1608 <div class="label-title">Indo Premier Investment Specialist</div> 1609 </div> 1610 </div> 1611 </div> 1612 1613 <div class="container-fab-talk disable-scrollbar margin-top"> 1614 <div class="list no-hairlines no-hairlines-between simple-list no-margin"> 1615 <ul></ul> 1616 </div> 1617 </div> 1618 1619 <div class="container-fab-reply margin-top"> 1620 <input type="text" class="w-100" placeholder="Type a message..." /> 1621 <span class="material-icons tcs">link</span> 1622 </div> 1623 </div> 1624 </div> 1625 </div>` 1626 } 1627)
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.