From 81ba11839367d6371388c0e7eb0d09cb1f33f769 Mon Sep 17 00:00:00 2001
From: Gwyn Perry <gmg@users.noreply.github.com>
Date: Mon, 6 Nov 2023 01:28:46 +0000
Subject: [PATCH] Added dot grid option to Itinerary elements

First iteration of adding dot grid option to Itinerary elements, including:
- methods to render dot grid lines in Itinerary
- UI to set dot grid option
- config settings for dot grid option
---
 src/configuration.jsx                | 12 +++++
 src/locales/en/app.json              |  4 ++
 src/pdf/components/itinerary.jsx     | 75 ++++++++++++++++++++++++++--
 src/pdf/config.js                    |  2 +
 src/pdf/pages/day.jsx                |  4 +-
 src/pdf/pages/month-overview.jsx     |  4 +-
 src/pdf/pages/week-retrospective.jsx |  7 ++-
 7 files changed, 99 insertions(+), 9 deletions(-)

diff --git a/src/configuration.jsx b/src/configuration.jsx
index 809083e..9761a44 100644
--- a/src/configuration.jsx
+++ b/src/configuration.jsx
@@ -460,6 +460,18 @@ class Configuration extends React.PureComponent {
 									{t( 'configuration.general.sidebar.description' )}
 								</Form.Text>
 							</Form.Group>
+							<Form.Group controlId="useDotGrid" className="mt-2">
+								<Form.Check
+									label={ t( 'configuration.general.dot-grid.label' ) }
+									type="checkbox"
+									checked={ this.state.useDotGrid }
+									value={ this.state.useDotGrid }
+									onChange={ this.handleFieldChange }
+								/>
+								<Form.Text className="text-muted">
+									{t( 'configuration.general.dot-grid.description' )}
+								</Form.Text>
+							</Form.Group>
 							<Form.Group controlId="year">
 								<Form.Label>{t( 'configuration.general.year' )}</Form.Label>
 								<Form.Control
diff --git a/src/locales/en/app.json b/src/locales/en/app.json
index 77ab1f7..e183d0d 100644
--- a/src/locales/en/app.json
+++ b/src/locales/en/app.json
@@ -69,6 +69,10 @@
 				"label": "Leave permanent space for side toolbar",
 				"description": "If you prefer to keep the side toolbar always open, check this option to make sure the calendar's content will never be covered by it."
 			},
