Skip to content

Commit

Permalink
KAAV-1473 Timeline dates top, localisation, year and month view optio…
Browse files Browse the repository at this point in the history 
…ns only option for zoom, no zoom only right to left scrolling dates with mouse, etc
  • Loading branch information
@henrihaapalasiili
henrihaapalasiili committed Apr 30, 2024
1 parent 512a7e0 commit a7680ac
Show file tree
Hide file tree
Showing 11 changed files with 256 additions and 264 deletions.
3 changes: 2 additions & 1 deletion public/locales/fi/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,8 @@
"confirm-dates":"Vahvista päivämäärät",
"dates-confirmed":"Päivämäärät on vahvistettu",
"new-esillaolo":"Lisää uusi esilläolo",
"delete-esillaolo":"Poista esilläolo"
"delete-esillaolo":"Poista esilläolo",
"modify-timeline":"Muokkaa aikataulua"
},
"common": {
"cancel": "Peruuta",
Expand Down
22 changes: 15 additions & 7 deletions src/components/ProjectTimeline/TimelineModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import React from 'react'
import { Modal } from 'semantic-ui-react'
import { Button, Accordion } from 'hds-react'
import { Button,Tabs } from 'hds-react'
import { EDIT_PROJECT_TIMETABLE_FORM } from '../../constants'
import { useTranslation } from 'react-i18next'
import FormField from '../input/FormField'
import { isArray } from 'lodash'
import { showField } from '../../utils/projectVisibilityUtils'
import './VisTimeline.css'

const TimelineModal = ({ open,group,deadlines,openDialog,attributeData,formValues,deadlineSections,formSubmitErrors,projectPhaseIndex,archived,allowedToEdit }) => {
console.log(attributeData,formValues)
console.log(deadlineSections,deadlines)
const TimelineModal = ({ open,group,content,deadlines,openDialog,attributeData,formValues,deadlineSections,formSubmitErrors,projectPhaseIndex,archived,allowedToEdit }) => {
const { t } = useTranslation()

const getFormField = (fieldProps, key, disabled) => {
Expand Down Expand Up @@ -119,15 +117,25 @@ const TimelineModal = ({ open,group,deadlines,openDialog,attributeData,formValue

return (
<Modal open={open} size={'large'} className='timeline-edit-right'>
<Modal.Header>{group}</Modal.Header>
<Modal.Header>
<ul className="breadcrumb">
<li><a href="#">{group}</a></li>
<li><a href="#">{content}</a></li>
</ul>
</Modal.Header>
<Modal.Content>
<div className='date-content'>
{deadlineSections.map((section, i) => {
if (section.title === group) {
return(
<Accordion className='timeline-accordion' heading={"Esilläolo"} key={i + section.title + "esillaolo"} initiallyOpen={true}>
<Tabs key={i + section.title}>
<Tabs.TabList style={{ marginBottom: 'var(--spacing-m)' }}>
<Tabs.Tab>{section.title}</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanel>
{renderSection(section, i)}
</Accordion>
</Tabs.TabPanel>
</Tabs>
)
}
})}
Expand Down
7 changes: 0 additions & 7 deletions src/components/ProjectTimeline/VisTimeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ function VisTimeline({deadlines}) {
*/
const move = (percentage) => {
var range = timeline.getWindow();
console.log(range)
var interval = range.end - range.start;

timeline.setWindow({
Expand Down Expand Up @@ -105,7 +104,6 @@ function VisTimeline({deadlines}) {
if(!subtract){
let originalDiff = moment.duration(moment(timeData.end).diff(moment(timeData.start)))
let originalTimeFrame = originalDiff.asDays()
//console.log(originalTimeFrame)
timeData.start = item.end
timeData.end = moment(timeData.start).add(originalTimeFrame, 'days').toDate()
}
Expand All @@ -125,7 +123,6 @@ function VisTimeline({deadlines}) {
}

const onRangeChanged = ({ start, end }) => {
console.log(start, end)
const Min = 1000 * 60 * 60 * 24; // one day in milliseconds
const Max = 31556952000; // 1000 * 60 * 60 * 24 * 365.25 one year in milliseconds
let a0 = 10;
Expand All @@ -138,18 +135,14 @@ function VisTimeline({deadlines}) {
// Arithmatic progression variables
if (mins !== 0) {
const x = (mins - a0) / distance; // Arithmatic progression formula
console.log(x)
if(x > 50){
console.log("smaller then 50")
document.querySelectorAll('.inner, .inner-end').forEach(el => el.classList.add('hiddenTimes'));
}
else if(x < 50 && document.querySelectorAll('.hiddenTimes')){
console.log("bigger then 50")
document.querySelectorAll('.inner, .inner-end').forEach(el => el.classList.remove('hiddenTimes'));
}
} else {
if(!document.querySelectorAll('.hiddenTimes')){
console.log("100")
document.querySelectorAll('.inner, .inner-end').forEach(el => el.classList.add('hiddenTimes'));
}
}
Expand Down
139 changes: 61 additions & 78 deletions src/components/ProjectTimeline/VisTimeline.scss
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,8 @@
@import '../common/colors';
.color-tram{
background-color: $color_tram !important;
}
.color-summer{
background-color: $color-summer !important;
}
.color-metro{
background-color: $color_metro !important;
}
.color-bus{
background-color: $color_bus !important;
color:white;
}
.color-gold{
background-color: $color_gold !important;
}
.color-fog{
background-color: $color_fog !important;
}

.vis{
margin-top: 100px;
margin-bottom: 20px;
.vis-item{
// pointer-events: none;
}
.vis-drag-left{
pointer-events: auto;
}
Expand All @@ -39,29 +17,29 @@
justify-content: space-between;
align-items: center;
}
/* .rangeItem{
pointer-events: auto;
position: relative;
z-index: 2000;
} */
.inner,.inner-end{
z-index: 1000;
pointer-events: auto;
// top: 18px !important;
border-width: 0;
.vis-item-overflow{
height: 5px;
border-top: 4px dotted rgba(0, 0, 0, .95);
color: #fff;
background-color: #fff;
width: 100%;
.vis-item-content{
pointer-events: auto;
padding:0;
}
}
.vis-drag-left,.vis-drag-right{
height: 7px !important;
width: 7px !important;
background-color: black;
height: 18px !important;
width: 18px !important;
background-color:#f2f2f2;
border-radius: 50%;
top: -1px !important;
top: -8px !important;
display: inline-block;
border: 1px solid black;
}
}

Expand All @@ -73,11 +51,6 @@
padding-left: 10px;
}

/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray;
}
.negative{
background-color: rgba(255, 0, 0, 0.2) !important;
}
Expand All @@ -90,6 +63,7 @@
border-top: none;
border-left: none;
border-right: none;
background: #ffffff !important;
.vis-inner{
padding: 0;
display: flex;
Expand Down Expand Up @@ -147,63 +121,72 @@
}
}
}
}

.vis-boxes{
margin-top: 100px;
margin-bottom: 20px;
.vis-item{
// pointer-events: none;
}
.vis-drag-left{
pointer-events: auto;
}
.vis-drag-right{
pointer-events: auto;
}
.vis-time-axis.vis-foreground{
background-color: $light-gray3;
.vis-label{
background-color: #F2F2F2;
}
.timeline-menu {

.vis-nesting-group{
display: flex;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
}

.vis-box{
position: absolute;
z-index: 2000;
margin-top:-30px;
margin-right: -1px;
}

.vis-dot{
top: -30px;
.vis-label.vis-nesting-group.expanded:before {
content: "";
width: 18px;
height: 100%;
background: url('../../assets/icons/angle-up.svg') no-repeat;
background-position-x: center;
background-position-y: center;
background-size: 18px;
}

.vis-line{
z-index: 2001;
height: 50px !important;
.vis-label.vis-nesting-group.collapsed:before{
content: "";
width: 18px;
height: 100%;
background: url('../../assets/icons/angle-down.svg') no-repeat;
background-position-x: center;
background-position-y: center;
background-size: 18px;
}

.vis-ltr .vis-label.vis-nested-group .vis-inner {
padding-left: 10px;
.vis-minor{
background-color: white;
border-left: 1px solid #b4b4b4;
border-top: 1px solid #b4b4b4;
border-bottom: 1px solid #b4b4b4;
}

/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray;
background: #F2F2F2;
}
.negative{
background-color: rgba(255, 0, 0, 0.2);

.vis-saturday,.vis-sunday{
background: #F2F2F2;
}
}

.edit-timeline-button-container{
display: flex;
margin-bottom: 80px;
justify-content: flex-end;
.edit-timeline-button{
margin-left: 20px;
.color-tram{
background-color: $color_tram !important;
}
.color-summer{
background-color: $color-summer !important;
}
.color-metro{
background-color: $color_metro !important;
}
.color-bus{
background-color: $color_bus !important;
color:white;
}
.color-gold{
background-color: $color_gold !important;
}
.color-fog{
background-color: $color_fog !important;
}

}
5 changes: 0 additions & 5 deletions src/components/ProjectTimeline/VisTimelineBoxes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@ function VisTimelineBoxes({deadlines}) {
}

const onRangeChanged = ({ start, end }) => {
console.log(start, end)
const Min = 1000 * 60 * 60 * 24; // one day in milliseconds
const Max = 31556952000; // 1000 * 60 * 60 * 24 * 365.25 one year in milliseconds
let a0 = 10;
Expand All @@ -138,18 +137,14 @@ function VisTimelineBoxes({deadlines}) {
// Arithmatic progression variables
if (mins !== 0) {
const x = (mins - a0) / distance; // Arithmatic progression formula
console.log(x)
if(x > 50){
console.log("smaller then 50")
document.querySelectorAll('.inner, .inner-end').forEach(el => el.classList.add('hiddenTimes'));
}
else if(x < 50 && document.querySelectorAll('.hiddenTimes')){
console.log("bigger then 50")
document.querySelectorAll('.inner, .inner-end').forEach(el => el.classList.remove('hiddenTimes'));
}
} else {
if(!document.querySelectorAll('.hiddenTimes')){
console.log("100")
document.querySelectorAll('.inner, .inner-end').forEach(el => el.classList.add('hiddenTimes'));
}
}
Expand Down
Loading

0 comments on commit a7680ac

Please sign in to comment.