forward-project/src/components/input-element.js

import { LitElement, html } from 'lit-element';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { store } from '../store.js';
import '@polymer/paper-dialog/paper-dialog.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import './my-icons.js';

class InputElement extends connect(store)(LitElement) {
    static get properties() {
        return {
            task: { type: String },
            text: { type: String}
        };
    }
    constructor() { 
        super();
        this.task = '';
        this.text='';
      }

    render() {
        return html`
        <style media="screen">
        .input-layout {
            width: 100%;
            text-align: center;
          }
        .money{
            width: 10em;
            height: 4em;
        }
        .keyboard {
            display: inline-block;
            padding: 0.75em 1.5em;
            text-align: center;
            display: flex;
         }

        .item{
            width: 39em;
         }
        .number{
            width: 10em;
         }
        .key{
            height: 3em;
            width: 3em;
            margin: 0.4em 0;
        }
        #text{
            width: 20em;
            height: 2em;
        }
        #task{
            width: 20em;
            height: 2em;
        }
        #space {
            width: 15em;
            height: 3em;
         }
        #back {
            font-weight: bold;
            height: 3em;
            width: 6em;
        }
        #enter{
            width: 5em;
            height: 5em;
        }
        label{
            margin-left: 1em;
        }
        @media (max-width: 767px) {
            

        }
        </style>

    <div class="input-layout"> 
    
      <input type="text"  id="text" autocomplete="off" placeholder="Car Plate Number" value="${this.text ||''}"
       @click="${() => this.showModal()}" readonly="readonly">
    
      <paper-icon-button class="money" icon="money" 
       @click="${this.addToCarNo}">
      </paper-icon-button>
       
    </div>

    <paper-dialog id="actions">
    <div>
    <label>Car Plate Number</label>:
    <input type="text"  id="task" autocomplete="off" value="${this.task || ''}"
    @change="${this.updateTask}" readonly="readonly">
    </div>

    <div class="keyboard">
            <div class="item">
                <button class="key" @click="${() => this.addToKey("Q")}">Q</button>
                <button class="key" @click="${() => this.addToKey("W")}">W</button>
                <button class="key" @click="${() => this.addToKey("E")}">E</button>
                <button class="key" @click="${() => this.addToKey("R")}">R</button>
                <button class="key" @click="${() => this.addToKey("T")}">T</button>
                <button class="key" @click="${() => this.addToKey("Y")}">Y</button>
                <button class="key" @click="${() => this.addToKey("U")}">U</button>
                <button class="key" @click="${() => this.addToKey("I")}">I</button>
                <button class="key" @click="${() => this.addToKey("O")}">O</button>
                <button class="key" @click="${() => this.addToKey("P")}">P</button>

                <button id="back" @click="${() => this.addToBack()}">&#8592;</button>

                <button class="key" @click="${() => this.addToKey("A")}">A</button>
                <button class="key" @click="${() => this.addToKey("S")}">S</button>
                <button class="key" @click="${() => this.addToKey("D")}">D</button>
                <button class="key" @click="${() => this.addToKey("F")}">F</button>
                <button class="key" @click="${() => this.addToKey("G")}">G</button>
                <button class="key" @click="${() => this.addToKey("H")}">H</button>
                <button class="key" @click="${() => this.addToKey("J")}">J</button>
                <button class="key" @click="${() => this.addToKey("K")}">K</button>
                <button class="key" @click="${() => this.addToKey("L")}">L</button>

                <button id="enter" @click="${() => this.addToEnter()}">Enter</button><br>

                <button class="key" @click="${() => this.addToKey("Z")}">Z</button>
                <button class="key" @click="${() => this.addToKey("X")}">X</button>
                <button class="key" @click="${() => this.addToKey("C")}">C</button>
                <button class="key" @click="${() => this.addToKey("V")}">V</button>
                <button class="key" @click="${() => this.addToKey("B")}">B</button>
                <button class="key" @click="${() => this.addToKey("N")}">N</button>
                <button class="key" @click="${() => this.addToKey("M")}">M</button>

                <button class="key" @click="${() => this.addToClear()}">clear</button><br>

                <button class="key" @click="${() => this.addToKey("/")}">/</button>
                <button class="key" @click="${() => this.addToKey("-")}">-</button>
                <button id="space" @click="${() => this.addToKey(" ")}"></button>
                <button class="key" @click="${() => this.closeModel()}">close</button>
        
            </div><div class="number">
                <button class="key" @click="${() => this.addToKey("7")}">7</button>
                <button class="key" @click="${() => this.addToKey("8")}">8</button>
                <button class="key" @click="${() => this.addToKey("9")}">9</button>

                <button class="key" @click="${() => this.addToKey("4")}">4</button>
                <button class="key" @click="${() => this.addToKey("5")}">5</button>
                <button class="key" @click="${() => this.addToKey("6")}">6</button>

                <button class="key" @click="${() => this.addToKey("1")}">1</button>
                <button class="key" @click="${() => this.addToKey("2")}">2</button>
                <button class="key" @click="${() => this.addToKey("3")}">3</button>
                <button class="key" @click="${() => this.addToKey("0")}">0</button>
            </div>
        </div>
    
    </paper-dialog>
        `
    }
    addToKey(value){
        console.log('choose value:::',value);
        this.task+=value;
    }
    addToEnter(){
        this.text=this.task;
        console.log('button enter>>>',this.text);
        this.shadowRoot.getElementById("actions").close();
    }
    addToBack(){
        this.task =this.shadowRoot.getElementById('task').value.replace(/.$/,'');
    }
    addToClear(){
        this.task = '';
    }
    showModal() {
        this.shadowRoot.getElementById("actions").open();
    }
    closeModel(){
        this.shadowRoot.getElementById("actions").close();
    }
    
    updateTask(e){
        this.task=e.target.value;
    }

    addToCarNo() {
        console.log('add car number:::', this.text);
       
            //   store.dispatch(addTodo(this.task));
           
            this.text="";
            this.task="";
        
    }
}
customElements.define('input-element', InputElement);