sumukhah · pnhegde · May 15, 2021 · May 15, 2021
diff --git a/src/App.js b/src/App.js
@@ -4,17 +4,17 @@ import "react-datasheet/lib/react-datasheet.css";
 import { specialChars } from "./helpers/specialCharectors.json";
 import "./App.scss";
 import TableConfigInput from "./components/TableConfigInput";
-import { thala } from "./helpers/exampleThalas.json";
+import { tala } from "./helpers/exampleTalas.json";
 import NotesTable from "./components/NotesTable";
 
 class App extends React.Component {
   state = {
-    title: "theen thanl",
-    raga: "abc",
+    title: "Teen Taal",
+    raga: "Raag Yaman",
     height: 15,
-    width: 20,
-    columnStart: 2,
-    hieghestColumn: 16,
+    width: 16,
+    columnStart: 9,
+    highestColumn: 16,
     tableCells: [], // format -> [[{key:k, value: val}, {key:k, value:val}], [{key:k, value:val}]]
   };
 
@@ -43,22 +43,22 @@ class App extends React.Component {
     this.setState({ tableCells: updatedTableCells });
   };
 
-  handleThalaChange = (e) => {
+  handleTalaChange = (e) => {
     const {
       title,
       raga,
       height,
       width,
-      hieghestColumn,
+      highestColumn,
       columnStart,
-    } = thala.find((thala) => thala.title === e.key);
+    } = tala.find((tala) => tala.title === e.key);
     this.setState({
       title,
       raga,
       height,
       width,
       columnStart,
-      hieghestColumn,
+      highestColumn,
     });
   };
 
@@ -75,7 +75,7 @@ class App extends React.Component {
   createTableCells = () => {
     // react-datasheet > to create a blank cell, set value to empty string.
     // for table creation [[{value: '1st row', key: '1st ele'}, ],[{value:'2nd row', key: 'second ele'}]]
-    const { height, width, columnStart, hieghestColumn } = this.state;
+    const { height, width, columnStart, highestColumn } = this.state;
     let colStart = parseInt(columnStart);
     const grid = [];
 
@@ -91,7 +91,7 @@ class App extends React.Component {
             value: colStart,
             readOnly: true,
           });
-          colStart = colStart >= hieghestColumn ? 1 : parseInt(colStart) + 1;
+          colStart = colStart >= highestColumn ? 1 : parseInt(colStart) + 1;
         } else {
           row.push({
             key,
@@ -145,7 +145,7 @@ class App extends React.Component {
       title,
       raga,
       columnStart,
-      hieghestColumn,
+      highestColumn,
       tableCells,
     } = this.state;
     return (
@@ -154,12 +154,12 @@ class App extends React.Component {
           <TableConfigInput
             handleTableChange={this.handleTableChange}
             handleConfigSubmit={this.handleConfigSubmit}
-            handleThalaChange={this.handleThalaChange}
+            handleTalaChange={this.handleTalaChange}
             height={height}
             width={width}
             title={title}
             columnStart={columnStart}
-            hieghestColumn={hieghestColumn}
+            highestColumn={highestColumn}
           />
         </div>
         <div className="notes-table">

diff --git a/src/App.scss b/src/App.scss
@@ -1,17 +1,18 @@
 @import '~antd/dist/antd.css';
 
 .app {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
 }
 
 .notes-table {
-    margin-top: 50px;
-    margin-bottom: 50px;
+  margin-top: 50px;
+  margin-bottom: 50px;
 }
 
 .table-config {
-    margin-top: 50px;
-}
+  margin-top: 25px;
+  width: 60%;
+}
diff --git a/src/components/NoteTable.scss b/src/components/NoteTable.scss
@@ -4,8 +4,6 @@
   input {
     height: 100%;
   }
-
-
 }
 
 .ant-input {
@@ -16,11 +14,13 @@
 .note-table-component {
   .add-title-button {
     color: blue;
+    margin-bottom: 10px;
   }
 
   .spread-sheet-foot-buttons {
     display: flex;
     justify-content: space-between;
+    margin-top: 10px;
   }
 
   u {
@@ -42,12 +42,10 @@
     justify-content: space-between;
     // align-content: space-between;
     align-items: center;
-
   }
 }
 
 @media print {
-
   @page {
     margin: 0mm 0mm;
     padding: 0mm 0mm;
@@ -65,7 +63,7 @@
 
   table {
     visibility: visible;
-    -webkit-print-color-adjust: exact
+    -webkit-print-color-adjust: exact;
   }
 }
 
@@ -86,4 +84,4 @@
   background-color: #dddddd;
   color: rgb(95, 95, 95);
   border: 0.5px solid;
-}
+}
diff --git a/src/components/NotesTable.jsx b/src/components/NotesTable.jsx
@@ -58,43 +58,10 @@ class NotesTable extends React.Component {
 
   handlePdfPrint = (e) => {
     window.print();
+  };
 
-    // For generating printed Document, But this is not much effiecient
-    // const doc = new jsPDF();
-    // console.log(this.props.raga);
-
-    // doc.text(20, 10, `${this.props.title || "title:"}`);
+  handleLocalSave = (e) => {
 
-    // autoTable(doc, {
-    //   html: "table",
-    //   theme: "grid",
-    //   styles: {
-    //     font: "DejaVuSans",
-    //   },
-    //   bodyStyles: {
-    //     overflow: "visible",
-    //     halign: "center",
-    //     valign: "bottom",
-    //     cellPadding: 1,
-    //     minCellHeight: 5,
-    //   },
-    //   didParseCell: function (data) {
-    //     const tdElement = data.cell.raw;
-    //     if (tdElement.getElementsByTagName("div").length) {
-    //       data.cell.styles.font = "OldSansBlackUnderline";
-    //     }
-    //   },
-    //   willDrawCell: function (data) {
-    //     if (data.row.index === 0) {
-    //       doc.setFillColor(210, 210, 210);
-    //     } else if (data.row.raw.length === 1) {
-    //       doc.setFillColor(240, 240, 240);
-    //     }
-    //   },
-    // });
-    // doc.setFontSize(15);
-    // doc.text(120, 10, `${this.props.raga || "title:"}`);
-    // doc.save(`${this.props.title || "musicNotes"}.pdf`);
   };
 
   getValueFromCell = (cell) => {
@@ -107,7 +74,6 @@ class NotesTable extends React.Component {
       tableCells,
       title,
       handleAddNewRow,
-      raga,
       handleTableChange,
     } = this.props;
     return (
@@ -118,8 +84,7 @@ class NotesTable extends React.Component {
           </Typography.Title>
           <div className="raaga">
             <Input
-              placeholder="raaga"
-              value={raga}
+              placeholder="Raag Yaman"
               id="raga"
               onChange={handleTableChange}
               className="print-visible raga-input"
@@ -129,7 +94,7 @@ class NotesTable extends React.Component {
         <Tooltip title="Add title" placement="topLeft">
           <div className="add-title-button" onClick={this.handleAddTitle}>
             <PlusOutlined />
-            <span>insert a title</span>
+            <span>Add a custom row title</span>
           </div>
         </Tooltip>
 
@@ -151,7 +116,14 @@ class NotesTable extends React.Component {
             type="primary"
             icon={<DownloadOutlined />}
           >
-            Save Pdf
+            Save as PDF
+          </Button>
+          <Button
+            onClick={this.handleLocalSave}
+            type="primary"
+            icon={<DownloadOutlined />}
+          >
+            Save locally
           </Button>
           <Button onClick={handleAddNewRow} icon={<PlusOutlined />}>
             Add a row

diff --git a/src/components/TableConfigInput.jsx b/src/components/TableConfigInput.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { thala } from "../helpers/exampleThalas.json";
+import { tala } from "../helpers/exampleTalas.json";
 import { Card, Menu, Dropdown, Button } from "antd";
 import "./TableConfigInput.scss";
 
@@ -10,16 +10,16 @@ class TableConfig extends React.Component {
       width,
       title,
       columnStart,
-      handleThalaChange,
+      handleTalaChange,
       handleTableChange,
       handleConfigSubmit,
     } = this.props;
 
     const dropDownItems = (
       <Menu>
-        {thala.map((item) => {
+        {tala.map((item) => {
           return (
-            <Menu.Item onClick={handleThalaChange} key={item.title}>
+            <Menu.Item onClick={handleTalaChange} key={item.title}>
               {item.title}
             </Menu.Item>
           );
@@ -40,7 +40,7 @@ class TableConfig extends React.Component {
                 required
               />
             </Dropdown>
-            <label htmlFor="title">Thaala</label>
+            <label htmlFor="title">Tala</label>
           </div>
           <div>
             <input
@@ -76,7 +76,7 @@ class TableConfig extends React.Component {
               onChange={handleTableChange}
               className="number-input"
             />
-            <label htmlFor="columnStart">Start</label>
+            <label htmlFor="columnStart">Starting Beat</label>
           </div>
           <Button htmlType="submit" type="primary">
             Submit

diff --git a/src/components/TableConfigInput.scss b/src/components/TableConfigInput.scss
@@ -1,20 +1,19 @@
 .table-config-input {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .table-config-form {
   display: flex;
-  align-items: center;
+  justify-content: space-around;
 
   input {
     border: 1px solid;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
     text-align: center;
   }
 
   .number-input {
-    width: 60px;
+    width: 100px;
   }
 
   div {
@@ -27,10 +26,9 @@
       font-size: smaller;
     }
   }
-
 }
 
 .basic-input input {
   width: 50px;
   border-width: thin;
-}
+}
diff --git a/src/helpers/exampleTalas.json b/src/helpers/exampleTalas.json
@@ -0,0 +1,45 @@
+{
+    "tala": [{
+        "title": "Teen Taal",
+        "columnStart": 9,
+        "height": 27,
+        "width": 16,
+        "highestColumn": 16
+    }, {
+        "title": "Roopak Taal",
+        "columnStart": 1,
+        "height": 10,
+        "width": 7,
+        "highestColumn": 7
+    }, {
+        "title": "Jhaptal",
+        "columnStart": 1,
+        "height": 8,
+        "width": 10,
+        "highestColumn": 10
+    }, {
+        "title": "Dadra",
+        "columnStart": 1,
+        "height": 8,
+        "width": 6,
+        "highestColumn": 6
+    }, {
+        "title": "Chautal",
+        "columnStart": 1,
+        "height": 8,
+        "width": 12,
+        "highestColumn": 12
+    }, {
+        "title": "Jhoomra",
+        "columnStart": 1,
+        "height": 8,
+        "width": 14,
+        "highestColumn": 14
+    }, {
+        "title": "Keherwa",
+        "columnStart": 1,
+        "height": 8,
+        "width": 8,
+        "highestColumn": 8
+    }]
+}