Передайте действительный тип времени с момента React setState до postgres - PullRequest
Новая
       29

Передайте действительный тип времени с момента React setState до postgres

0 голосов
/ 26 февраля 2020

Я новичок в кодировании и по сути в React. Я пытаюсь создать систему управления персоналом, которая будет иметь сотрудника и администратора. Сейчас я работаю над использованием топора ios для отправки в knex postgres в виде дБ и nodejs.

Мне нужна помощь, чтобы передать правильное значение в формате «ЧЧ: мм: сс» на мой бэкэнд с указанием типа времени.

Это моя миграция knex: 

exports.up = function(knex) {
    return knex.schema.createTable('undertime_overtime', (table) => {
        table.increments('id').primary();
        table.date('date_filed').notNullable(); //has to be default date now?
        table.time('from_time').notNullable();
        table.time('to_time').notNullable();
        table.string('reason').notNullable();
        table.integer('time_type').defaultTo(1);
        table.boolean('isDeleted').defaultTo(0);
        table.boolean('isAccepted').defaultTo(0);
        table.timestamp('created_at').defaultTo(knex.fn.now());
        table.timestamp('modified_at').defaultTo(null);
        table.integer('created_by').unsigned().notNullable();

        table.foreign('created_by').references('employees.id');

    });

Вот то, что я пробовал, что не работало: 

state = {
    date_filed: new Date(),
    from_time: moment().format("HH:mm:ss").toString(),
    to_time: moment().format("HH:mm:ss"),
    reason: '',
    time_type: 1,
    created_by: 1 //todo
    };

handleFromTime = time => {
    this.setState({
        from_time: time.format("HH:mm:ss")
    });
    console.log(time("HH:mm:ss"));
  };

Вот мой компонент: 

import React, { Component } from 'react';
import moment from 'moment';
import { Content, Row, Col, Box, Button } from 'adminlte-2-react';
import TimePicker from 'rc-time-picker';
import DatePicker from "react-datepicker";
import axios from 'axios'


import 'rc-time-picker/assets/index.css';

class OvertimeComponent extends Component {

  state = {
    date_filed: new Date(),
    from_time: moment(),
    to_time: moment(),
    reason: '',
    time_type: 1,
    created_by: 1 //todo
    };

  handleChangeDateFiled = date => {
    this.setState({
      date_filed: date
    });
    console.log(date)
  };

  handleFromTime = time => {
    this.setState({
        from_time: time
    });
    console.log(time);
  };

  handleToTime = time => {
    this.setState({
        to_time: time
    });
    console.log(time.format('HH:mm:ss'));
  };

  handleReason = event => {
    this.setState({
      reason: event.target.value
    })
    console.log(event.target.value);
  }

  handleSubmit = event => {
    console.log(`date-> ${this.state.date_filed} from ${this.state.from_time} to ${this.state.to_time} reason ${this.state.reason}`)
    event.preventDefault()
    axios.post('http://localhost:8080/api/time',this.state)
    .then(response=> {
      console.log(response);
    }).catch(error => {
      console.error(error);
    })
  }

  footer = [
    <Button key="btnSubmit" type="success" pullRight text="Submit" onClick={this.handleSubmit} />, 
  ];

  render() {
    return (
      <Content title="Overtime" subTitle="Requests" browserTitle="Overtime">
        <Row>
          <Col md={6}>
            <Row> 
              <Col xs={12}>
                <Box title="Overtime Application" type="primary" collapsable footer={this.footer}>
                <div className="form-group">
                    <label>Date</label>
                      <div>
                        <DatePicker name="date_filed" selected={this.state.date_filed} onChange={this.handleChangeDateFiled}/>
                      </div>
                    </div>
                    <div className="form-group">
                        <label>From</label>
                        <div>
                          <TimePicker name="from_time" value={this.state.from_time} onChange={this.handleFromTime} />
                        </div>
                    </div>
                    <div className="form-group">
                        <label>To</label>
                      <div>
                        <TimePicker name="to_time" value={this.state.to_time} onChange={this.handleToTime} />
                      </div>
                    </div>

                    <div className="form-group">
                        <label>Reason</label>
                        <textarea type="text" name="reason" value={this.state.reason} onChange={this.handleReason} className="form-control" placeholder="Enter ..." />
                    </div>
                  </Box>
                </Col>
            </Row>
          </Col>

          <Col md={6}>
            <Box title="Request Status" type="primary" collapsable>
              <div className="form-group">
                  <label>todo</label>
              </div>
            </Box>
          </Col>
        </Row>
    </Content>);
  }
}

export default OvertimeComponent;

1 Ответ

0 голосов
/ 27 февраля 2020

Я нашел проблему. Я должен был дотронуться до сообщения топора ios, чтобы получить нужный мне формат с момента объекта. 

    axios.post('http://localhost:8080/api/time',{
      'date_filed':this.state.date_filed,
      'from_time':this.state.from_time.format('HH:mm:ss'),
      'to_time':this.state.to_time.format('HH:mm:ss'),
      'reason':this.state.reason,
      'created_by': 1 //todo
    })
...