Merge pull request #45 from beyenilmez/development

Development
beyenilmez · Jun 22, 2024 · bc615d1 · bc615d1
2 parents a2925df + 6dc6ed8
commit bc615d1
Show file tree

Hide file tree

Showing 21 changed files with 237 additions and 213 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,8 @@
 
 ## Features
 
-- Serverless auto GPA calculation
+- Auto GPA calculation
+- Credit and ECTS calculations
 - Import/Export your grades from/to files
 - Export/Share your grades with a URL
 - Dark and light themes
@@ -51,6 +52,7 @@
 - [react-sortablejs](https://github.com/SortableJS/react-sortablejs)
 - [base64-compressor](https://github.com/eliot-akira/base64-compressor)
 - [tailwind-scrollbar](https://github.com/adoxography/tailwind-scrollbar)
+- [webpack-license-plugin](https://github.com/codepunkt/webpack-license-plugin)
 
 ## License
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gradeful",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A grade tracker to monitor your progress throughout your university education.",
   "private": true,
   "homepage": ".",

diff --git a/public/index.html b/public/index.html
@@ -4,40 +4,17 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#3d4a5e" />
     <meta
       name="description"
       content="Grade tracker"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Gradeful</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Gradeful",
+  "name": "Gradeful",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/components/Course.jsx b/src/components/Course.jsx
@@ -18,6 +18,7 @@ function CourseExport(props) {
 
     const [nameValue, setNameValue] = useState(props.name);
     const [creditValue, setCreditValue] = useState(props.credit);
+    const [ectsValue, setEctsValue] = useState(props.ects);
     const [scoreValue, setScoreValue] = useState(props.score);
     const [gradeValue, setGradeValue] = useState(props.grade);
     const [autoCalcScoreValue, setAutoCalcScoreValue] = useState(props.autoCalcScore);
@@ -141,6 +142,7 @@ function CourseExport(props) {
 
             course.name = nameValue;
             course.credit = creditValue;
+            course.ects = ectsValue;
             course.autoCalcGrade = autoCalcGradeValue;
             course.autoCalcScore = autoCalcScoreValue;
             course.includeCalc = includeCalcValue;
@@ -150,26 +152,27 @@ function CourseExport(props) {
             setEditJSON({ ...editJSON, [idRef.current]: course });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nameValue, creditValue, autoCalcGradeValue, autoCalcScoreValue, includeCalcValue, scoreValue, gradeValue]);
+    }, [nameValue, creditValue, ectsValue, autoCalcGradeValue, autoCalcScoreValue, includeCalcValue, scoreValue, gradeValue]);
 
     // Update editable values
     useEffect(() => {
         setNameValue(props.name);
         setCreditValue(props.credit);
+        setEctsValue(props.ects);
         setAutoCalcGradeValue(props.autoCalcGrade);
         setAutoCalcScoreValue(props.autoCalcScore);
         setIncludeCalcValue(props.includeCalc);
         setScoreValue(props.score);
         setGradeValue(props.grade);
-    }, [editing, props.name, props.credit, props.autoCalcGrade, props.autoCalcScore, props.includeCalc, props.score, props.grade]);
+    }, [editing, props.name, props.credit, props.ects, props.autoCalcGrade, props.autoCalcScore, props.includeCalc, props.score, props.grade]);
 
     // <--- Effects end --->
 
     // Render
     return (
-        <div className="draggable font-light dark:bg-slate-700 bg-slate-300 shadow border-t dark:border-slate-550 border-slate-350">
+        <div className="border-slate-350 dark:border-slate-550 bg-slate-300 dark:bg-slate-700 shadow border-t font-light draggable">
 
-            <div className="flex items-center justify-between py-1 px-2 hover:cursor-pointer" onClick={toggleExpanded}>
+            <div className="flex justify-between items-center px-2 py-1 hover:cursor-pointer" onClick={toggleExpanded}>
                 <div className='flex items-center'>
                     <Menu size="1.5rem" className={`shrink-0 handle mr-1 transform transition-transform duration-300 ${editJSON[termIdRef.current] === undefined ? 'hidden' : ''}`} />
                     <ChevronRight size="1.5rem" className={`shrink-0 mr-1 transform transition-transform duration-300 ${expandedValue || editData !== undefined ? 'rotate-90' : ''} ${editJSON[termIdRef.current] !== undefined ? 'hidden' : ''}`} />
@@ -192,14 +195,26 @@ function CourseExport(props) {
                     <textarea rows="1" inputMode="decimal"
                         className={`
                             ${editData !== undefined ? 'block' : 'hidden'}
-                            whitespace-nowrap
+                            whitespace-nowrap mr-1
                             no-scrollbar resize-none min-w-[4rem] max-w-[4rem] w-full h-7 text-center outline-none rounded-lg border dark:text-slate-300 text-slate-700 dark:border-slate-400 border-slate-500 dark:bg-slate-650 bg-slate-350 dark:placeholder-slate-500 placeholder-slate-450
                         `}
                         placeholder="Credit"
                         value={creditValue}
                         onChange={(e) => setCreditValue(e.target.value.replace(/[^0-9.]/g, ''))}
                         maxLength={4}
                     ></textarea>
+
+                    <textarea rows="1" inputMode="decimal"
+                        className={`
+                            ${editData !== undefined ? 'block' : 'hidden'}
+                            whitespace-nowrap
+                            no-scrollbar resize-none min-w-[4rem] max-w-[4rem] w-full h-7 text-center outline-none rounded-lg border dark:text-slate-300 text-slate-700 dark:border-slate-400 border-slate-500 dark:bg-slate-650 bg-slate-350 dark:placeholder-slate-500 placeholder-slate-450
+                        `}
+                        placeholder="ECTS"
+                        value={ectsValue}
+                        onChange={(e) => setEctsValue(e.target.value.replace(/[^0-9.]/g, ''))}
+                        maxLength={4}
+                    ></textarea>
                 </div>
 
                 <div className='flex items-center'>
@@ -319,7 +334,7 @@ function CourseExport(props) {
             </div>
 
             <div
-                className="overflow-hidden transition-all"
+                className="transition-all overflow-hidden"
                 style={{ maxHeight: contentHeight, transitionDuration: '150ms' }}
             >
                 <div ref={childrenRef}>
@@ -354,6 +369,7 @@ CourseExport.propTypes = {
     termId: PropTypes.string,
     name: PropTypes.string,
     credit: PropTypes.string,
+    ects: PropTypes.string,
     score: PropTypes.string,
     grade: PropTypes.string,
     autoCalcScore: PropTypes.bool,

diff --git a/src/components/ExportToFileWindow.jsx b/src/components/ExportToFileWindow.jsx
@@ -28,19 +28,15 @@ function ExportToFileWindow(props) {
             title={'Export to file'}
             showWindow={props.showExportFilePopup} setShowWindow={props.setShowExportFilePopup}
         >
-            <div className='p-2 space-y-1'>
-                <div className='text-sm pl-1'>
+            <div className='space-y-1 p-2'>
+                <div className='pl-1 text-sm'>
                     File name
                 </div>
                 <div className='flex flex-col space-y-3'>
                     <div className='flex space-x-2'>
                         <textarea
                             rows="1"
-                            className="whitespace-nowrap no-scrollbar resize-none w-full h-7 pl-3 pt-[0.15rem] text-sm outline-none rounded-lg border
-                    bg-transparent
-                    dark:text-slate-300 text-slate-700
-                    dark:border-slate-400 border-slate-500
-                    dark:placeholder-slate-500 placeholder-slate-450"
+                            className="border-slate-500 dark:border-slate-400 bg-transparent pt-[0.15rem] pl-3 border rounded-lg w-full h-7 text-slate-700 text-sm dark:text-slate-300 whitespace-nowrap no-scrollbar outline-none placeholder-slate-450 resize-none dark:placeholder-slate-500"
                             placeholder="File name"
                             value={fileName}
                             onChange={(e) => setFileName(e.target.value)}
@@ -53,10 +49,7 @@ function ExportToFileWindow(props) {
                         <Button
                             onClick={downloadFile}
                             padding='px-4 py-2'
-                            className='dark:bg-emerald-500 bg-emerald-300
-                        disabled:opacity-50
-                        dark:disabled:hover:bg-emerald-500 disabled:hover:bg-emerald-300
-                    '
+                            className='bg-emerald-300 dark:disabled:hover:bg-emerald-500 disabled:hover:bg-emerald-300 dark:bg-emerald-500 disabled:opacity-50'
                             hoverColor='dark:hover:bg-emerald-600 hover:bg-emerald-400'
                             activeColor='active:opacity-80'
                         >

diff --git a/src/components/ExportURLPopup.jsx b/src/components/ExportURLPopup.jsx
@@ -38,19 +38,15 @@ function ExportURLPopup(props) {
             showWindow={props.showExportURLPopup} setShowWindow={props.setShowExportURLPopup}
         >
             <div className='p-2'>
-                <div className='text-sm pl-1'>
+                <div className='pl-1 text-sm'>
                     Paste this link to your browser to import the data.
                 </div>
                 <div className='flex items-center space-x-3'>
                     <textarea ref={textAreaRef}
                         readOnly
 
                         rows="1"
-                        className="whitespace-nowrap no-scrollbar resize-none w-full h-7 pl-3 pt-[0.15rem] text-sm outline-none rounded-lg border
-                    bg-transparent
-                    dark:text-slate-300 text-slate-700
-                    dark:border-slate-400 border-slate-500
-                    dark:placeholder-slate-500 placeholder-slate-450"
+                        className="border-slate-500 dark:border-slate-400 bg-transparent pt-[0.15rem] pl-3 border rounded-lg w-full h-7 text-slate-700 text-sm dark:text-slate-300 whitespace-nowrap no-scrollbar outline-none placeholder-slate-450 resize-none dark:placeholder-slate-500"
                         placeholder="Please wait..."
                     />
                     <Button

diff --git a/src/components/Grid.jsx b/src/components/Grid.jsx
@@ -26,7 +26,7 @@ function Grid() {
 
     return (
         <ReactSortable
-            className="grid gap-7 grid-cols-1 md:grid-cols-2 m-8 dark:text-slate-200 text-slate-800"
+            className="gap-7 grid grid-cols-1 md:grid-cols-2 m-8 text-slate-800 dark:text-slate-200"
             list={universityData.terms}
             setList={(newList) => {
                 save();
@@ -41,7 +41,7 @@ function Grid() {
             {...sortableOptions}
         >
             {universityData.terms.map((term) => (
-                <Term key={term.id} id={term.id} name={term.name} expanded={term.expanded} includeCalc={term.includeCalc} autoCalc={term.autoCalc} gpa={String(term.gpa)}>
+                <Term key={term.id} id={term.id} name={term.name} totalCredit={String(term.totalCredit)} totalEcts={String(term.totalEcts)} expanded={term.expanded} includeCalc={term.includeCalc} autoCalc={term.autoCalc} gpa={String(term.gpa)}>
                     <ReactSortable
                         list={term.courses}
                         setList={(newList) => {
@@ -60,7 +60,7 @@ function Grid() {
                         {term.courses.map((course) => (
                             <Course key={course.id}
                                 id={course.id} termId={course.termId} name={course.name}
-                                credit={course.credit} score={String(course.score)} grade={course.grade}
+                                credit={course.credit} ects={course.ects} score={String(course.score)} grade={course.grade}
                                 autoCalcScore={course.autoCalcScore} autoCalcGrade={course.autoCalcGrade} includeCalc={course.includeCalc}
                                 expanded={course.expanded}>
                                 <ReactSortable

diff --git a/src/components/ImportFromFileWindow.jsx b/src/components/ImportFromFileWindow.jsx
@@ -59,28 +59,25 @@ function ImportFromFileWindow(props) {
             title={'Import from file'}
             showWindow={props.showImportFilePopup} setShowWindow={props.setShowImportFilePopup}
         >
-            <div className='flex flex-col items-center p-2 space-y-3'>
+            <div className='flex flex-col items-center space-y-3 p-2'>
                 {/* Uni logo and name */}
                 {selectedFile && (
-                    <div className=" w-full
-                    flex items-center rounded-lg
-                    border dark:border-slate-550 border-slate-400
-                    dark:bg-slate-650 bg-slate-350"
+                    <div className="flex items-center border-slate-400 dark:border-slate-550 bg-slate-350 dark:bg-slate-650 border rounded-lg w-full"
                     >
                         {/* Uni logo */}
-                        <Logo className="shrink-0 w-10 mr-4 m-3" />
+                        <Logo className="m-3 mr-4 w-10 shrink-0" />
                         {/* Uni logo */}
 
                         <div className="py-3 pr-4 shrink-0">
-                            <div className="text-md font-semibold">
+                            <div className="font-semibold text-md">
                                 {decodedData.name ? decodedData.name : 'No university name'}
                             </div>
                             <div className="text-md">
                                 {decodedData.department ? decodedData.department : 'No department name'}
                             </div>
                         </div>
-                        <div className="w-full flex justify-end py-3">
-                            <div className="dark:text-slate-150 text-slate-800 border-none dark:bg-slate-600 bg-slate-200 bg-opacity-50 dark:border-slate-450 border-slate-450 w-fit h-fit p-2 rounded-lg">
+                        <div className="flex justify-end py-3 w-full">
+                            <div className="border-slate-450 dark:border-slate-450 bg-slate-200 dark:bg-slate-600 bg-opacity-50 p-2 border-none rounded-lg w-fit h-fit text-slate-800 dark:text-slate-150">
                                 {decodedData.gpa ? Math.round(Number(decodedData.gpa) * 100) / 100 : ' - '}
                             </div>
                         </div>
@@ -89,8 +86,7 @@ function ImportFromFileWindow(props) {
                                 setSelectedFile(null);
                                 setDecodedData({});
                             }}
-                                className='
-                    rounded-full dark:bg-rose-500 bg-rose-300'>
+                                className='bg-rose-300 dark:bg-rose-500 rounded-full'>
                                 <X size={'1rem'} />
                             </button>
                         </div>
@@ -107,10 +103,7 @@ function ImportFromFileWindow(props) {
                         disabled={!selectedFile || Object.keys(decodedData).length === 0}
                         onClick={handleImport}
                         padding='px-4 py-2'
-                        className='dark:bg-emerald-500 bg-emerald-300
-                        disabled:opacity-50
-                        dark:disabled:hover:bg-emerald-500 disabled:hover:bg-emerald-300
-                    '
+                        className='bg-emerald-300 dark:disabled:hover:bg-emerald-500 disabled:hover:bg-emerald-300 dark:bg-emerald-500 disabled:opacity-50'
                         hoverColor='dark:hover:bg-emerald-600 hover:bg-emerald-400'
                         activeColor='active:opacity-80'
                     >
@@ -125,10 +118,7 @@ function ImportFromFileWindow(props) {
                             props.setShowImportFilePopup(false);
                         }}
                         padding='px-4 py-2'
-                        className='dark:bg-rose-500 bg-rose-300
-                        disabled:opacity-50
-                        dark:disabled:hover:bg-rose-500 disabled:hover:bg-rose-300
-                    '
+                        className='bg-rose-300 dark:disabled:hover:bg-rose-500 disabled:hover:bg-rose-300 dark:bg-rose-500 disabled:opacity-50'
                         hoverColor='dark:hover:bg-rose-600 hover:bg-rose-400'
                         activeColor='active:opacity-80'
                     >