Skip to content

Feature/#144 add download button#145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ortiztena wants to merge 6 commits into
base:master
Choose a base branch
from
Open

Feature/#144 add download button #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
80793b0
first check, added button functionality & date
ortiztena Feb 22, 2022
73f4fb4
added download button
ortiztena Feb 23, 2022
2f70bb8
styled downButton
ortiztena Feb 24, 2022
5343f36
moved functionality to common. added button to student session
ortiztena Mar 2, 2022
91c5481
prettier formatted, renamed functions and buttons.
ortiztena Mar 7, 2022
c808ae6
prettier formatted
ortiztena Mar 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions front/src/common/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
export * from './hooks';
export * from './global-window';
export * from './log-download'
17 changes: 17 additions & 0 deletions front/src/common/log-download.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
export const handleDownloadSessionContent = (sessionContent: string): void =>
generateFile(sessionContent);

const generateFile = (txt: string): void => {
const file: Blob = new Blob([txt], {
type: 'text/plain;charset=utf-8',
});
const element: HTMLAnchorElement = document.createElement('a');
element.href = URL.createObjectURL(file);
element.download = generateCodePasterFileName();
element.click();
};

@brauliodiezbrauliodiezMar 7, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not using prettier formatting, @manudous will guide you setting up this

https://www.lemoncode.tv/curso/prettier


