this.setState({ isShown: false })}
/>
{settingsSection}
);
}
}
SettingsSection.propTypes = {
// eslint-disable-next-line react/forbid-prop-types
settings: PropTypes.objectOf(PropTypes.any.isRequired).isRequired,
plugins: PropTypes.Custom.Plugins.isRequired,
};
SettingsSection.contextType = SettingsContext;
export default SettingsSection;
================================================
FILE: src/client/Settings/index.js
================================================
// eslint-disable-next-line import/prefer-default-export
export { default as SettingsSection } from './SettingsSection';
================================================
FILE: src/client/__tests__/Colors.test.js
================================================
const fs = require('fs');
const path = require('path');
const walkSync = require('walk-sync');
test('verify_no_random_colors', async () => {
const rootPath = 'src/';
const excludeNames = ['index.css'];
let excludeCount = 0;
walkSync(rootPath, ['**/*.css']).forEach((fileName) => {
const filePath = path.join(rootPath, fileName);
if (excludeNames.some((name) => filePath.endsWith(name))) {
excludeCount += 1;
} else {
const fileData = fs.readFileSync(filePath).toString();
expect(fileData.includes('#')).toBeFalsy();
}
});
expect(excludeCount).toEqual(excludeNames.length);
});
================================================
FILE: src/client/index.css
================================================
body {
--background-color: #111;
--component-color: #222;
--component-highlight-color: #333;
--text-color: white;
--text-disabled-color: #9197a3;
--link-color: #3498DB;
--topic-color: #00bc8c;
--input-text-color: #fff;
--input-background-color: #333;
--input-disabled-background-color: #222;
--suggestion-highlight-color: #375a7f;
--input-background-token-color: #444;
--warning-color: #ff5281;
--font-size: 13px;
--font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: var(--background-color);
color: var(--text-color);
font-size: var(--font-size);
font-family: var(--font-family);
}
a,
a:hover {
color: var(--link-color);
cursor: pointer;
}
a.topic,
a.topic:hover {
color: var(--topic-color);
}
pre {
color: var(--text-color);
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.monospace {
font-family: Consolas;
}
================================================
FILE: src/client/index.html
================================================
GLADOS
================================================
FILE: src/client/index.js
================================================
import './Bootstrap';
import './index.css';
import './prop-types'; // Load PropTypes.Custom
import React from 'react';
import ReactDOM from 'react-dom';
import io from 'socket.io-client';
import { isVirtualItem } from '../common/data_types';
import SocketRPC from '../common/SocketRPC';
import { Application } from './Application';
import { Coordinator } from './Common';
function getCookies() {
const cookies = {};
document.cookie.split('; ').forEach((item) => {
const [key, value] = item.split('=');
cookies[key] = decodeURIComponent(value);
});
return cookies;
}
window.main = function main() {
const cookies = getCookies();
window.api = SocketRPC.client(
io(`${cookies.host}:${cookies.port}`),
(name, input, output) => {
// The "log-event-created" event is used to auto-add the "Log Level: Minor+"
// item to LogEventSearch typeahead, to make sure that the new item is visible.
if (name === 'log-event-upsert' && isVirtualItem(input)) {
Coordinator.broadcast('log-event-created', output);
} else if (name === 'reminder-complete') {
Coordinator.broadcast('log-event-created', output.logEvent);
}
},
// TODO: Eliminate this catch-all.
(_name, _input, error) => Coordinator.invoke('modal-error', error),
);
const plugins = {};
const pluginsContext = require.context('../plugins', true, /client\.js$/);
const pluginPatterns = JSON.parse(cookies.plugins).map((pattern) => new RegExp(pattern));
pluginsContext.keys()
.filter((filePath) => pluginPatterns.some((regex) => filePath.match(regex)))
.forEach((filePath) => {
const exports = pluginsContext(filePath);
const name = filePath.split('/').slice(1, -1).join('/');
plugins[name] = exports.default;
});
ReactDOM.render(
{output.map((line) => `${line}\n`).join('')}
);
}
return null;
}
CustomTooltip.propTypes = {
active: PropTypes.bool,
label: PropTypes.string,
// eslint-disable-next-line react/forbid-prop-types
payload: PropTypes.any,
};
class LongTermGoalGraph extends React.Component {
constructor(props) {
super(props);
this.state = { graphData: null };
}
componentDidMount() {
this.fetchData();
}
async fetchData() {
this.setState({ graphData: null });
const { goal } = this.props;
const granularity = Granularity.DAY;
// Standard Graph Calculations
const dateRange = { ...goal.dateRange, endDate: this.props.todayDate };
const where = { date: dateRange, logStructure: goal.logStructure };
const logEvents = await window.api.send('log-event-list', { where });
const graphData = getGraphData(
goal.logStructure,
logEvents,
goal.dateRange,
granularity,
);
// Replace lines.
const selectedLine = graphData.lines.find((line) => line.name === goal.keyLabel);
graphData.lines = [
{ name: goal.newLabel, dataKey: CURRENT_KEY },
{ name: 'Target', dataKey: TARGET_KEY, color: 'var(--link-color)' },
];
// Limit samples to today.
graphData.samples = graphData.samples.filter((sample) => {
const sampleDate = DateUtils.getDate(sample.label);
return compareAsc(sampleDate, this.props.todayDate) <= 0;
});
// Compute progress and prorated target.
const startDate = DateUtils.getDate(goal.dateRange.startDate);
const endDate = DateUtils.getDate(goal.dateRange.endDate);
const totalDays = differenceInDays(endDate, startDate) + 1;
let partialSum = 0;
graphData.samples.forEach((sample) => {
const sampleDate = DateUtils.getDate(sample.label);
let nextSampleDate = addDays(sampleDate, 1);
const getGroupLabel = Granularity[granularity].getLabel;
while (getGroupLabel(sampleDate) === getGroupLabel(nextSampleDate)) {
nextSampleDate = addDays(nextSampleDate, 1);
}
let dayCount = differenceInDays(nextSampleDate, startDate);
dayCount = Math.max(dayCount, 0);
dayCount = Math.min(dayCount, totalDays);
sample[TARGET_KEY] = (parseFloat(goal.target) * (dayCount / totalDays)).toFixed(2);
if (compareAsc(sampleDate, this.props.todayDate) <= 0) {
partialSum += sample[selectedLine.valuesKey]
.reduce((result, value) => (result + value), 0);
sample[CURRENT_KEY] = partialSum;
// Only the last color assigned is applicable.
graphData.lines[0].color = sample[CURRENT_KEY] >= sample[TARGET_KEY] ? 'var(--topic-color)' : 'var(--warning-color)';
}
});
// Additional Props
graphData.tooltip = CustomTooltip;
this.setState({ graphData });
}
render() {
const { graphData } = this.state;
return graphData ?
{children.shift()}
props.onChange({ ...item, logStructure })}
/>
props.onChange({ ...item, keyLabel })}
/>
props.onChange({ ...item, newLabel })}
/>
{children.pop()}
props.onChange({ ...item, dateRange })}
/>
props.onChange({ ...item, target })}
/>
);
}
function LongTermGoalsSettings(props) {
const items = props.value || [];
return (
);
}
LongTermGoalsSettings.propTypes = {
disabled: PropTypes.bool.isRequired,
// eslint-disable-next-line react/forbid-prop-types
value: PropTypes.any,
onChange: PropTypes.func.isRequired,
};
export default LongTermGoalsSettings;
================================================
FILE: src/plugins/kaustubh/long_term_goals/client.js
================================================
import React from 'react';
import { PluginClient, PluginDisplayLocation } from '../../../client/Common';
import LongTermGoalGraph from './LongTermGoalGraph';
import LongTermGoalsSettings from './LongTermGoalsSettings';
export default class extends PluginClient {
static getSettingsKey() {
return 'long_term_goals';
}
static getSettingsComponent(props) {
return
{children.shift()}
props.onChange({ ...item, label })}
/>
{children.pop()}
);
}
function MoreEventListsSettings(props) {
const items = props.value || [];
return (
);
}
MoreEventListsSettings.propTypes = {
disabled: PropTypes.bool.isRequired,
// eslint-disable-next-line react/forbid-prop-types
value: PropTypes.any,
onChange: PropTypes.func.isRequired,
};
export default MoreEventListsSettings;
================================================
FILE: src/plugins/kaustubh/more_event_lists/client.js
================================================
import React from 'react';
import { PluginClient } from '../../../client/Common';
import MoreEventListsSettings from './MoreEventListsSettings';
export default class extends PluginClient {
static getSettingsKey() {
return 'more_event_lists';
}
static getSettingsComponent(props) {
return
{this.props.label}
{formatToTimeZone(
new Date(),
'HH:mm:ss',
{ timeZone: this.props.timezone },
)}
);
}
}
TimeSection.propTypes = {
label: PropTypes.string.isRequired,
timezone: PropTypes.string.isRequired,
};
export default TimeSection;
================================================
FILE: src/plugins/kaustubh/time_sections/TimeSectionSettings.js
================================================
import PropTypes from 'prop-types';
import React from 'react';
import InputGroup from 'react-bootstrap/InputGroup';
import { listTimeZones } from 'timezone-support';
import {
LeftRight, Selector, SortableList, TextInput,
} from '../../../client/Common';
import { getNextID } from '../../../common/data_types';
const TIMEZONE_OPTIONS = [{ label: '(timezone)', value: '' }].concat(Selector.getStringListOptions(listTimeZones().sort()));
function renderRow(props) {
const { item } = props;
const children = props.children || [];
return (
{children.shift()}
props.onChange({ ...item, label })}
/>
props.onChange({ ...item, timezone })}
/>
{children.pop()}
);
}
function TimeSectionSettings(props) {
const items = props.value;
return (
);
}
TimeSectionSettings.propTypes = {
disabled: PropTypes.bool.isRequired,
// eslint-disable-next-line react/forbid-prop-types
value: PropTypes.any,
onChange: PropTypes.func.isRequired,
};
export default TimeSectionSettings;
================================================
FILE: src/plugins/kaustubh/time_sections/client.js
================================================
import React from 'react';
import { PluginClient } from '../../../client/Common';
import TimeSection from './TimeSection';
import TimeSectionSettings from './TimeSectionSettings';
export default class extends PluginClient {
static getSettingsKey() {
return 'timezones';
}
static getSettingsComponent(props) {
return
{`(${dayCount} days)`} : null}
));
}
render() {
const { logStructure } = this.state;
const suffix = logStructure ? `: ${logStructure.name}` : '';
return (
{this.renderContents()}
);
}
}
TopicRemindersSection.propTypes = {
todayLabel: PropTypes.string.isRequired,
logStructureId: PropTypes.number.isRequired,
thresholdDays: PropTypes.number.isRequired,
};
export default DateContext.Wrapper(TopicRemindersSection);
================================================
FILE: src/plugins/kaustubh/topic_reminder_sections/TopicRemindersSectionSettings.js
================================================
import PropTypes from 'prop-types';
import React from 'react';
import InputGroup from 'react-bootstrap/InputGroup';
import {
HelpIcon, LeftRight, SortableList, TextInput,
TooltipElement, TypeaheadOptions, TypeaheadSelector,
} from '../../../client/Common';
import { getNextID } from '../../../common/data_types';
function renderRow(props) {
const { item } = props;
const children = props.children || [];
return (
{children.shift()}
props.onChange({ ...item, logStructure })}
/>
props.onChange({ ...item, thresholdDays })}
/>
{children.pop()}
);
}
function TopicRemindersSettings(props) {
const helpText = (
'Add sections on the right sidebar for each structure selected here (eg - Conversation). '
+ 'For each structure, look at the details to get a list of topics (eg - people), and then '
+ 'check to see if there are any events with that structure and topic in the last X days. '
+ 'If not, show a reminder about that topic (eg - speak to someone every X days).'
);
const items = props.value;
return (
);
}
TopicRemindersSettings.propTypes = {
disabled: PropTypes.bool.isRequired,
// eslint-disable-next-line react/forbid-prop-types
value: PropTypes.any,
onChange: PropTypes.func.isRequired,
};
export default TopicRemindersSettings;
================================================
FILE: src/plugins/kaustubh/topic_reminder_sections/actions.js
================================================
/* eslint-disable func-names */
import { differenceInCalendarDays } from 'date-fns';
import DateUtils from '../../../common/DateUtils';
import RichTextUtils from '../../../common/RichTextUtils';
const ActionsRegistry = {};
ActionsRegistry['topic-reminders'] = async function ({
todayLabel,
logStructureId,
thresholdDays,
}) {
const logStructure = await this.invoke.call(
this,
'log-structure-load',
{ __id__: logStructureId },
);
const todayDate = DateUtils.getDate(todayLabel);
const logTopics = Object.values(
RichTextUtils.extractMentions(logStructure.details, 'log-topic'),
);
const logTopicAndDayCounts = await Promise.all(logTopics.map(async (logTopic) => {
// TODO: Fetch only the latest item from the database.
const logEvents = await this.invoke.call(
this,
'log-event-list',
{
where: { logStructure, logTopics: [logTopic], isComplete: true },
limit: 1,
},
);
const logEvent = logEvents.pop();
let dayCount = null;
let needsReminder = true;
if (logEvent) {
const lastDate = DateUtils.getDate(logEvent.date);
dayCount = differenceInCalendarDays(todayDate, lastDate);
needsReminder = dayCount > thresholdDays;
}
return needsReminder ? { logTopic, dayCount } : null;
}));
return { logStructure, logTopicAndDayCounts: logTopicAndDayCounts.filter((item) => item) };
};
export default ActionsRegistry;
================================================
FILE: src/plugins/kaustubh/topic_reminder_sections/client.js
================================================
import React from 'react';
import { PluginClient } from '../../../client/Common';
import TopicRemindersSection from './TopicRemindersSection';
import TopicRemindersSectionSettings from './TopicRemindersSectionSettings';
export default class extends PluginClient {
static getSettingsKey() {
return 'reminder_sections';
}
static getSettingsComponent(props) {
return
{item}
));
}
render() {
const { logTopic } = this.state;
return (
{this.renderContent()}
);
}
}
TopicSection.propTypes = {
logTopicId: PropTypes.number.isRequired,
};
export default TopicSection;
================================================
FILE: src/plugins/kaustubh/topic_sections/TopicSectionSettings.js
================================================
import PropTypes from 'prop-types';
import React from 'react';
import InputGroup from 'react-bootstrap/InputGroup';
import {
HelpIcon, LeftRight, SortableList, TooltipElement, TypeaheadOptions, TypeaheadSelector,
} from '../../../client/Common';
import { getNextID } from '../../../common/data_types';
function renderRow(props) {
const { item } = props;
const children = props.children || [];
return (
{children.shift()}
props.onChange({ ...item, logTopic })}
/>
{children.pop()}
);
}
function TopicSectionSettings(props) {
const helpText = (
'Add sections on the right sidebar for each topic selected here, '
+ 'which display the bullet-points in the details of those topics.'
);
const items = props.value;
return (
);
}
TopicSectionSettings.propTypes = {
disabled: PropTypes.bool.isRequired,
// eslint-disable-next-line react/forbid-prop-types
value: PropTypes.any,
onChange: PropTypes.func.isRequired,
};
export default TopicSectionSettings;
================================================
FILE: src/plugins/kaustubh/topic_sections/client.js
================================================
import React from 'react';
import { PluginClient } from '../../../client/Common';
import TopicSection from './TopicSection';
import TopicSectionSettings from './TopicSectionSettings';
export default class extends PluginClient {
static getSettingsKey() {
return 'topic_sections';
}
static getSettingsComponent(props) {
return