+			"dot-grid": {
+				"label": "Use dot grid for itinerary elements",
+				"description": "Itinerary lines will be displayed using a dotted grid pattern instead of solid lines"
+			},
 			"starting-month": {
 				"label": "Starting month",
 				"description": "The first month in the generated calendar. Choose something like October if you want your calendar to cover a semester, instead of a calendar year."
diff --git a/src/pdf/components/itinerary.jsx b/src/pdf/components/itinerary.jsx
index 6e7c5f7..7d0978a 100644
--- a/src/pdf/components/itinerary.jsx
+++ b/src/pdf/components/itinerary.jsx
@@ -1,8 +1,9 @@
-import { StyleSheet, Text } from '@react-pdf/renderer';
+import { StyleSheet, Text, View } from '@react-pdf/renderer';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import { ITINERARY_ITEM, ITINERARY_LINES } from 'configuration-form/itinerary';
+import PdfConfig from 'pdf/config';
 
 class Itinerary extends React.PureComponent {
 	styles = StyleSheet.create( {
@@ -14,16 +15,37 @@ class Itinerary extends React.PureComponent {
 			minHeight: 20,
 			padding: '2 0 0 5',
 		},
+		dot: {
+			width: 2,
+			height: 2,
+			backgroundColor: '#AAA',
+			borderRadius: '50%',
+		},
+		dottedLine: {
+			display: 'flex',
+			flexDirection: 'row',
+			justifyContent: 'center',
+			gap: 18,
+		},
+		gridLine: {
+			fontSize: 12,
+			fontWeight: 'bold',
+			height: 18,
+			minHeight: 18,
+			padding: '2 0 0 5',
+		},
 	} );
 
 	renderItineraryItem = ( { type, value }, index ) => {
 		switch ( type ) {
 			case ITINERARY_ITEM:
-				return this.renderItem( value, index );
+				return this.props.config.useDotGrid ? this.renderGridItem( value, index )
+					: this.renderItem( value, index );
 
 			case ITINERARY_LINES:
 			default:
-				return this.renderLines( value );
+				return this.props.config.useDotGrid ? this.renderGridLines( value )
+					: this.renderLines( value );
 		}
 	};
 
@@ -44,6 +66,52 @@ class Itinerary extends React.PureComponent {
 		return lines;
 	}
 
+	renderDots( count ) {
+		const dots = [];
+		for ( let i = 0; i < count; i++ ) {
+			dots.push( <View key={ i } style={ this.styles.dot }></View> );
+		}
+
+		return dots;
+	}
+
+	renderDottedLine() {
+		return (
+			<View style={ this.styles.dottedLine }>
+				{this.renderDots( 21 )}
+			</View>
+		);
+	}
+
+	renderGridItem( text, index ) {
+		return (
+			<>
+				<Text key={ index } style={ this.styles.gridLine }>
+					{text}
+				</Text>
+				{this.renderDottedLine()}
+			</>
+		);
+	}
+
+	renderGridLine() {
+		return (
+			<>
+				<Text style={ this.styles.gridLine }></Text>
+				{this.renderDottedLine()}
+			</>
+		);
+	}
+
+	renderGridLines( count ) {
+		const lines = [];
+		for ( let i = 0; i < count; i++ ) {
+			lines.push( this.renderGridLine() );
+		}
+
+		return lines;
+	}
+
 	render() {
 		return <>{this.props.items.map( this.renderItineraryItem )}</>;
 	}
@@ -51,6 +119,7 @@ class Itinerary extends React.PureComponent {
 
 Itinerary.propTypes = {
 	items: PropTypes.array.isRequired,
+	config: PropTypes.instanceOf( PdfConfig ).isRequired,
 };
 
 export default Itinerary;
diff --git a/src/pdf/config.js b/src/pdf/config.js
index a17bd94..8a47702 100644
--- a/src/pdf/config.js
+++ b/src/pdf/config.js
@@ -18,6 +18,7 @@ const CONFIG_FIELDS = [
 	'weekendDays',
 	'isLeftHanded',
 	'alwaysOnSidebar',
+	'useDotGrid',
 	'isMonthOverviewEnabled',
 	'habits',
 	'monthItinerary',
@@ -53,6 +54,7 @@ class PdfConfig {
 		this.weekendDays = [ 0, 6 ];
 		this.isLeftHanded = false;
 		this.alwaysOnSidebar = false;
+		this.useDotGrid = false;
 		this.monthCount = 12;
 		this.fontFamily = LATO;
 		this.isMonthOverviewEnabled = true;
diff --git a/src/pdf/pages/day.jsx b/src/pdf/pages/day.jsx
index e0bcdff..ccaf05d 100644
--- a/src/pdf/pages/day.jsx
+++ b/src/pdf/pages/day.jsx
@@ -28,7 +28,7 @@ class DayPage extends React.Component {
 	renderExtraItems = ( items, index ) => (
 		<Page key={ index } size={ this.props.config.pageSize }>
 			<View style={ this.styles.page }>
-				<Itinerary items={ items } />
+				<Itinerary items={ items } config={ this.props.config } />
 			</View>
 		</Page>
 	);
@@ -60,7 +60,7 @@ class DayPage extends React.Component {
 							specialItems={ specialItems }
 						/>
 						<View style={ this.styles.content }>
-							<Itinerary items={ items } />
+							<Itinerary items={ items } config={ this.props.config } />
 						</View>
 					</View>
 				</Page>
diff --git a/src/pdf/pages/month-overview.jsx b/src/pdf/pages/month-overview.jsx
index e9f33ae..9f6ea6f 100644
--- a/src/pdf/pages/month-overview.jsx
+++ b/src/pdf/pages/month-overview.jsx
@@ -221,14 +221,14 @@ class MonthOverviewPage extends React.Component {
 						</View>
 						{this.renderHabitsTable()}
 						<View style={ this.styles.content }>
-							<Itinerary items={ config.monthItinerary } />
+							<Itinerary items={ config.monthItinerary } config={ this.props.config } />
 						</View>
 					</View>
 				</Page>
 				{getItemsOnExtraPages( config.monthItinerary ).map( ( items, index ) => (
 					<Page key={ index } size={ config.pageSize }>
 						<View style={ this.styles.page }>
-							<Itinerary items={ items } />
+							<Itinerary items={ items } config={ this.props.config } />
 						</View>
 					</Page>
 				) )}
diff --git a/src/pdf/pages/week-retrospective.jsx b/src/pdf/pages/week-retrospective.jsx
index 6fc2ef0..fe8ab9e 100644
--- a/src/pdf/pages/week-retrospective.jsx
+++ b/src/pdf/pages/week-retrospective.jsx
@@ -51,7 +51,10 @@ class WeekRetrospectivePage extends React.Component {
 							}
 						/>
 						<View style={ this.styles.content }>
-							<Itinerary items={ config.weekRetrospectiveItinerary } />
+							<Itinerary
+								items={ config.weekRetrospectiveItinerary }
+								config={ this.props.config }
+							/>
 						</View>
 					</View>
 				</Page>
@@ -59,7 +62,7 @@ class WeekRetrospectivePage extends React.Component {
 					( items, index ) => (
 						<Page key={ index } size={ config.pageSize }>
 							<View style={ this.styles.page }>
-								<Itinerary items={ items } />
+								<Itinerary items={ items } config={ this.props.config } />
 							</View>
 						</Page>
 					),