SHARE
TWEET

Untitled

a guest Jun 20th, 2019 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { PolymerElement, html } from '@polymer/polymer';
  2. import { SharedStyles } from '../../../shared/shared-styles';
  3. import { DefaultApi } from '../../../api/DefaultApi';
  4. import { TokenService } from '../../../services/TokenService';
  5.  
  6. import '../../../shared/layouts/two-column-layout';
  7. import '@polymer/paper-card/paper-card.js';
  8. import '../components/overview-menu';
  9. import '../../../shared/layouts/filter-layout';
  10.  
  11.  
  12. export class mainInfoPage extends PolymerElement {
  13.  
  14.     constructor() {
  15.         super();
  16.         this.loading = true;
  17.         this.api = new DefaultApi();
  18.         this.tokenService = new TokenService();
  19.         this.playerQuests = [];
  20.  
  21.  
  22.         // this.playerQuests = null; // zmena na aktivni questy
  23.  
  24.         // api se bude menit na aktivni questy
  25.         // this.api.questyApi.queryQuestyHracaByFilter(new QuestyFilterDto()).then(
  26.         //     (result) => {
  27.         //         let pole = [];
  28.         //         Object.keys(result.zoznam).forEach(key => {
  29.         //             pole.push(result.zoznam[key]);
  30.         //         });
  31.         //
  32.         //         this.playerQuests = pole;
  33.         //
  34.         //     }
  35.         // );
  36.         //
  37.         // this.api.questyApi.queryQuestyHracaByFilter(new QuestyVysledokVyhladavaniaDto()).then(
  38.         //     (result) => {
  39.         //         this.set('progressValue', result);
  40.         //         this.progressValue = result;
  41.         //     }
  42.         // );
  43.  
  44.     }
  45.  
  46.     connectedCallback() {
  47.         super.connectedCallback();
  48.         this.initFilter();
  49.         this.init();
  50.  
  51.  
  52.     }
  53.  
  54.     static get observers() {
  55.         return [
  56.  
  57.         ]
  58.     }
  59.  
  60.     static get template() {
  61.         return html`
  62.             ${SharedStyles}
  63.             <style> paper-card {
  64.     margin-top: 15px;
  65.     width: 100%;
  66.     border-radius: 0;
  67.     border: 1px solid rgba(0, 0, 0, .1);
  68.     background-color: rgba(0, 0, 0, .4);
  69.     box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.8);
  70. }
  71.  
  72. .subtitle {
  73.     font-size: .9rem;
  74.     color: orange;
  75.     padding-bottom: 15px;
  76.     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  77. }
  78.  
  79. .info-font {
  80.     color: white;
  81.     font-size: .8rem;
  82.     text-align: center;
  83. }
  84.  
  85. .info-content {
  86.     padding-top: 10px;
  87. }
  88.  
  89. .avatar {
  90.     background: url(../../../../assets/images/avatar.jpeg) no-repeat center top;
  91.     height: 200px;
  92.     width: 100%;
  93.     overflow: visible;
  94. }
  95.  
  96. .stat-font {
  97.     font-size: 20px;
  98.     margin-left: 10px;
  99.     color: white;
  100.     vertical-align: sub;
  101. }
  102.  
  103. .level-box-main {
  104.     font-size: 20px;
  105.     height: 32px;
  106.     width: 32px;
  107.     border-radius: 50px;
  108.     border: 1px solid white;
  109.     margin-left: auto;
  110.     margin-right: auto;
  111. }
  112.  
  113. .level-box-main span {
  114.     vertical-align: middle;
  115.     margin-left: 0;
  116. }
  117.  
  118. .card-header {
  119.     margin-left: 15px;
  120.     margin-right: 15px;
  121.     padding: 16px;
  122.     font-size: 24px;
  123.     font-weight: 400;
  124.     color: white;
  125.     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  126. }
  127.  
  128. </style>
  129.            
  130.            
  131.            
  132.             <two-column-layout header="overview" subheader="mainInfo" fullscreen="true" isdetail="true">
  133.     <span slot="menu">
  134.                     <overview-menu active-page="main">
  135.                     </overview-menu>
  136.                 </span>
  137.     <span slot="content">
  138.  
  139.                     <div class="container-fluid">
  140.     <div class="row">
  141.         <div class="col-lg-4">
  142.  
  143.             <paper-card>
  144.             <div class="card-header">
  145.             Avatar                
  146.             </div>
  147.                 <div class="card-content">
  148.                     <div class="avatar"></div>
  149.  
  150.                 </div>
  151.             </paper-card>
  152.         </div>
  153.         <div class="col-lg-8">
  154.             <div class="col-12 p-0">
  155.  
  156.                 <paper-card>
  157.                 <div class="card-header">
  158.                 Informace o mne
  159.                 </div>
  160.                     <div class="card-content">
  161.                         <div class="row text-center">
  162.                             <div class="col-3">
  163.                                 <div class="subtitle">
  164.                                 Jmeno
  165.                                 </div>
  166.                                 <div class="info-content">
  167.                                     <span class="info-font">{{playerInfo.osobneUdaje.meno}} {{playerInfo.osobneUdaje.priezvisko}}</span>
  168.                                 </div>
  169.                             </div>
  170.                             <div class="col-3">
  171.                                 <div class="subtitle">
  172.                                     Email
  173.                                 </div>
  174.                                 <div class="info-content">
  175.                                     <span class="info-font">{{playerInfo.prihlasovacieUdaje.email}}</span>
  176.                                 </div>
  177.                             </div>
  178.                             <div class="col-3">
  179.                                 <div class="subtitle">
  180.                                     Prezdivka
  181.                                 </div>
  182.                                 <div class="info-content">
  183.                                     <span class="info-font">{{playerInfo.osobneUdaje.prezyvka}}</span>
  184.                                 </div>
  185.                             </div>
  186.                             <div class="col-3">
  187.                                 <div class="subtitle">
  188.                                     Login
  189.                                 </div>
  190.                                 <div class="info-content">
  191.                                     <span class="info-font">{{playerInfo.prihlasovacieUdaje.login}}</span>
  192.                                 </div>
  193.                             </div>
  194.                         </div>
  195.  
  196.                     </div>
  197.  
  198.             </paper-card>
  199.  
  200.             <div class="col-12 p-0">
  201.        
  202.                 <paper-card>
  203.                     <div class="card-header">
  204.                         Statistiky hrace
  205.                     </div>
  206.                     <div class="card-content">
  207.                         <div class="row text-center">
  208.                             <div class="col-4">
  209.                                 <div class="subtitle">
  210.                                     Zkusenosti
  211.                                 </div>
  212.                                 <div class="info-content">
  213.                                     <iron-icon icon="vaadin:star" class="static-icon"></iron-icon>
  214.                                     <span class="stat-font">{{playerValues.skusenosti}}</span>
  215.                                 </div>
  216.                             </div>
  217.                             <div class="col-4">
  218.                                 <div class="subtitle">
  219.                                     Level
  220.                                 </div>
  221.                                 <div class="info-content">
  222.                                     <div class="level-box-main">
  223.                                         <span class="stat-font">0</span>
  224.                                     </div>
  225.                                 </div>
  226.                             </div>
  227.                             <div class="col-4">
  228.                                 <div class="subtitle">
  229.                                     Valuty
  230.                                 </div>
  231.                                 <div class="info-content">
  232.                                     <iron-icon icon="vaadin:diamond-o" class="static-icon"></iron-icon>
  233.                                     <span class="stat-font">{{playerValues.valuty}}</span>
  234.                                 </div>
  235.                             </div>
  236.        
  237.                         </div>
  238.                     </div>
  239.                 </paper-card>
  240.             </div>
  241.             <div class="row">
  242.     <div class="col-6">
  243.     <paper-card>
  244.     <div class="card-header">
  245.                         Prehled aktivnich questu
  246.                     </div>
  247.                     <div class="card-content">
  248. <!--                    <div class="info-font">Nemáš žádné aktivní questy</div>-->
  249.                     <template is="dom-repeat" items="{{playerQuests}}">
  250.                     {{item.typQuestu.nazov}}
  251.  </template>    
  252. </div>
  253. </paper-card>
  254. </div>
  255. <div class="col-6">
  256. <paper-card>
  257.     <div class="card-header">
  258.                         Prehled odznaku
  259.                     </div>
  260.                     <div class="card-content">
  261.                                         <div class="info-font">Nemáš žádné odznaky</div>
  262.  
  263. </div>
  264. </paper-card>
  265. </div>
  266.    
  267. </div>
  268.     </div>
  269.     </div>
  270.    
  271.  
  272.     </div>
  273.     </div>
  274.  
  275.     </span>
  276.  
  277. </two-column-layout>
  278.         `;
  279.     }
  280.  
  281.     init() {
  282.         this.noDataFound = false;
  283.         Promise.all([
  284.             this.api.hracApi.getProfil(this.filter),
  285.             this.api.hracApi.getMenuInfomations(this.filter),
  286.             this.api.questyApi.queryQuestyHracaByFilter(this.filter),
  287.         ]).then(([
  288.                      playerInfoResult,
  289.                      playerValues,
  290.                      playerQuestsResult,
  291.                  ]) => {
  292.             this.set('playerInfo', playerInfoResult);
  293.             this.set('playerValues', playerValues);
  294.            this.set('playerQuests', playerQuestsResult.zoznam);
  295.             if (this.playerQuests.length == 0) {
  296.                 this.noDataFound = true;
  297.             }
  298.  
  299.         })
  300.         this.loading = false;
  301.     }
  302.  
  303.     initFilter() {
  304.         this.filter = {
  305.  
  306.         };
  307.     }
  308.  
  309.  
  310.  
  311.  
  312. // <template is="dom-repeat" items="{{playerQuests}}">
  313. //         <template is="dom-if" if="[[isNotEmpty(item.typQuestu.nazov)]]">
  314. //
  315. //         {{item.typQuestu.nazov}}
  316. //
  317. // </template>
  318. // <template is="dom-if" if="[[isEmpty(item.typQuestu.nazov)]]">
  319. //     <p class="quest-font" style="margin-bottom: 0;">Nemáš žádné aktivní questy.</p>
  320. // </template>
  321. // </template>
  322.    
  323.    
  324.     // isNotEmpty(nazov){
  325.     //     return nazov != null;
  326.     // }
  327.     //
  328.     // isEmpty(nazov){
  329.     //     return nazov == null;
  330.     // }
  331.  
  332. }
  333.  
  334. customElements.define('main-info-page', mainInfoPage);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top