From 66214579fcf15bc51328fa2df6df41c7ddfc3dfa Mon Sep 17 00:00:00 2001 From: Jason Snelders Date: Sat, 16 Nov 2019 15:18:41 +1100 Subject: [PATCH] Implementing preview. Refactoring. --- app/app.js | 286 +++++++++-------------------- components/section_basics.js | 2 +- components/section_education.js | 4 +- components/section_interests.js | 4 +- components/section_languages.js | 2 +- components/section_publications.js | 2 +- components/section_references.js | 2 +- components/section_skills.js | 2 +- components/section_volunteer.js | 4 +- components/section_work.js | 4 +- index.html | 263 +++++++++++++++++--------- scripts.js | 189 +++++++++++++++++++ 12 files changed, 465 insertions(+), 299 deletions(-) diff --git a/app/app.js b/app/app.js index f4e92b8..947a7ba 100644 --- a/app/app.js +++ b/app/app.js @@ -74,7 +74,7 @@ var app = new Vue({ created() { - this.sections = this.getDefaultSections(); + this.sections = sections.getDefaultSections(); //-- Register all components components.registerComponents(); @@ -166,6 +166,75 @@ var app = new Vue({ }, + displayLocation: function() + { + /* + + + + + + */ + + return this.sections.basics.location.city + ", " + this.sections.basics.location.countryCode; + }, + + + skillLevelAsPercent: function(index) + { + var level = this.$root.sections.skills[index].level; + + if (level.toLowerCase() == "master" || level.toLowerCase() == "expert") + { + return 100; + } + else if (level.toLowerCase() == "proficient") + { + return 75; + } + else if (level.toLowerCase() == "basic" || level.toLowerCase() == "beginner") + { + return 25; + } + else + { + return 50; + } + }, + + languageFluencyAsPercent: function(index) + { + var fluency = this.$root.sections.skills[index].level; + + if (fluency.toLowerCase() == "master" || fluency.toLowerCase() == "expert") + { + return 100; + } + else if (fluency.toLowerCase() == "proficient") + { + return 75; + } + else if (fluency.toLowerCase() == "basic" || fluency.toLowerCase() == "beginner") + { + return 25; + } + else + { + return 50; + } + }, + + + workEndDate: function(index) + { + var endDate = this.$root.sections.work[index].endDate; + + if (endDate == "") return "Current"; + + return endDate; + }, + + /** * Clear save data and reset the sections structure. @@ -176,7 +245,7 @@ var app = new Vue({ if (response == true) { - this.sections = this.getDefaultSections(); + this.sections = sections.getDefaultSections(); alert("Your resume has been cleared."); } @@ -303,192 +372,6 @@ var app = new Vue({ element.classList.add("w3-blue"); } } - }, - - - - getDefaultSections: function() - { - var structure = { - basics: {}, - work: [], - volunteer: [], - education: [], - awards: [], - publications: [], - skills: [], - languages: [], - interests: [], - references: [] - }; - - structure.basics = this.getDefaultBasic(); - structure.work.push(this.getDefaultWork()); - structure.volunteer.push(this.getDefaultVolunteer()); - structure.education.push(this.getDefaultEducation()); - structure.awards.push(this.getDefaultAward()); - structure.publications.push(this.getDefaultPublication()); - structure.skills.push(this.getDefaultSkill()); - structure.languages.push(this.getDefaultLanguage()); - structure.interests.push(this.getDefaultInterest()); - structure.references.push(this.getDefaultReference()); - - - return structure; - }, - - getDefaultBasic: function() - { - return { - name: "", - label: "", - picture: "", - email: "", - phone: "", - website: "", - summary: "", - location: { - address: "", - postalCode: "", - city: "", - countryCode: "", - region: "", - }, - profiles: [ - { - network: "", - username: "", - url: "", - } - ] - }; - }, - - getDefaultBasicProfile: function() - { - return { - network: "", - username: "", - url: "", - }; - }, - - getDefaultWork: function() - { - return { - company: "", - position: "", - website: "", - startDate: "", - endDate: "", - summary: "", - highlights: [""] - }; - }, - - getDefaultWorkHighlight: function() - { - return ""; - }, - - getDefaultVolunteer: function() - { - return { - organization: "", - position: "", - website: "", - startDate: "", - endDate: "", - summary: "", - highlights: [""] - }; - }, - - getDefaulVolunteerHighlight: function() - { - return ""; - }, - - getDefaultEducation: function() - { - return { - institution: "", - area: "", - studyType: "", - startDate: "", - endDate: "", - gpa: "", - courses: [""] - }; - }, - - getDefaultEducationCourse: function() - { - return ""; - }, - - getDefaultAward: function() - { - return { - title: "", - date: "", - awarder: "", - summary: "" - }; - }, - - getDefaultPublication: function() - { - return { - name: "", - publisher: "", - releaseDate: "", - website: "", - summary: "" - }; - }, - - getDefaultSkill: function() - { - return { - name: "", - level: "", - keywords: [""] - }; - }, - - getDefaultSkillKeywoard: function() - { - return ""; - }, - - getDefaultLanguage: function() - { - return { - language: "", - fluency: "" - }; - }, - - getDefaultInterest: function() - { - return { - name: "", - keywords: [""] - }; - }, - - getDefaultInterestKeywoard: function() - { - return ""; - }, - - getDefaultReference: function() - { - return { - name: "", - reference: "" - }; } }, @@ -515,18 +398,19 @@ var app = new Vue({ }, - $data: { - handler: function(val, oldVal) - { - //TODO: Disbled - // // Save the data to localStorage - // //NOTE: I'm initially not concerned about performance here. - // if (val.status == "loaded") - // { - // helpers.setLocalStorage("sections", val.sections); - // } - }, - deep: true - } + //TODO: Disbled + // $data: { + // handler: function(val, oldVal) + // { + + // // Save the data to localStorage + // //NOTE: I'm initially not concerned about performance here. + // if (val.status == "loaded") + // { + // helpers.setLocalStorage("sections", val.sections); + // } + // }, + // deep: true + // } } }); \ No newline at end of file diff --git a/components/section_basics.js b/components/section_basics.js index 69df715..ab9e231 100644 --- a/components/section_basics.js +++ b/components/section_basics.js @@ -73,7 +73,7 @@ var sectionBasicsComponent = { methods: { addProfile: function() { - var item = this.$root.getDefaultBasicProfile(); + var item = sections.getDefaultBasicProfile(); this.$root.sections.basics.profiles.push(item); } } diff --git a/components/section_education.js b/components/section_education.js index 0c9b77a..23db539 100644 --- a/components/section_education.js +++ b/components/section_education.js @@ -29,13 +29,13 @@ var sectionEducationComponent = { methods: { addEducation: function() { - var item = this.$root.getDefaultEducation(); + var item = sections.getDefaultEducation(); this.$root.sections.education.push(item); }, addCourse: function(index) { - var item = this.$root.getDefaultEducationCourse(); + var item = sections.getDefaultEducationCourse(); this.$root.sections.education[index].courses.push(item); } } diff --git a/components/section_interests.js b/components/section_interests.js index f5a906d..c65bfb9 100644 --- a/components/section_interests.js +++ b/components/section_interests.js @@ -29,13 +29,13 @@ var sectionInterestsComponent = { methods: { addInterest: function() { - var item = this.$root.getDefaultInterest(); + var item = sections.getDefaultInterest(); this.$root.sections.interests.push(item); }, addKeyword: function(index) { - var item = this.$root.getDefaultInterestKeywoard(); + var item = sections.getDefaultInterestKeywoard(); //console.log("addHighlight(" + index + ")", this.$root.sections.interests[index]); this.$root.sections.interests[index].keywords.push(item); } diff --git a/components/section_languages.js b/components/section_languages.js index b6ef4da..12a7c2a 100644 --- a/components/section_languages.js +++ b/components/section_languages.js @@ -29,7 +29,7 @@ var sectionLanguagesComponent = { methods: { addLanguage: function() { - var item = this.$root.getDefaultInterest(); + var item = sections.getDefaultInterest(); this.$root.sections.languages.push(item); } } diff --git a/components/section_publications.js b/components/section_publications.js index 5f52069..91298ad 100644 --- a/components/section_publications.js +++ b/components/section_publications.js @@ -29,7 +29,7 @@ var sectionPublicationsComponent = { methods: { addPublication: function() { - var item = this.$root.getDefaultWork(); + var item = sections.getDefaultWork(); this.$root.sections.publications.push(item); } } diff --git a/components/section_references.js b/components/section_references.js index 80fe497..7c55e8e 100644 --- a/components/section_references.js +++ b/components/section_references.js @@ -29,7 +29,7 @@ var sectionReferencesComponent = { methods: { addReference: function() { - var item = this.$root.getDefaultReference(); + var item = sections.getDefaultReference(); this.$root.sections.references.push(item); } } diff --git a/components/section_skills.js b/components/section_skills.js index 99a5eb8..cd4f6af 100644 --- a/components/section_skills.js +++ b/components/section_skills.js @@ -35,7 +35,7 @@ var sectionSkillsComponent = { addKeyword: function(index) { - var item = this.$root.getDefaultSkillKeywoard(); + var item = sections.getDefaultSkillKeywoard(); //console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]); this.$root.sections.skills[index].keywords.push(item); } diff --git a/components/section_volunteer.js b/components/section_volunteer.js index 195f5b4..75c35d1 100644 --- a/components/section_volunteer.js +++ b/components/section_volunteer.js @@ -29,13 +29,13 @@ var sectionVolunteerComponent = { methods: { addPosition: function() { - var item = this.$root.getDefaultVolunteer(); + var item = sections.getDefaultVolunteer(); this.$root.sections.volunteer.push(item); }, addHighlight: function(index) { - var item = this.$root.getDefaulVolunteerHighlight(); + var item = sections.getDefaulVolunteerHighlight(); //console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]); this.$root.sections.volunteer[index].highlights.push(item); } diff --git a/components/section_work.js b/components/section_work.js index 8e92c87..fa5f0c4 100644 --- a/components/section_work.js +++ b/components/section_work.js @@ -29,13 +29,13 @@ var sectionWorkComponent = { methods: { addPosition: function() { - var item = this.$root.getDefaultWork(); + var item = sections.getDefaultWork(); this.$root.sections.work.push(item); }, addHighlight: function(index) { - var item = this.$root.getDefaultWorkHighlight(); + var item = sections.getDefaultWorkHighlight(); this.$root.sections.work[index].highlights.push(item); } } diff --git a/index.html b/index.html index a95a6b3..feb3fb5 100644 --- a/index.html +++ b/index.html @@ -766,53 +766,36 @@
- Avatar -
-

Jane Doe

+ Avatar +
+

{{$root.sections.basics.name}}

-

Designer

-

London, UK

-

ex@mail.com

-

1224435534

+

{{$root.sections.basics.label}}

+

{{$root.displayLocation()}}

+

{{$root.sections.basics.email}}

+

{{$root.sections.basics.phone}}

+

Skills

-

Adobe Photoshop

-
-
90%
-
-

Photography

-
-
-
80%
+
+

{{skill.name}}

+
+
{{skill.level}}
-

Illustrator

-
-
75%
-
-

Media

-
-
50%
-

-

Languages

-

English

-
-
-
-

Spanish

-
-
-
-

German

-
-
+ +

Languages

+
+

{{language.language}}

+
+
{{language.fluency}}
+

@@ -823,66 +806,176 @@
+ +
+

Work

-
-

Work Experience

-
-
Front End Developer / w3schools.com
-
Jan 2015 - Current
-

Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur est - reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste. -

-
-
-
-
Web Developer / something.com
-
Mar 2012 - Dec 2014 +
+
{{work.position}}
+ {{work.company}} +
+ {{work.startDate}} - + {{$root.workEndDate(w_index)}} + {{$root.workEndDate(w_index)}}
-

Consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est - reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste. -

-
-
-
-
Graphic Designer / designsomething.com
-
Jun 2010 - Mar 2012 -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.


+
+ +
Highlights
+
    +
  1. + {{highlight}} +
    2. +
+ +
+ -
-

Education

-
-
W3Schools.com
-
Forever
-

Web Development! All I need to know in one place

-
-
-
-
London Business School
-
2013 - 2015
-

Master Degree

-
-
-
-
School of Coding
-
2010 - 2013
-

Bachelor Degree


+ +
+

Volunteering

+ +
+
+
{{vol.organization}}
+

{{vol.position}}

+

{{vol.website}}

+
{{vol.startDate}} - {{vol.endDate}}
+
+ +
Highlights
+
    +
  1. + {{highlight}} +
    2. +
+
+
+ + + +
+

Education

+ +
+
+
{{edu.institution}}
+

{{edu.area}}, {{edu.studyType}}

+
{{edu.startDate}} - {{edu.endDate}}
+

GPA: {{edu.gpa}}

+
+ +
Courses
+
    +
  1. + {{course}} +
    2. +
+
+
+
+
+ + + +
+

Awards

+ +
+
+
{{award.title}}
+

{{award.awarder}}

+
{{award.date}}
+
+ +
+
+
+
+ + + +
+

Publications

+ +
+
+
{{publication.name}}
+

{{publication.publisher}}

+
{{publication.releaseDate}}
+
+
+
+
+
+ + + +
+

Skills

+ +
+
+
{{skill.name}}
+

{{skill.level}}

+ +
    +
  1. + {{keyword}} +
    2. +
+
+
+
+
+ + + +
+

Interests

+ +
+
+
{{interest.name}}
+ +
    +
  1. + {{keyword}} +
    2. +
+
+
+
+
+ + + +
+

References

+ +
+
+
{{reference.name}}
+
+ +
+
+
+
+ -
- - + +
- - + +
+ +
diff --git a/scripts.js b/scripts.js index 97f9c1d..47cb481 100644 --- a/scripts.js +++ b/scripts.js @@ -32,4 +32,193 @@ var helpers = { { localStorage.removeItem(key); } +} + + + + + +var sections = { + getDefaultSections: function() + { + var structure = { + basics: {}, + work: [], + volunteer: [], + education: [], + awards: [], + publications: [], + skills: [], + languages: [], + interests: [], + references: [] + }; + + structure.basics = this.getDefaultBasic(); + structure.work.push(this.getDefaultWork()); + structure.volunteer.push(this.getDefaultVolunteer()); + structure.education.push(this.getDefaultEducation()); + structure.awards.push(this.getDefaultAward()); + structure.publications.push(this.getDefaultPublication()); + structure.skills.push(this.getDefaultSkill()); + structure.languages.push(this.getDefaultLanguage()); + structure.interests.push(this.getDefaultInterest()); + structure.references.push(this.getDefaultReference()); + + return structure; + }, + + getDefaultBasic: function() + { + return { + name: "", + label: "", + picture: "", + email: "", + phone: "", + website: "", + summary: "", + location: { + address: "", + postalCode: "", + city: "", + countryCode: "", + region: "", + }, + profiles: [ + { + network: "", + username: "", + url: "", + } + ] + }; + }, + + getDefaultBasicProfile: function() + { + return { + network: "", + username: "", + url: "", + }; + }, + + getDefaultWork: function() + { + return { + company: "", + position: "", + website: "", + startDate: "", + endDate: "", + summary: "", + highlights: [""] + }; + }, + + getDefaultWorkHighlight: function() + { + return ""; + }, + + getDefaultVolunteer: function() + { + return { + organization: "", + position: "", + website: "", + startDate: "", + endDate: "", + summary: "", + highlights: [""] + }; + }, + + getDefaulVolunteerHighlight: function() + { + return ""; + }, + + getDefaultEducation: function() + { + return { + institution: "", + area: "", + studyType: "", + startDate: "", + endDate: "", + gpa: "", + courses: [""] + }; + }, + + getDefaultEducationCourse: function() + { + return ""; + }, + + getDefaultAward: function() + { + return { + title: "", + date: "", + awarder: "", + summary: "" + }; + }, + + getDefaultPublication: function() + { + return { + name: "", + publisher: "", + releaseDate: "", + website: "", + summary: "" + }; + }, + + getDefaultSkill: function() + { + return { + name: "", + level: "", + keywords: [""] + }; + }, + + getDefaultSkillKeywoard: function() + { + return ""; + }, + + getDefaultLanguage: function() + { + return { + language: "", + fluency: "" + }; + }, + + getDefaultInterest: function() + { + return { + name: "", + keywords: [""] + }; + }, + + getDefaultInterestKeywoard: function() + { + return ""; + }, + + getDefaultReference: function() + { + return { + name: "", + reference: "" + }; + } } \ No newline at end of file