JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<div class='grid' id='main'>

  <div class='child' id='label_dag'>label_dag</div>
  <div class='child' id='label_manual_start'>label_manual_start</div>
  <div class='child' id='label_state'>label_state</div>
  <div class='child' id='BtnStart'>
    <input class='button' type='button' value='Старт' id='BtnStart' />
  </div>
  <div class='child' id='drag_id'>test_http_trigger</div>
  <div class='child' id='date_start'>date</div>
  <div class='child' id='state'>state</div>
  <div class='child' id='vheckState'>
    <input class='button' type='button' value='Статус?' id='BtnGetState' />
  </div>

</div>

CSS

.button {
  width: 100%;
}

#main {
  display: grid;
  background-color: grey;
  grid-template-columns: auto auto auto auto;
  /* grid-template-rows: 40px; */
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.grid .child {
  background-color: white;
}

JavaScript

"use strict"

var AirflowModule = (() => {
  //http://10.131.205.12:8080/admin/rest_api/api?api=trigger_dag&dag_id=test_http_trigger
  //private
  const default_uri = 'http://10.131.205.12:8080/admin/rest_api/api';
  var airflow_uri = 'http://10.131.205.12:8080/admin/rest_api/api';

  var getParams = (oParams /* JSON param object */ ) => {
    /*
    //default data
    oParams = {
    		'api': 		'trigger_dag',
    		'dag_id': 	'logs_remover'
    };
    */
    oParams = Object.assign({
      'api': 'trigger_dag',
      'dag_id': 'test_http_trigger'
    }, oParams);
    return oParams;
  }




  async function request(url, params) {
    params = Object.assign({}, params);
    return new Promise((resolve, reject) => {
      jQuery.ajax(url, {
        dataType: "json",
        //crossDomain: true,
        data: params,
        async: true,
        success: function(oData) {
          console.warn(oData)
          resolve(oData)
        },
        error: function(oError) {
          console.error(oError)
          reject(oError)
        }
      });
    });
  }



  return {
    //public
    test: () => {
      console.warn("test")
    },
    getState: async function() {

    },
    runDag: async function() {

      let params = getParams()
      console.warn(params)
      let res = await request(airflow_uri, params)
      console.warn(res)
      return this;
    }
  }
})();



document.getElementById('BtnStart').addEventListener('click', () => {
  alert('clk1');
})
document.getElementById('BtnGetState').addEventListener('click', () => {
  alert('clk2');
})

AirflowModule.runDag()