Refactor for resume editor

nandangrover · Feb 7, 2020 · 76d3260 · 76d3260
1 parent d66c809
commit 76d3260
Show file tree

Hide file tree

Showing 15 changed files with 1,805 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
diff --git a/CV.js → client/CV.js b/CV.js → client/CV.js
diff --git a/T025LG3MW-UEHPGSFFC-69097c4c4add-512.jpeg → ...T025LG3MW-UEHPGSFFC-69097c4c4add-512.jpeg b/T025LG3MW-UEHPGSFFC-69097c4c4add-512.jpeg → ...T025LG3MW-UEHPGSFFC-69097c4c4add-512.jpeg
diff --git a/home.html → client/index.html b/home.html → client/index.html
@@ -12,7 +12,7 @@
   <link rel="stylesheet" href="style.css">
   <link href="https://fonts.googleapis.com/css?family=Roboto:100&display=swap" rel="stylesheet">
   <script src="https://kit.fontawesome.com/b717aa2c85.js"></script>
-  <script src="CV.js" async defer></script>
+  <script src="manageRoutes.js" async defer></script>
 </head>
 
 <body style="-webkit-print-color-adjust:exact;">

diff --git a/client/manageRoutes.js b/client/manageRoutes.js
@@ -0,0 +1,67 @@
+// Application div
+const appDiv = "app";
+// Both set of different routes and template generation functions
+let routes = {};
+let templates = {};
+// Register a template (this is to mimic a template engine)
+let template = (name, templateFunction) => {
+  return templates[name] = templateFunction;
+};
+
+// Register the templates.
+template('defaultCV', () => {
+  scriptLoader('CV.js');
+});
+
+// Register the templates.
+template('editorResume', () => {
+  scriptLoader('resumeEditor.js');
+});
+// Define the routes. Each route is described with a route path & a template to render
+// when entering that path. A template can be a string (file name), or a function that
+// will directly create the DOM objects.
+let route = (path, template) => {
+  if (typeof template == "function") {
+    return routes[path] = template;
+  }
+  else if (typeof template == "string") {
+    return routes[path] = templates[template];
+  }
+  else {
+    return;
+  }
+};
+
+// Define the mappings route->template.
+route('/', 'defaultCV');
+route('/secretEditor', 'editorResume');
+
+
+// Give the correspondent route (template) or fail
+let resolveRoute = (route) => {
+  try {
+   return routes[route];
+  } catch (error) {
+      throw new Error("The route is not defined");
+  }
+};
+
+const scriptLoader = path => {
+  const script = document.createElement('script');
+  script.onload = () => {
+    console.log('Script Loaded')
+  };
+  script.src = path;
+  document.head.appendChild(script)
+};
+// The actual router, get the current URL and generate the corresponding template
+let router = (evt) => {
+  const url = window.location.pathname || "/";
+  const routeResolved = resolveRoute(url);
+  console.log(window.location);
+
+  routeResolved();
+};
+// For first load or when routes are changed in browser url box.
+window.addEventListener('load', router);
+window.addEventListener('hashchange', router);
diff --git a/client/resumeEditor.js b/client/resumeEditor.js
@@ -0,0 +1,236 @@
+class resume {
+  constructor() {
+    this.jsonURL = 'config.json';
+    this.config = {};
+    this.elemObj = {};
+    this.loadSequence('loadJSON');
+    document.getElementById("print").addEventListener('click', () => this.loadSequence('print'))
+  }
+
+  loadSequence(loadFunction) {
+    switch (loadFunction) {
+      case 'loadJSON':
+        this.loadJSON();
+        break;
+      case 'createStructure':
+        this.createStructure();
+        break;
+      case 'print':
+        window.print();
+        break;
+    }
+  }
+
+  loadJSON() {
+    this.createElement({ className: 'heading', id: `resume-editor`, appendTo: 'main', type: 'h1', html: "Enter your name to load previously loaded resumes or create new ones" });
+
+    this.createElement({ className: 'info-holder', id: `info-holder`, appendTo: 'main' });
+
+    this.createElement({ className: 'resume-editor', id: `resume-editor`, appendTo: 'info-holder', type: 'input', attr: [{ key: 'placeholder', value: 'Enter your name' }] });
+  }
+
+  createStructure() {
+    this.topNavigation();
+
+    this.resumeContent();
+  }
+
+  topNavigation() {
+    this.createElement({ className: 'topNavContainer', id: 'topNavContainer', appendTo: 'main' });
+
+    this.createElement({ className: 'leftPartition', id: 'leftPartition', appendTo: 'topNavContainer' });
+    // left-block
+    this.createElement({ className: 'leftBlock', id: 'leftBlock', appendTo: 'leftPartition' });
+    // text-bloc
+    this.createElement({ className: 'textBlock', id: 'textBlock', appendTo: 'leftPartition' });
+    // name
+    this.createElement({ className: 'name', id: 'name', appendTo: 'textBlock', html: this.config.elements.topNav.name });
+    // designation
+    this.createElement({ className: 'designation', id: 'designation', appendTo: 'textBlock', html: this.config.elements.topNav.designation });
+    // bio
+    this.createElement({ className: 'bio', id: 'bio', appendTo: 'textBlock', html: this.config.elements.topNav.bio });
+
+    this.createElement({ className: 'rightPartition', id: 'rightPartition', appendTo: 'topNavContainer' });
+
+    //icon holder
+    this.createElement({ className: 'iconsHolder', id: 'iconsHolder', appendTo: 'rightPartition' });
+
+
+    // message Icon
+    this.createElement({ className: 'iconHolder', id: 'iconHolder1', appendTo: 'iconsHolder' });
+    this.createElement({ className: 'iconText', id: 'email', appendTo: 'iconHolder1', html: this.config.elements.topNav.email });
+    this.createElement({ className: 'icon', id: 'icon1', appendTo: 'iconHolder1' });
+    this.createElement({ className: 'fas fa-envelope icon', id: 'email', appendTo: 'icon1' });
+
+    // mobile Icon
+    this.createElement({ className: 'iconHolder', id: 'iconHolder2', appendTo: 'iconsHolder' });
+    this.createElement({ className: 'iconText', id: 'number', appendTo: 'iconHolder2', html: this.config.elements.topNav.number });
+    this.createElement({ className: 'icon', id: 'icon2', appendTo: 'iconHolder2' });
+    this.createElement({ className: 'fas fa-mobile-alt icon', id: 'number', appendTo: 'icon2' });
+
+    // location Icon
+    this.createElement({ className: 'iconHolder', id: 'iconHolder3', appendTo: 'iconsHolder' });
+    this.createElement({ className: 'iconText', id: 'location', appendTo: 'iconHolder3', html: this.config.elements.topNav.location });
+    this.createElement({ className: 'icon', id: 'icon3', appendTo: 'iconHolder3' });
+    this.createElement({ className: 'fas fa-map-marker-alt icon', id: 'location', appendTo: 'icon3' });
+
+    // gitHub Icon
+    this.createElement({ className: 'iconHolder', id: 'iconHolder4', appendTo: 'iconsHolder' });
+    this.createElement({ className: 'iconText', id: 'github', appendTo: 'iconHolder4', html: 'gitHub', type: 'a', attr: [{ key: 'href', value: this.config.elements.topNav.github }, , { key: 'target', value: '_blank' }] });
+    this.createElement({ className: 'icon', id: 'icon4', appendTo: 'iconHolder4' });
+    this.createElement({ className: 'fab fa-github icon', id: 'github', appendTo: 'icon4' });
+
+    // linkedIn Iconfab
+    this.createElement({ className: 'iconHolder', id: 'iconHolder5', appendTo: 'iconsHolder' });
+    this.createElement({ className: 'iconText', id: 'linkedin', appendTo: 'iconHolder5', html: 'linkedIn', type: 'a', attr: [{ key: 'href', value: this.config.elements.topNav.linkedin }, { key: 'target', value: '_blank' }] });
+    this.createElement({ className: 'icon', id: 'icon5', appendTo: 'iconHolder5' });
+    this.createElement({ className: 'fab fa-linkedin icon', id: 'linkedin', appendTo: 'icon5' });
+
+  }
+
+  resumeContent() {
+    this.createElement({ className: 'resumeContent', id: 'resumeContent', appendTo: 'main' });
+
+    this.createElement({ className: 'leftPartitionContent', id: 'leftPartitionContent', appendTo: 'resumeContent' });
+
+    this.createElement({ className: 'rightPartitionContent', id: 'rightPartitionContent', appendTo: 'resumeContent' });
+
+    this.creatWorkExperienceBlock(this.config.elements.resumeContent[0].workExperience);
+
+    this.createPersonalProjectsBlock(this.config.elements.resumeContent[1].personalProjects);
+
+    this.creatEducationBlock(this.config.elements.resumeContent[2].education);
+
+    this.createSkillsBlock(this.config.elements.resumeContent[3].skills);
+
+    this.createInterestsBlock(this.config.elements.resumeContent[4].interests);
+  }
+
+  creatWorkExperienceBlock(path) {
+    // Work Experience
+    this.createElement({ className: 'workExperience', id: 'workExperience', appendTo: 'leftPartitionContent' });
+
+    this.createElement({ className: 'header', id: 'workExperienceHeader', appendTo: 'workExperience', html: this.config.elements.resumeContent[0].header });
+
+    path.forEach((element, idx) => {
+      this.createElement({ className: 'blockHolder', id: `blockHolder_${idx}`, appendTo: 'workExperience' });
+      // left-block
+      this.createElement({ className: 'leftBlock contentColor', id: 'leftBlock', appendTo: `blockHolder_${idx}` });
+      // text-bloc
+      this.createElement({ className: 'textBlock', id: `textBlock_${idx}`, appendTo: `blockHolder_${idx}` });
+
+      this.createElement({ className: 'designation contentDesig', id: `designation_${idx}`, appendTo: `textBlock_${idx}`, html: path[idx]['designation'] });
+
+      this.createElement({ className: 'companyName', id: `companyName_${idx}`, appendTo: `textBlock_${idx}`, html: path[idx]['companyName'] });
+
+      this.createElement({ className: 'dateStarted', id: `dateStarted_${idx}`, appendTo: `textBlock_${idx}`, html: path[idx]['dateStarted'] });
+
+      this.createElement({ className: 'locationCompany', id: `locationCompany_${idx}`, appendTo: `textBlock_${idx}`, html: path[idx]['location'] });
+
+      if (path[idx].description) {
+        // description
+        this.createElement({ className: 'description', id: `description_${idx}`, appendTo: `textBlock_${idx}`, html: '', type: 'ul' });
+
+        path[idx].description.forEach((listItem, _idx) => {
+          this.createElement({ className: 'listItems', id: `listItems_${_idx}${idx}`, appendTo: `description_${idx}`, html: listItem, type: 'li' });
+        })
+      }
+    });
+  }
+
+  creatEducationBlock(path) {
+    // Education
+    this.createElement({ className: 'education', id: 'education', appendTo: 'rightPartitionContent' });
+
+    this.createElement({ className: 'header', id: 'educationHeader', appendTo: 'education', html: this.config.elements.resumeContent[2].header });
+
+    path.forEach((element, idx) => {
+      this.createElement({ className: 'blockHolder', id: `blockHolder_1${idx}`, appendTo: 'education' });
+      // left-block
+      this.createElement({ className: 'leftBlock contentColor', id: 'leftBlock', appendTo: `blockHolder_1${idx}` });
+      // text-bloc
+      this.createElement({ className: 'textBlock', id: `textBlock_1${idx}`, appendTo: `blockHolder_1${idx}` });
+
+      this.createElement({ className: 'designation contentDesig', id: `degree_${idx}`, appendTo: `textBlock_1${idx}`, html: path[idx]['degree'] });
+
+      this.createElement({ className: 'companyName', id: `collegeName_${idx}`, appendTo: `textBlock_1${idx}`, html: path[idx]['collegeName'] });
+
+      this.createElement({ className: 'dateStarted', id: `dateStarted_1${idx}`, appendTo: `textBlock_1${idx}`, html: path[idx]['dateStarted'] });
+
+      this.createElement({ className: 'locationCompany', id: `locationCompany_1${idx}`, appendTo: `textBlock_1${idx}`, html: path[idx]['location'] });
+
+      if (path[idx].description) {
+        // description
+        this.createElement({ className: 'description', id: `description_1${idx}`, appendTo: `textBlock_1${idx}`, html: '', type: 'ul' });
+
+        path[idx].description.forEach((listItem, _idx) => {
+          this.createElement({ className: 'listItems', id: `listItems_1${_idx}${idx}`, appendTo: `description_1${idx}`, html: listItem, type: 'li' });
+        })
+      }
+    });
+  }
+
+  createSkillsBlock(path) {
+    // Skills
+    this.createElement({ className: 'skillsContainer', id: 'skillsContainer', appendTo: 'rightPartitionContent' });
+
+    this.createElement({ className: 'header', id: 'skillsHeader', appendTo: 'skillsContainer', html: this.config.elements.resumeContent[3].header });
+
+    this.createElement({ className: 'textBlock', id: `skills_block`, appendTo: `skillsContainer` });
+
+    path.forEach((skill, idx) => {
+      this.createElement({ className: 'skills', id: `skill_${idx}`, appendTo: 'skills_block', html: skill });
+    });
+  }
+
+  createPersonalProjectsBlock(path) {
+    // Skills
+    this.createElement({ className: 'projectsContainer', id: 'projectsContainer', appendTo: 'leftPartitionContent' });
+
+    this.createElement({ className: 'header', id: 'projects_header', appendTo: 'projectsContainer', html: this.config.elements.resumeContent[1].header });
+
+    path.forEach((project, idx) => {
+      this.createElement({ className: 'blockHolder', id: `blockHolder_personal_${idx}`, appendTo: 'projectsContainer' });
+
+      this.createElement({ className: 'leftBlock contentColor', id: 'leftBlock', appendTo: `blockHolder_personal_${idx}` });
+      // text-bloc
+      this.createElement({ className: 'textBlock', id: `textBlock_personal_1${idx}`, appendTo: `blockHolder_personal_${idx}` });
+
+      this.createElement({ className: 'designation contentDesig', id: `name_${idx}`, appendTo: `textBlock_personal_1${idx}`, html: path[idx]['name'] });
+
+      this.createElement({ className: 'description personalProject', id: `description_${idx}`, appendTo: `textBlock_personal_1${idx}`, html: path[idx]['description'] });
+
+      this.createElement({ className: 'iconText', id: `projectLink_${idx}`, appendTo: `textBlock_personal_1${idx}`, html: 'Project Link', type: 'a', attr: [{ key: 'href', value: path[idx]['link'] }, { key: 'target', value: '_blank' }] });
+    });
+
+  }
+
+  createInterestsBlock(path) {
+    // Interests
+    this.createElement({ className: 'interestsContainer', id: 'interestsContainer', appendTo: 'rightPartitionContent' });
+
+    this.createElement({ className: 'header', id: 'interests_header', appendTo: 'interestsContainer', html: this.config.elements.resumeContent[4].header });
+
+    this.createElement({ className: 'textBlock', id: `interest_block`, appendTo: `interestsContainer` });
+
+    path.forEach((interest, idx) => {
+      this.createElement({ className: 'skills interest', id: `interes_${idx}`, appendTo: 'interest_block', html: interest });
+    });
+  }
+
+  createElement({ className, id, appendTo, html = '', type = 'div', attr = [] }) {
+    const div = document.createElement(type);
+    div.setAttribute('class', className);
+    div.setAttribute('id', id);
+    if (attr) {
+      attr.forEach(({ key, value }) => div.setAttribute(key, value));
+    }
+    document.getElementById(appendTo).appendChild(div);
+    div.innerHTML = html;
+    return div;
+  }
+
+
+}
+
+new resume();
diff --git a/style.css → client/style.css b/style.css → client/style.css
@@ -231,6 +231,14 @@ a:visited {
   padding: 0 0 5px 0;
 }
 
+.resume-editor {
+  text-align: center;
+  margin: auto;
+  display: flex;
+  width: 143px;
+  height: 40px;
+}
+
 @page { size: auto;  margin: 0mm; }
 
 @media print {

diff --git a/composer.json b/composer.json
diff --git a/index.php b/index.php
diff --git a/config.json → server/config.json b/config.json → server/config.json