116 lines
4.9 KiB
TypeScript
116 lines
4.9 KiB
TypeScript
import React from 'react';
|
|
import { ColorProp, FlexWidget, IconWidget, ListWidget, SvgWidget, TextWidget, } from 'react-native-android-widget';
|
|
import { getClockProgressSVG } from '../../components/clockProgress';
|
|
import { Category } from '../../models/category';
|
|
import { Task } from '../../models/task';
|
|
import { GetTaskColor } from '../../utils/colors';
|
|
|
|
export function HelloWidget({ tasks, categories }: { tasks: Task[], categories?: Category[] }) {
|
|
|
|
const demoTasks: Task[] = [
|
|
new Task('Task 1', 3, 1, new Date().getTime()),
|
|
new Task('Task 2', 5, 1, new Date().getTime()),
|
|
new Task('Task 2', 5, 1, new Date().getTime()),
|
|
new Task('Task 2', 5, 1, new Date().getTime()),
|
|
new Task('Task 2', 5, 1, new Date().getTime())
|
|
];
|
|
|
|
return (
|
|
<FlexWidget
|
|
style={{
|
|
height: 'match_parent',
|
|
width: 'match_parent',
|
|
backgroundColor: '#121212',
|
|
borderRadius: 16,
|
|
padding: 24
|
|
}}
|
|
>
|
|
<FlexWidget style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 16,
|
|
width: 'match_parent',
|
|
}}>
|
|
<TextWidget
|
|
text="Hello, Tasks!"
|
|
style={{
|
|
color: '#ffffff',
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
}}
|
|
/>
|
|
<IconWidget font="material" icon="refresh" size={32} style={{
|
|
color: '#ffffff',
|
|
}} clickAction='REFRESH' />
|
|
</FlexWidget>
|
|
<ListWidget
|
|
style={{
|
|
width: 'match_parent',
|
|
height: 'match_parent',
|
|
}}
|
|
>
|
|
{(tasks ?? demoTasks).map((task, index) => (
|
|
<FlexWidget
|
|
key={Date.now() + "-" + Math.random() + "-" + index + "-" + task.id}
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
width: 'match_parent',
|
|
paddingVertical: 8
|
|
}}>
|
|
<FlexWidget
|
|
style={{
|
|
width: 'match_parent',
|
|
borderLeftWidth: 20,
|
|
borderLeftColor: GetTaskColor(task) as ColorProp,
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 16,
|
|
paddingHorizontal: 16,
|
|
borderRadius: 8,
|
|
backgroundColor: '#333333',
|
|
}}
|
|
>
|
|
<FlexWidget
|
|
style={{
|
|
flexDirection: 'column'
|
|
}}>
|
|
<TextWidget
|
|
text={task.title}
|
|
style={{
|
|
color: '#ffffff',
|
|
fontSize: 20,
|
|
fontWeight: 'bold',
|
|
}}
|
|
/>
|
|
<TextWidget
|
|
text={categories?.find(c => c.id === task.category)?.title || 'Uncategorized'}
|
|
style={{
|
|
color: '#ffffff',
|
|
fontSize: 16,
|
|
}}
|
|
/>
|
|
</FlexWidget>
|
|
<SvgWidget svg={getClockProgressSVG(
|
|
((task.daysToRedo! - (((Date.now() - task.lastDone!) / (24 * 3600 * 1000)))) / task.daysToRedo!) * 360, // Example calculation for degree
|
|
100,
|
|
100,
|
|
GetTaskColor(task) as ColorProp
|
|
)} clickAction='UPDATE_TASK' clickActionData={{
|
|
id: task.id
|
|
}} />
|
|
</FlexWidget>
|
|
</FlexWidget>
|
|
))}
|
|
{(tasks && tasks.length === 0) &&
|
|
<TextWidget text='No tasks created.' style={{
|
|
color: '#ffffff'
|
|
}}>
|
|
</TextWidget>}
|
|
</ListWidget>
|
|
</FlexWidget>
|
|
);
|
|
} |