Feature/#144 add download button

front/src/common/index.ts

@@ -1,2 +1,3 @@
 export * from './hooks';
 export * from './global-window';
+export * from './log-download'

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();
+};

front/src/core/theme/theme.ts

@@ -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',
     },

front/src/core/theme/theme.vm.ts

@@ -10,6 +10,8 @@ interface Palette extends DefaultPalette {
     successDark: string;
     alertLight: string;
     alertDark: string;
+    blueLight: string;
+    blueDark: string;
     greyLight: string;
     greyMedium: string;
   };

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> = 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">
@@ -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.downScroll}>
+          <Button
+            variant="contained"
+            color="primary"
+            disableElevation
+            className={innerClasses.downButton}
+            onClick={() => handleDownSessionContent(log)}
+          >
+            <GetAppIcon className={innerClasses.downIcon} />
+            Download
+          </Button>
+          <FormControlLabel
+            label="Enable AutoScroll"
+            className="scroll"
+            control={
+              <Checkbox
+                checked={isAutoScrollEnabled}
+                onChange={e => setIsAutoScrollEnabled(e.target.checked)}
+                color="primary"
+              />
+            }
+          />
+        </div>
       </main>
     </>
   );

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;
+  }
+`

front/src/pods/trainer/components/session.component.tsx

@@ -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 { handleDownSessionContent } from 'common';
 
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
@@ -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);
@@ -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.downButton}
+        onClick={() => handleDownSessionContent(log)}
+      >
+        <GetAppIcon className={innerClasses.downIcon} />
+        Download
+      </Button>
       <TextareaAutosize
         ref={textAreaRef}
         id="session"
@@ -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}

front/src/pods/trainer/components/session.styles.ts

@@ -118,3 +118,45 @@ export const undoIcon = css`
     display: initial;
   }
 `;
+
+export const downButton = 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 downIcon = css`
+  margin-right: ${spacing(1.25)};
+  font-size: 1.25rem;
+  display: none;
+  @media (min-width: ${breakpoints.values.xs}px) {
+    display: initial;
+  }
+`;