const generateCodePasterFileName = (): string => {
const dateToday = new Date(Date.now()).toLocaleDateString();
return `Codepaster_Session_${dateToday}.txt`;
};
2 changes: 2 additions & 0 deletions front/src/core/theme/theme.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,8 @@ export const theme: Theme = merge(defaultTheme, {
successDark: '#0f834c',
alertLight: 'rgb(255, 87, 51)',
alertDark: 'rgb(207, 70, 41)',
blueLight: '#2196f3',
blueDark: '#1565c0',
greyLight: '#eee',
greyMedium: '#ccc',
},
Expand Down
2 changes: 2 additions & 0 deletions front/src/core/theme/theme.vm.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,8 @@ interface Palette extends DefaultPalette {
successDark: string;
alertLight: string;
alertDark: string;
blueLight: string;
blueDark: string;
greyLight: string;
greyMedium: string;
};
Expand Down
51 changes: 38 additions & 13 deletions front/src/pods/student/student.component.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,6 +8,10 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
import * as innerClasses from './student.styles';
import { useAutoScroll } from 'common/hooks/auto-scroll.hook';

import { handleDownloadSessionContent } from 'common';
import GetAppIcon from '@material-ui/icons/GetApp';
import Button from '@material-ui/core/Button';

interface Props {
room: string;
log: string;
Expand All@@ -16,17 +20,25 @@ interface Props {
export const StudentComponent: React.FC<Props> = props => {
const { room, log } = props;

const {isAutoScrollEnabled, setIsAutoScrollEnabled, textAreaRef, doAutoScroll} = useAutoScroll();
const {
isAutoScrollEnabled,
setIsAutoScrollEnabled,
textAreaRef,
doAutoScroll,
} = useAutoScroll();

React.useEffect(() => {
doAutoScroll();
}, [log]);

return (

<>
<main className={innerClasses.root}>
<Typography className={innerClasses.sessionName} variant="body1" role="heading">
<Typography
className={innerClasses.sessionName}
variant="body1"
role="heading"
>
Session name: {room ?? ''}
</Typography>
<label className={innerClasses.label} htmlFor="session">
Expand All@@ -40,16 +52,29 @@ export const StudentComponent: React.FC<Props> = props => {
className={innerClasses.textarea}
value={log ?? ''}
/>
<FormControlLabel
label="Disable AutoScroll"
control={
<Checkbox
checked={isAutoScrollEnabled}
onChange={e => setIsAutoScrollEnabled(e.target.checked)}
color="primary"
/>
}
/>
<div className={innerClasses.buttonScroll}>
<Button
variant="contained"
color="primary"
disableElevation
className={innerClasses.downloadButton}
onClick={() => handleDownloadSessionContent(log)}
>
<GetAppIcon className={innerClasses.downloadIcon} />
Download
</Button>
<FormControlLabel
label="Enable AutoScroll"
className="scroll"
control={
<Checkbox
checked={isAutoScrollEnabled}
onChange={e => setIsAutoScrollEnabled(e.target.checked)}
color="primary"
/>
}
/>
</div>
</main>
</>
);
Expand Down
42 changes: 42 additions & 0 deletions front/src/pods/student/student.styles.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -53,3 +53,45 @@ export const textarea = css`
outline: none;
}
`;

export const downloadButton = css`
display: flex;
align-items: left;
width: 100%;
padding: ${spacing(1.25)} ${spacing(1.875)};
flex: 1;
font-size: 1.188rem;
font-weight: 400;
text-transform: capitalize;
border-radius: 0;
color: ${color.blueDark};
background-color: white;
border: 2px solid ${color.blueDark};
transition: all 0.2s;
&:hover,
&:active {
color: white;
background-color: ${color.blueDark};
border: 2px solid ${color.blueDark};
outline: none;
}
@media (min-width: ${breakpoints.values.xs}px) {
max-width: ${spacing(20)};
}

@brauliodiezbrauliodiezMar 7, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be simplified since we are using material ui?

@ortiztenaortiztenaMar 7, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added spacing method instead of "50%"

`;

export const downloadIcon = css`
margin-right: ${spacing(1.25)};
font-size: 1.25rem;
display: none;
@media (min-width: ${breakpoints.values.xs}px) {
display: initial;
}
`;

export const buttonScroll = css`
@media (min-width: ${breakpoints.values.xs}px) {
display: flex;
justify-content: space-between;
}
`;
22 changes: 19 additions & 3 deletions front/src/pods/trainer/components/session.component.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,9 @@ import { cx } from 'emotion';
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded';
import UndoIcon from '@material-ui/icons/Undo';
import GetAppIcon from '@material-ui/icons/GetApp';
import Button from '@material-ui/core/Button';
import { handleDownloadSessionContent } from 'common';

import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
Expand DownExpand Up@@ -34,7 +36,12 @@ const getFullContent = (currenSessionContent: string) => {
export const SessionComponent: React.FC<Props> = props => {
const { log, handleSendFullContentLog, className } = props;

const {isAutoScrollEnabled, setIsAutoScrollEnabled, textAreaRef, doAutoScroll} = useAutoScroll();
const {
isAutoScrollEnabled,
setIsAutoScrollEnabled,
textAreaRef,
doAutoScroll,
} = useAutoScroll();

React.useEffect(() => {
handleSetSessionContent(log);
Expand All@@ -46,7 +53,16 @@ export const SessionComponent: React.FC<Props> = props => {
<label className={innerClasses.label} htmlFor="session">
Session
</label>

<Button
variant="contained"
color="primary"
disableElevation
className={innerClasses.downloadButton}
onClick={() => handleDownloadSessionContent(log)}
>
<GetAppIcon className={innerClasses.downloadIcon} />
Download
</Button>
<TextareaAutosize
ref={textAreaRef}
id="session"
Expand All@@ -55,7 +71,7 @@ export const SessionComponent: React.FC<Props> = props => {
className={innerClasses.textarea}
/>
<FormControlLabel
label="Disable AutoScroll"
label="Enable AutoScroll"
control={
<Checkbox
checked={isAutoScrollEnabled}
Expand Down
41 changes: 41 additions & 0 deletions front/src/pods/trainer/components/session.styles.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -118,3 +118,44 @@ export const undoIcon = css`
display: initial;
}
`;

export const downloadButton = css`
display: flex;
align-items: center;
padding: ${spacing(1.25)} ${spacing(1.875)};
flex: 1;
font-size: 1.188rem;
font-weight: 400;
text-transform: capitalize;
border-radius: 0;
color: ${color.blueDark};
background-color: white;
border: 2px solid ${color.blueDark};
transition: all 0.2s;
&:hover,
&:active {
color: white;
background-color: ${color.blueDark};
border: 2px solid ${color.blueDark};
outline: none;
}
@media (max-width: ${breakpoints.values.xs}px) {
color: white;
background-color: ${color.blueDark};
border: none;
&:hover,
&:active {
background-color: ${color.blueDark};
border: none;
}
}
`;

export const downloadIcon = css`
margin-right: ${spacing(1.25)};
font-size: 1.25rem;
display: none;
@media (min-width: ${breakpoints.values.xs}px) {
display: initial;
}
`;