JS: Как использовать временную метку для горизонтального позиционирования элементов внутри другого элемента, например, на временной шкале (использование React, moment ()) - PullRequest
Новая
       26

JS: Как использовать временную метку для горизонтального позиционирования элементов внутри другого элемента, например, на временной шкале (использование React, moment ())

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

Я пытался понять, как это сделать, но мои навыки JS довольно низки.

Итак, вот так:

timeline

Как вы можете видеть на картинке выше, у меня есть временная шкала, и я хотел бырасположить элементы (бирюзовые делители теперь друг на друге, то есть: «Предметы») на временной шкале в соответствии с датами их начала и окончания (это также установит ширину бирюзовых делений.

CustomTimeline.JS:

import React, { Component } from "react";
import moment from "moment";
import './CustomTimeline1.scss';
import Header from "./TimelineElements/Header";
import SidebarHeader from "./TimelineElements/SidebarHeader";
import SideBar from "./TimelineElements/SideBar";
import Items from "./TimelineElements/Items";
import Lines from "./TimelineElements/Lines";
import Time from "./TimelineElements/Time";
import data from './CustomTimeline.json';

var itemsData = data;

export default class CustomTimeline extends Component {

  constructor(props) {
    super(props);
    let items = []
    for (let i = 0; i < itemsData.length; i++) {
      var item = itemsData[i];
      items.push({
              id: item.id,
              group: item.group,
              title: item.title,
              start_time:  moment(item.start_time).format('X'),
              end_time: moment(item.end_time).format('X'),
              style: {
                backgroundColor: item.bgColor === 0 ? "#00d3cd" : item.bgColor === 1 ? "#9a4a75" : item.bgColor === 2 ? "#ffb16a"  : item.bgColor === 3 ? "#9a4a75" : item.bgColor === 4 ? "#54c0f2" :  "#fcd600",           
                color: "#ffffff",
                borderColor: "transparent"
              }
            })
      }

    const defaultTimeStart = moment("2019-02-01" , 'YYYY-MM-DD').format('X');    
    const defaultTimeEnd = moment(defaultTimeStart).endOf('month').format('X');  
    

  }
  
  render() {

    return (
      <div className="react-calendar-timeline">
        <div className="rct-header-container header-sticky">
            <SidebarHeader title={this.props.title}/>

                <div className="rct-header">
                    <Header year={this.props.year} month={this.props.month}/>
                    <Time/>
                    
                </div>

          </div>

            
            <div className="rct-bottom-container">
              <SideBar groups={this.props.groupTitles}/>
              <div className="timeLine"> 
                  <Items itemsData={items}/>
                  <Lines/>
                  </div>
                </div>
              </div>
    );
  }
}

JSON выглядит так: 

[
    {
      "id": 1,
      "start_time": "2019-02-11 03:00:00",
      "end_time": "2019-02-14 10:59:59",
      "group": 1,
      "bgColor": 2,
      "title": "dmo"
    }, ...

Items.js: 

import React, { Component } from 'react';
import './Items.scss';
class Items extends Component {
  
	createItems = () => {
	    	let itemsData = this.props.itemsData;
	    	let groupItems = [];
		    for (let i = 0; i < itemsData.length ; i++) {
		    	var item = <div title={itemsData[i].title} style={itemsData[i].style} className="rct-item" key={i}><div>{itemsData[i].title}</div></div>;
		    	groupItems.push(item);

		    }
		    return groupItems;
		}  
  render() {
    return (
      <div className="rct-items">
			{this.createItems()}
		</div>
    );	
  }
}

export default Items;

Временная шкала и все элементы (заголовок, боковая панель, линии, ...) внутри нее являются статическими, это просто вопрос отображения элементов в нужном месте.

Я представлял себе, как получить ширину .timeLine (см. CustomTimeline.js) и получить позицию x, установив позицию O% в defaultStartTime и позицию 100% в defaultEndTime (для этих двух переменных момент ()возвращает дату в виде отметки времени в секундах. Затем я теряюсь.

Надеюсь, мое объяснение было ясным.

Есть какие-нибудь идеи о том, как я могу это сделать? Спасибо!

...