import React from "react" ; import styled from "styled-components" ; import { WithTranslation , withTranslation } from "react-i18next" ; import { media } from "@bit/wasedatime.core.ts.utils.responsive-utils" ; import { getCourseTitleAndInstructor } from "../../utils/course-search" ; import { SyllabusKey } from "../../constants/syllabus-data" ; import { CourseWithOcc } from "../../types/course" ; import SimpleBar from "simplebar-react" ; const StyledCourseColumn = styled ( "div" ) `
  display: flex;
  flex: 1 0 calc(30rem / 7 * ${ ( props ) => props . displayPeriods });
  border-right: 1px solid #f7f7f7;
  border-bottom: solid 1px #ccc;
  background: linear-gradient(180deg, #fff 50%, #eee 50%);
  background-size: 100% calc(100% / ${ ( props ) => props . displayPeriods } * 2);
  position: relative;
  min-width: 4rem;
  flex-direction: row;
` ; const CourseItem = styled ( "div" ) `
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(
    100% / ${ ( props ) => props . displayPeriods } * ${ ( props ) => props . top }
  );
  height: calc(
    100% / ${ ( props ) => props . displayPeriods } * ${ ( props ) => props . height } - 1px
  );
  width: 100%;
  padding: 0.3rem 0.1rem 0 0.1rem;
  border-left-width: 2px;
  border-left-style: solid;
  line-height: normal;
  text-align: center;
  .simplebar-scrollbar::before {
    background-color: #999;
  }
` ; const CourseTitle = styled ( "span" ) `
  flex: 1 1 auto;
  font-size: 1em;
  font-weight: bold;
  overflow-x: hidden;
  overflow-wrap: break-word;
  text-align: center;
  ${ media . phone `font-size: 0.7em;` }
` ; const CourseLocation = styled ( "span" ) `
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: lighter;
  padding: 0.2em 0;
  font-size: 0.9em;
  word-break: break-all;
  align-items: center;
  justify-content: center;
  text-align: center;
  ${ media . phone `font-size: 0.6em;` }
` ; const CourseList = styled ( "div" ) `
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 4rem;
  position: relative;
` ; interface Props extends WithTranslation { largestPeriod : number ; coursesAndProperties : { pref : { color : number ; displayLang : string ; visibility : boolean ; } ; course : CourseWithOcc ; } [ ] ; } const CourseColumn = ( { largestPeriod , coursesAndProperties , t } ) => { const displayPeriods = Math . max ( largestPeriod , 5 ) ; let distinctCourseLists = [ [ ] ] ; const initSlotList = [ 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ] ; let slotLists = [ initSlotList . slice ( ) ] ; coursesAndProperties . forEach ( ( courseAndProperty ) => { let period = courseAndProperty . course . occurrence [ SyllabusKey . OCC_PERIOD ] ; let startPeriod = 0 ; let endPeriod = 0 ; if ( period === - 1 ) { startPeriod = endPeriod = - 1 ; } else if ( period > 9 ) { startPeriod = ( period / 10 ) | 0 ; endPeriod = period % 10 ; } else { startPeriod = period ; endPeriod = period ; } let existsAvailableSlot = true ; for ( let i = 0 ; i < slotLists . length ; i ++ ) { existsAvailableSlot = true ; let j = startPeriod ; for ( ; j <= endPeriod ; j ++ ) { if ( slotLists [ i ] [ j ] ) { existsAvailableSlot = false ; break ; } } if ( existsAvailableSlot ) { j = startPeriod ; for ( ; j <= endPeriod ; j ++ ) { slotLists [ i ] [ j ] = 1 ; } distinctCourseLists [ i ] . push ( courseAndProperty ) ; break ; } } if ( ! existsAvailableSlot ) { slotLists . push ( initSlotList . slice ( ) ) ; distinctCourseLists . push ( [ ] ) ; let j = startPeriod ; for ( ; j <= endPeriod ; j ++ ) { slotLists [ slotLists . length - 1 ] [ j ] = 1 ; } distinctCourseLists [ distinctCourseLists . length - 1 ] . push ( courseAndProperty ) ; } } ) ; const distinctCourseListsComponent = distinctCourseLists . map ( ( distinctCourseList , index ) => { const listComponent = distinctCourseList . map ( ( courseAndProperty ) => { const course = courseAndProperty . course ; const { color , displayLang } = courseAndProperty . pref ; const { title } = getCourseTitleAndInstructor ( course , displayLang ) ; let period = course . occurrence [ SyllabusKey . OCC_PERIOD ] ; let startPeriod = 0 ; let endPeriod = 0 ; if ( period === - 1 ) { startPeriod = endPeriod = - 1 ; } else if ( period > 9 ) { startPeriod = ( period / 10 ) | 0 ; endPeriod = period % 10 ; } else { startPeriod = period ; endPeriod = period ; } let location = course . occurrence [ SyllabusKey . OCC_LOCATION ] ; return ( < CourseItem className = { `color-${ color }` } key = { `${ course [ SyllabusKey . TERM ] }-${ course [ SyllabusKey . TITLE ] }-${ startPeriod }-${ endPeriod }` } displayPeriods = { displayPeriods } top = { startPeriod - 1 } height = { endPeriod - startPeriod + 1 } > < CourseTitle > < SimpleBar > { title } < /SimpleBar> < /CourseTitle> < CourseLocation > { location } < /CourseLocation> < /CourseItem>); } ) ; return < CourseList key = { index } > { listComponent } < /CourseList>; } ) ; return ( < StyledCourseColumn displayPeriods = { displayPeriods } > { distinctCourseListsComponent } < /StyledCourseColumn>); } ; export default withTranslation ( "translation" ) ( CourseColumn ) ;