From 80793b0d2cf0b3b9f426e128187236e792278a0d Mon Sep 17 00:00:00 2001 From: ortiztena Date: Tue, 22 Feb 2022 11:56:28 +0100 Subject: [PATCH 1/6] first check, added button functionality & date --- .../trainer/components/session.component.tsx | 28 +++++++++++++++++-- .../pods/trainer/components/session.styles.ts | 9 ++++++ 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/front/src/pods/trainer/components/session.component.tsx b/front/src/pods/trainer/components/session.component.tsx index c5fbf4b..d240049 100644 --- a/front/src/pods/trainer/components/session.component.tsx +++ b/front/src/pods/trainer/components/session.component.tsx @@ -24,6 +24,17 @@ const handleSetSessionContent = (sessionContent: string) => { sessionTextArea ? (sessionTextArea.value = sessionContent) : undefined; }; +const handleDownSessionContent = (sessionContent: string) => { + const element = document.createElement('a'); + const file = new Blob([sessionContent], { + type: 'text/plain;charset=utf-8', + }); + const dateNow = new Date(Date.now()).toString().slice(4, 21); + element.href = URL.createObjectURL(file); + element.download = `Codepaster_Session_${dateNow}.txt`; + element.click(); +}; + const getFullContent = (currenSessionContent: string) => { const sessionTextArea: HTMLInputElement = getTextArea('session'); return sessionTextArea && sessionTextArea.value != currenSessionContent @@ -34,7 +45,12 @@ const getFullContent = (currenSessionContent: string) => { export const SessionComponent: React.FC = props => { const { log, handleSendFullContentLog, className } = props; - const {isAutoScrollEnabled, setIsAutoScrollEnabled, textAreaRef, doAutoScroll} = useAutoScroll(); + const { + isAutoScrollEnabled, + setIsAutoScrollEnabled, + textAreaRef, + doAutoScroll, + } = useAutoScroll(); React.useEffect(() => { handleSetSessionContent(log); @@ -46,7 +62,15 @@ export const SessionComponent: React.FC = props => { - + Date: Wed, 23 Feb 2022 09:59:53 +0100 Subject: [PATCH 2/6] added download button --- front/src/pods/trainer/components/session.component.tsx | 4 ++-- front/src/pods/trainer/components/session.styles.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/front/src/pods/trainer/components/session.component.tsx b/front/src/pods/trainer/components/session.component.tsx index d240049..be6f34a 100644 --- a/front/src/pods/trainer/components/session.component.tsx +++ b/front/src/pods/trainer/components/session.component.tsx @@ -29,7 +29,7 @@ const handleDownSessionContent = (sessionContent: string) => { const file = new Blob([sessionContent], { type: 'text/plain;charset=utf-8', }); - const dateNow = new Date(Date.now()).toString().slice(4, 21); + const dateNow = new Date(Date.now()).toLocaleDateString(); element.href = URL.createObjectURL(file); element.download = `Codepaster_Session_${dateNow}.txt`; element.click(); @@ -64,7 +64,7 @@ export const SessionComponent: React.FC = props => { = props => { className={innerClasses.textarea} /> Date: Wed, 2 Mar 2022 12:01:05 +0100 Subject: [PATCH 4/6] moved functionality to common. added button to student session --- front/src/common/index.ts | 1 + front/src/common/log-download.ts | 10 ++++ front/src/pods/student/student.component.tsx | 51 ++++++++++++++----- front/src/pods/student/student.styles.ts | 47 +++++++++++++++++ .../trainer/components/session.component.tsx | 12 +---- 5 files changed, 97 insertions(+), 24 deletions(-) create mode 100644 front/src/common/log-download.ts diff --git a/front/src/common/index.ts b/front/src/common/index.ts index 45bc727..78b9bdc 100644 --- a/front/src/common/index.ts +++ b/front/src/common/index.ts @@ -1,2 +1,3 @@ export * from './hooks'; export * from './global-window'; +export * from './log-download' diff --git a/front/src/common/log-download.ts b/front/src/common/log-download.ts new file mode 100644 index 0000000..6829177 --- /dev/null +++ b/front/src/common/log-download.ts @@ -0,0 +1,10 @@ +export const handleDownSessionContent = (sessionContent: string) => { + const element = document.createElement('a'); + const file = new Blob([sessionContent], { + type: 'text/plain;charset=utf-8', + }); + const dateNow = new Date(Date.now()).toLocaleDateString(); + element.href = URL.createObjectURL(file); + element.download = `Codepaster_Session_${dateNow}.txt`; + element.click(); +}; diff --git a/front/src/pods/student/student.component.tsx b/front/src/pods/student/student.component.tsx index 9736b0e..8540dcd 100644 --- a/front/src/pods/student/student.component.tsx +++ b/front/src/pods/student/student.component.tsx @@ -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 { handleDownSessionContent } from 'common'; +import GetAppIcon from '@material-ui/icons/GetApp'; +import Button from '@material-ui/core/Button'; + interface Props { room: string; log: string; @@ -16,17 +20,25 @@ interface Props { export const StudentComponent: React.FC = props => { const { room, log } = props; - const {isAutoScrollEnabled, setIsAutoScrollEnabled, textAreaRef, doAutoScroll} = useAutoScroll(); + const { + isAutoScrollEnabled, + setIsAutoScrollEnabled, + textAreaRef, + doAutoScroll, + } = useAutoScroll(); React.useEffect(() => { doAutoScroll(); }, [log]); return ( - <>
- + Session name: {room ?? ''}
); diff --git a/front/src/pods/student/student.styles.ts b/front/src/pods/student/student.styles.ts index 3ef5c61..73bac47 100644 --- a/front/src/pods/student/student.styles.ts +++ b/front/src/pods/student/student.styles.ts @@ -11,6 +11,7 @@ export const root = css` grid-column-gap: 1rem; padding: 1rem; + @media (min-width: ${breakpoints.values.md}px) { padding: 2rem; grid-template-columns: 1fr 6fr 1fr; @@ -35,11 +36,13 @@ export const sessionName = css` `; export const label = css` + display: block; font-family: ${typography.fontFamily}; font-size: 1.125rem; `; + export const textarea = css` box-sizing: border-box; padding: ${spacing(2)}; @@ -53,3 +56,47 @@ export const textarea = css` outline: none; } `; + +export const downButton = 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:50%; + + } +`; + +export const downIcon = css` + margin-right: ${spacing(1.25)}; + font-size: 1.25rem; + display: none; + @media (min-width: ${breakpoints.values.xs}px) { + display: initial; + } +`; + +export const downScroll = css` + @media (min-width: ${breakpoints.values.xs}px) { + display: flex; + justify-content: space-between; + } +` \ No newline at end of file diff --git a/front/src/pods/trainer/components/session.component.tsx b/front/src/pods/trainer/components/session.component.tsx index 89a9191..2dd69f4 100644 --- a/front/src/pods/trainer/components/session.component.tsx +++ b/front/src/pods/trainer/components/session.component.tsx @@ -5,6 +5,7 @@ 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 { handleDownSessionContent } from 'common'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Checkbox from '@material-ui/core/Checkbox'; @@ -25,17 +26,6 @@ const handleSetSessionContent = (sessionContent: string) => { sessionTextArea ? (sessionTextArea.value = sessionContent) : undefined; }; -const handleDownSessionContent = (sessionContent: string) => { - const element = document.createElement('a'); - const file = new Blob([sessionContent], { - type: 'text/plain;charset=utf-8', - }); - const dateNow = new Date(Date.now()).toLocaleDateString(); - element.href = URL.createObjectURL(file); - element.download = `Codepaster_Session_${dateNow}.txt`; - element.click(); -}; - const getFullContent = (currenSessionContent: string) => { const sessionTextArea: HTMLInputElement = getTextArea('session'); return sessionTextArea && sessionTextArea.value != currenSessionContent From 91c5481437b86570263bd2214e8baebc793784de Mon Sep 17 00:00:00 2001 From: ortiztena Date: Mon, 7 Mar 2022 15:03:53 +0100 Subject: [PATCH 5/6] prettier formatted, renamed functions and buttons. --- front/src/common/log-download.ts | 19 +++++++++++++------ front/src/pods/student/student.component.tsx | 10 +++++----- front/src/pods/student/student.styles.ts | 13 ++++--------- .../trainer/components/session.component.tsx | 8 ++++---- .../pods/trainer/components/session.styles.ts | 4 ++-- 5 files changed, 28 insertions(+), 26 deletions(-) diff --git a/front/src/common/log-download.ts b/front/src/common/log-download.ts index 6829177..4550c3a 100644 --- a/front/src/common/log-download.ts +++ b/front/src/common/log-download.ts @@ -1,10 +1,17 @@ -export const handleDownSessionContent = (sessionContent: string) => { - const element = document.createElement('a'); - const file = new Blob([sessionContent], { + +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 dateNow = new Date(Date.now()).toLocaleDateString(); + const element: HTMLAnchorElement = document.createElement('a'); element.href = URL.createObjectURL(file); - element.download = `Codepaster_Session_${dateNow}.txt`; + element.download = generateCodePasterFileName() element.click(); -}; +} + +const generateCodePasterFileName = (): string => { + const dateToday = new Date(Date.now()).toLocaleDateString(); + return `Codepaster_Session_${dateToday}.txt`; +} \ No newline at end of file diff --git a/front/src/pods/student/student.component.tsx b/front/src/pods/student/student.component.tsx index 8540dcd..d3e50d2 100644 --- a/front/src/pods/student/student.component.tsx +++ b/front/src/pods/student/student.component.tsx @@ -8,7 +8,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; import * as innerClasses from './student.styles'; import { useAutoScroll } from 'common/hooks/auto-scroll.hook'; -import { handleDownSessionContent } from 'common'; +import { handleDownloadSessionContent } from 'common'; import GetAppIcon from '@material-ui/icons/GetApp'; import Button from '@material-ui/core/Button'; @@ -52,15 +52,15 @@ export const StudentComponent: React.FC = props => { className={innerClasses.textarea} value={log ?? ''} /> -
+
= props => { variant="contained" color="primary" disableElevation - className={innerClasses.downButton} - onClick={() => handleDownSessionContent(log)} + className={innerClasses.downloadButton} + onClick={() => handleDownloadSessionContent(log)} > - + Download Date: Wed, 16 Mar 2022 10:57:07 +0100 Subject: [PATCH 6/6] prettier formatted --- front/src/common/log-download.ts | 10 +++++----- front/src/pods/student/student.styles.ts | 4 ++-- front/src/pods/trainer/components/session.styles.ts | 3 +-- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/front/src/common/log-download.ts b/front/src/common/log-download.ts index 4550c3a..751cb96 100644 --- a/front/src/common/log-download.ts +++ b/front/src/common/log-download.ts @@ -1,5 +1,5 @@ - -export const handleDownloadSessionContent = (sessionContent: string): void => generateFile(sessionContent); +export const handleDownloadSessionContent = (sessionContent: string): void => + generateFile(sessionContent); const generateFile = (txt: string): void => { const file: Blob = new Blob([txt], { @@ -7,11 +7,11 @@ const generateFile = (txt: string): void => { }); const element: HTMLAnchorElement = document.createElement('a'); element.href = URL.createObjectURL(file); - element.download = generateCodePasterFileName() + element.download = generateCodePasterFileName(); element.click(); -} +}; const generateCodePasterFileName = (): string => { const dateToday = new Date(Date.now()).toLocaleDateString(); return `Codepaster_Session_${dateToday}.txt`; -} \ No newline at end of file +}; diff --git a/front/src/pods/student/student.styles.ts b/front/src/pods/student/student.styles.ts index 89a05db..4da9536 100644 --- a/front/src/pods/student/student.styles.ts +++ b/front/src/pods/student/student.styles.ts @@ -76,7 +76,7 @@ export const downloadButton = css` outline: none; } @media (min-width: ${breakpoints.values.xs}px) { - max-width: ${spacing(20)} + max-width: ${spacing(20)}; } `; @@ -94,4 +94,4 @@ export const buttonScroll = css` display: flex; justify-content: space-between; } -` \ No newline at end of file +`; diff --git a/front/src/pods/trainer/components/session.styles.ts b/front/src/pods/trainer/components/session.styles.ts index 57e80c5..9d1b42a 100644 --- a/front/src/pods/trainer/components/session.styles.ts +++ b/front/src/pods/trainer/components/session.styles.ts @@ -120,7 +120,6 @@ export const undoIcon = css` `; export const downloadButton = css` - display: flex; align-items: center; padding: ${spacing(1.25)} ${spacing(1.875)}; @@ -159,4 +158,4 @@ export const downloadIcon = css` @media (min-width: ${breakpoints.values.xs}px) { display: initial; } -`; \ No newline at end of file +`;