gitadmin
/
profile-studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIPing up some forms

This commit is contained in:
Jason Snelders 2019-11-12 20:21:28 +11:00
parent add35e788f
commit 9e58fcdaee
8 changed files with 300 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/app.js
View File

@ -345,7 +345,7 @@ var app = new Vue({
startDate: "", startDate: "",
endDate: "", endDate: "",
summary: "", summary: "",
highlights: [] highlights: [""]
}; };
}, },
@ -363,7 +363,7 @@ var app = new Vue({
startDate: "", startDate: "",
endDate: "", endDate: "",
summary: "", summary: "",
highlights: [] highlights: [""]
}; };
}, },
@ -381,7 +381,7 @@ var app = new Vue({
startDate: "", startDate: "",
endDate: "", endDate: "",
gpa: "", gpa: "",
courses: [] courses: [""]
}; };
}, },
@ -416,7 +416,7 @@ var app = new Vue({
return { return {
name: "", name: "",
level: "", level: "",
keywords: [] keywords: [""]
}; };
}, },
@ -437,7 +437,7 @@ var app = new Vue({
{ {
return { return {
name: "", name: "",
keywords: [] keywords: [""]
}; };
}, },

3
components/section_basics.js
View File

@ -73,7 +73,8 @@ var sectionBasicsComponent = {
methods: { methods: {
addProfile: function() addProfile: function()
{ {
var item = this.$root.getDefaultBasicProfile();
this.$root.sections.basics.profiles.push(item);
} }
} }
}; };

7
components/section_education.js
View File

@ -27,6 +27,11 @@ var sectionEducationComponent = {
methods: { methods: {
addCourse: function(index)
{
var item = this.$root.getDefaultEducationCourse();
//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
this.$root.sections.education[index].courses.push(item);
}
} }
}; };

7
components/section_interests.js
View File

@ -27,6 +27,11 @@ var sectionInterestsComponent = {
methods: { methods: {
addKeyword: function(index)
{
var item = this.$root.getDefaultInterestKeywoard();
//console.log("addHighlight(" + index + ")", this.$root.sections.interests[index]);
this.$root.sections.interests[index].keywords.push(item);
}
} }
}; };

7
components/section_skills.js
View File

@ -27,6 +27,11 @@ var sectionSkillsComponent = {
methods: { methods: {
addKeyword: function(index)
{
var item = this.$root.getDefaultSkillKeywoard();
//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
this.$root.sections.skills[index].keywords.push(item);
}
} }
}; };

7
components/section_volunteer.js
View File

@ -27,6 +27,11 @@ var sectionVolunteerComponent = {
methods: { methods: {
addHighlight: function(index)
{
var item = this.$root.getDefaulVolunteerHighlight();
//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
this.$root.sections.volunteer[index].highlights.push(item);
}
} }
}; };

7
components/section_work.js
View File

@ -27,6 +27,11 @@ var sectionWorkComponent = {
methods: { methods: {
addHighlight: function(index)
{
var item = this.$root.getDefaultWorkHighlight();
console.log("addHighlight(" + index + ")", this.$root.sections.work[index]);
this.$root.sections.work[index].highlights.push(item);
}
} }
}; };

535
index.html
View File

@ -210,26 +210,24 @@
</form> </form>
<h5 class="margin-top-32">Social Network Profiles</h5> <h5 class="margin-top-32">Social Network Profiles</h5>
<button class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addProfile">+ Add Profile</button> <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addProfile">+ Add Profile</button>
<form class="w3-container w3-card-4 w3-margin-top"> <form class="w3-container w3-card-4 w3-margin-top" v-for="profile in $root.sections.basics.profiles">
<div v-for="profile in $root.sections.basics.profiles"> <p>
<p> <label for="profiles.network" class="w3-text-blue"><b>Network</b></label>
<label for="profiles.network" class="w3-text-blue"><b>Network</b></label> <input id="profiles.network" class="w3-input w3-border" type="text" v-model="profile.network">
<input id="profiles.network" class="w3-input w3-border" type="text" v-model="profile.network"> <small id="networkHelp" class="form-help text-muted">Name of the network</small>
<small id="networkHelp" class="form-help text-muted">Name of the network</small> </p>
</p> <p>
<p> <label for="profiles.username" class="w3-text-blue"><b>Username</b></label>
<label for="profiles.username" class="w3-text-blue"><b>Username</b></label> <input id="profiles.username" class="w3-input w3-border" type="text" v-model="profile.username">
<input id="profiles.username" class="w3-input w3-border" type="text" v-model="profile.username"> <small id="usernameHelp" class="form-help text-muted">Your username in the network</small>
<small id="usernameHelp" class="form-help text-muted">Your username in the network</small> </p>
</p> <p>
<p> <label for="profiles.url" class="w3-text-blue"><b>URL</b></label>
<label for="profiles.url" class="w3-text-blue"><b>URL</b></label> <input id="profiles.url" class="w3-input w3-border" type="text" v-model="profile.url">
<input id="profiles.url" class="w3-input w3-border" type="text" v-model="profile.url"> <small id="urlHelp" class="form-help text-muted">URL to your profile in the network</small>
<small id="urlHelp" class="form-help text-muted">URL to your profile in the network</small> </p>
</p>
</div>
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
@ -250,13 +248,14 @@
<preview-field label="City" v-bind:value="$root.sections.basics.location.city"></preview-field> <preview-field label="City" v-bind:value="$root.sections.basics.location.city"></preview-field>
<preview-field label="Country Code" v-bind:value="$root.sections.basics.location.countryCode"></preview-field> <preview-field label="Country Code" v-bind:value="$root.sections.basics.location.countryCode"></preview-field>
<preview-field label="Region" v-bind:value="$root.sections.basics.location.region"></preview-field> <preview-field label="Region" v-bind:value="$root.sections.basics.location.region"></preview-field>
</div>
<div class="w3-container">
<h5 class="margin-top-32">Social Network Profiles</h5> <h5 class="margin-top-32">Social Network Profiles</h5>
<div v-for="profile in $root.sections.basics.profiles"> </div>
<preview-field label="Network" v-bind:value="profile.network"></preview-field> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left w3-margin-top" v-for="profile in $root.sections.basics.profiles">
<preview-field label="Username" v-bind:value="profile.username"></preview-field> <preview-field label="Network" v-bind:value="profile.network"></preview-field>
<preview-field label="URL" v-bind:value="profile.url"></preview-field> <preview-field label="Username" v-bind:value="profile.username"></preview-field>
</div> <preview-field label="URL" v-bind:value="profile.url"></preview-field>
</div> </div>
</div> </div>
</div> </div>
@ -270,67 +269,65 @@
<div id="section-work-root"> <div id="section-work-root">
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4"> <form class="w3-container w3-card-4" v-for="(work, w_index) in $root.sections.work">
<div> <p>
<p> <label for="company" class="w3-text-blue required-field"><b>Company</b></label>
<label for="company" class="w3-text-blue required-field"><b>Company</b></label> <input id="company" class="w3-input w3-border" type="text" v-model="work.company" required>
<input id="company" class="w3-input w3-border" type="text" v-model="$root.sections.work[0].company" required> <small id="companyHelp" class="form-help text-muted">Name of the company or organisation.</small>
<small id="companyHelp" class="form-help text-muted">Name of the company or organisation.</small> </p>
</p> <p>
<p> <label for="position" class="w3-text-blue required-field"><b>Position</b></label>
<label for="position" class="w3-text-blue required-field"><b>Position</b></label> <input id="position" class="w3-input w3-border" type="text" v-model="work.position" required>
<input id="position" class="w3-input w3-border" type="text" v-model="$root.sections.work[0].position" required> <small id="positionHelp" class="form-help text-muted">Role or position title.</small>
<small id="positionHelp" class="form-help text-muted">Role or position title.</small> </p>
</p> <p>
<p> <label for="website" class="w3-text-blue"><b>Website</b></label>
<label for="website" class="w3-text-blue"><b>Website</b></label> <input id="website" class="w3-input w3-border" type="text" v-model="work.website">
<input id="website" class="w3-input w3-border" type="text" v-model="$root.sections.work[0].website"> <small id="websiteHelp" class="form-help text-muted">Company website.</small>
<small id="websiteHelp" class="form-help text-muted">Company website.</small> </p>
</p> <p>
<p> <label for="startDate" class="w3-text-blue"><b>Start Date</b></label>
<label for="startDate" class="w3-text-blue"><b>Start Date</b></label> <input id="startDate" class="w3-input w3-border" type="text" v-model="work.startDate" required>
<input id="startDate" class="w3-input w3-border" type="text" v-model="$root.sections.work[0].startDate" required> <small id="startDateHelp" class="form-help text-muted">Date you started work (full date or month and year)</small>
<small id="startDateHelp" class="form-help text-muted">Date you started work (full date or month and year)</small> </p>
</p> <p>
<p> <label for="endDate" class="w3-text-blue"><b>End Date</b></label>
<label for="endDate" class="w3-text-blue"><b>End Date</b></label> <input id="endDate" class="w3-input w3-border" type="text" v-model="work.endDate">
<input id="endDate" class="w3-input w3-border" type="text" v-model="$root.sections.work[0].endDate"> <small id="endDateHelp" class="form-help text-muted">End date (if not current).</small>
<small id="endDateHelp" class="form-help text-muted">End date (if not current).</small> </p>
</p> <p>
<p> <label for="summary" class="w3-text-blue"><b>Summary</b></label>
<label for="summary" class="w3-text-blue"><b>Summary</b></label> <textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="work.summary"></textarea>
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="$root.sections.work[0].summary"></textarea> <small id="summaryHelp" class="form-help text-muted">Details of your work, responsibilities and achievements. And a little about the company.</small>
<small id="summaryHelp" class="form-help text-muted">Details of your work, responsibilities and achievements. And a little about the company.</small> </p>
</p>
<h5 class="margin-top-32">Highlights</h5> <h5 class="margin-top-32">Highlights</h5>
<small id="highlightsHelp" class="form-help text-muted">Short sentences and highlights of the position.</small> <small id="highlightsHelp" class="form-help text-muted">Short sentences and highlights of the position.</small>
<ol>
<li> <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addHighlight(w_index)">+ Add Highlight</button>
<input id="highlights[0]" class="w3-input w3-border" type="text" v-model="$root.sections.work[0].highlights[0]"> <ol>
</li> <li v-for="(highlight, h_index) in work.highlights">
</ol> <input class="w3-input w3-border" type="text" v-model="$root.sections.work[w_index].highlights[h_index]">
</div> </li>
</ol>
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(work, w_index) in $root.sections.work">
<div> <preview-field label="Company" v-bind:value="work.company"></preview-field>
<preview-field label="Company" v-bind:value="$root.sections.work[0].company"></preview-field> <preview-field label="Position" v-bind:value="work.position"></preview-field>
<preview-field label="Position" v-bind:value="$root.sections.work[0].position"></preview-field> <preview-field label="Website" v-bind:value="work.website" format="url"></preview-field>
<preview-field label="Website" v-bind:value="$root.sections.work[0].website" format="url"></preview-field> <preview-field label="Start Date" v-bind:value="work.startDate" format="date"></preview-field>
<preview-field label="Start Date" v-bind:value="$root.sections.work[0].startDate" format="date"></preview-field> <preview-field label="End Date" v-bind:value="work.endDate" format="date"></preview-field>
<preview-field label="End Date" v-bind:value="$root.sections.work[0].endDate" format="date"></preview-field> <preview-field label="Summary" v-bind:value="work.summary" format="multi-line"></preview-field>
<preview-field label="Summary" v-bind:value="$root.sections.work[0].summary" format="multi-line"></preview-field>
<h5 class="margin-top-32">Highlights</h5> <h5 class="margin-top-32">Highlights</h5>
<ol> <ol>
<li> <li v-for="(highlight, h_index) in work.highlights">
<preview-field label="" v-bind:value="$root.sections.work[0].highlights[0]" format="list-item"></preview-field> <preview-field label="" v-bind:value="$root.sections.work[w_index].highlights[h_index]" format="list-item"></preview-field>
</li> </li>
</ol> </ol>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -343,45 +340,47 @@
<div id="section-volunteer-root"> <div id="section-volunteer-root">
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4"> <form class="w3-container w3-card-4" v-for="(vol, v_index) in $root.sections.volunteer">
<div> <div>
<p> <p>
<label for="organization" class="w3-text-blue required-field"><b>Organisation</b></label> <label for="organization" class="w3-text-blue required-field"><b>Organisation</b></label>
<input id="organization" class="w3-input w3-border" type="text" v-model="$root.sections.volunteer[0].organization" required> <input id="organization" class="w3-input w3-border" type="text" v-model="vol.organization" required>
<small id="organizationHelp" class="form-help text-muted">Name of the organisation you volunteered for.</small> <small id="organizationHelp" class="form-help text-muted">Name of the organisation you volunteered for.</small>
</p> </p>
<p> <p>
<label for="position" class="w3-text-blue required-field"><b>Position</b></label> <label for="position" class="w3-text-blue required-field"><b>Position</b></label>
<input id="position" class="w3-input w3-border" type="text" v-model="$root.sections.volunteer[0].position" required> <input id="position" class="w3-input w3-border" type="text" v-model="vol.position" required>
<small id="positionHelp" class="form-help text-muted">Role or position title.</small> <small id="positionHelp" class="form-help text-muted">Role or position title.</small>
</p> </p>
<p> <p>
<label for="website" class="w3-text-blue"><b>Website</b></label> <label for="website" class="w3-text-blue"><b>Website</b></label>
<input id="website" class="w3-input w3-border" type="text" v-model="$root.sections.volunteer[0].website"> <input id="website" class="w3-input w3-border" type="text" v-model="vol.website">
<small id="websiteHelp" class="form-help text-muted">Company website.</small> <small id="websiteHelp" class="form-help text-muted">Company website.</small>
</p> </p>
<p> <p>
<label for="startDate" class="w3-text-blue"><b>Start Date</b></label> <label for="startDate" class="w3-text-blue"><b>Start Date</b></label>
<input id="startDate" class="w3-input w3-border" type="text" v-model="$root.sections.volunteer[0].startDate" required> <input id="startDate" class="w3-input w3-border" type="text" v-model="vol.startDate" required>
<small id="startDateHelp" class="form-help text-muted">Date you started work (full date or month and year)</small> <small id="startDateHelp" class="form-help text-muted">Date you started work (full date or month and year)</small>
</p> </p>
<p> <p>
<label for="endDate" class="w3-text-blue"><b>End Date</b></label> <label for="endDate" class="w3-text-blue"><b>End Date</b></label>
<input id="endDate" class="w3-input w3-border" type="text" v-model="$root.sections.volunteer[0].endDate"> <input id="endDate" class="w3-input w3-border" type="text" v-model="vol.endDate">
<small id="endDateHelp" class="form-help text-muted">End date (if not current).</small> <small id="endDateHelp" class="form-help text-muted">End date (if not current).</small>
</p> </p>
<p> <p>
<label for="summary" class="w3-text-blue"><b>Summary</b></label> <label for="summary" class="w3-text-blue"><b>Summary</b></label>
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="$root.sections.volunteer[0].summary"></textarea> <textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="vol.summary"></textarea>
<small id="summaryHelp" class="form-help text-muted">Details of your work, responsibilities and achievements. And a little about the company.</small> <small id="summaryHelp" class="form-help text-muted">Details of your work, responsibilities and achievements. And a little about the company.</small>
</p> </p>
<h5 class="margin-top-32">Highlights</h5> <h5 class="margin-top-32">Highlights</h5>
<small id="highlightsHelp" class="form-help text-muted">Short sentences and highlights of the position.</small> <small id="highlightsHelp" class="form-help text-muted">Short sentences and highlights of the position.</small>
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addHighlight(v_index)">+ Add Highlight</button>
<ol> <ol>
<li> <li v-for="(highlight, h_index) in vol.highlights">
<input id="highlights[0]" class="w3-input w3-border" type="text" v-model="$root.sections.volunteer[0].highlights[0]"> <input class="w3-input w3-border" type="text" v-model="$root.sections.volunteer[v_index].highlights[h_index]">
</li> </li>
</ol> </ol>
</div> </div>
@ -389,18 +388,18 @@
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left">
<div> <div v-for="(vol, v_index) in $root.sections.volunteer">
<preview-field label="Organisation" v-bind:value="$root.sections.volunteer[0].organization"></preview-field> <preview-field label="Organisation" v-bind:value="vol.organization"></preview-field>
<preview-field label="Position" v-bind:value="$root.sections.volunteer[0].position"></preview-field> <preview-field label="Position" v-bind:value="vol.position"></preview-field>
<preview-field label="Website" v-bind:value="$root.sections.volunteer[0].website" format="url"></preview-field> <preview-field label="Website" v-bind:value="vol.website" format="url"></preview-field>
<preview-field label="Start Date" v-bind:value="$root.sections.volunteer[0].startDate"></preview-field> <preview-field label="Start Date" v-bind:value="vol.startDate"></preview-field>
<preview-field label="End Date" v-bind:value="$root.sections.volunteer[0].endDate"></preview-field> <preview-field label="End Date" v-bind:value="vol.endDate"></preview-field>
<preview-field label="Summary" v-bind:value="$root.sections.volunteer[0].summary" format="multi-line"></preview-field> <preview-field label="Summary" v-bind:value="vol.summary" format="multi-line"></preview-field>
<h5 class="margin-top-32">Highlights</h5> <h5 class="margin-top-32">Highlights</h5>
<ol> <ol>
<li> <li v-for="(highlight, h_index) in vol.highlights">
<preview-field label="" v-bind:value="$root.sections.volunteer[0].highlights[0]" format="list-item"></preview-field> <preview-field label="" v-bind:value="$root.sections.volunteer[v_index].highlights[h_index]" format="list-item"></preview-field>
</li> </li>
</ol> </ol>
</div> </div>
@ -416,66 +415,64 @@
<div id="section-education-root"> <div id="section-education-root">
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4"> <form class="w3-container w3-card-4" v-for="(edu, e_index) in $root.sections.education">
<div> <p>
<p> <label for="institution" class="w3-text-blue required-field"><b>Institution</b></label>
<label for="institution" class="w3-text-blue required-field"><b>Institution</b></label> <input id="institution" class="w3-input w3-border" type="text" v-model="edu.institution" required>
<input id="institution" class="w3-input w3-border" type="text" v-model="$root.sections.education[0].institution" required> <small id="institutionHelp" class="form-help text-muted">Name of the institution.</small>
<small id="institutionHelp" class="form-help text-muted">Name of the institution.</small> </p>
</p> <p>
<p> <label for="area" class="w3-text-blue required-field"><b>Area</b></label>
<label for="area" class="w3-text-blue required-field"><b>Area</b></label> <input id="area" class="w3-input w3-border" type="text" v-model="edu.area" required>
<input id="area" class="w3-input w3-border" type="text" v-model="$root.sections.education[0].area" required> <small id="areaHelp" class="form-help text-muted">Area of interest.</small>
<small id="areaHelp" class="form-help text-muted">Area of interest.</small> </p>
</p> <p>
<p> <label for="studyType" class="w3-text-blue"><b>Study Type</b></label>
<label for="studyType" class="w3-text-blue"><b>Study Type</b></label> <input id="studyType" class="w3-input w3-border" type="text" v-model="edu.studyType">
<input id="studyType" class="w3-input w3-border" type="text" v-model="$root.sections.education[0].studyType"> <small id="studyTypeeHelp" class="form-help text-muted">Type of study.</small>
<small id="studyTypeeHelp" class="form-help text-muted">Type of study.</small> </p>
</p> <p>
<p> <label for="startDate" class="w3-text-blue"><b>Start Date</b></label>
<label for="startDate" class="w3-text-blue"><b>Start Date</b></label> <input id="startDate" class="w3-input w3-border" type="text" v-model="edu.startDate" required>
<input id="startDate" class="w3-input w3-border" type="text" v-model="$root.sections.education[0].startDate" required> <small id="startDateHelp" class="form-help text-muted">Date you started</small>
<small id="startDateHelp" class="form-help text-muted">Date you started</small> </p>
</p> <p>
<p> <label for="endDate" class="w3-text-blue"><b>End Date</b></label>
<label for="endDate" class="w3-text-blue"><b>End Date</b></label> <input id="endDate" class="w3-input w3-border" type="text" v-model="edu.endDate">
<input id="endDate" class="w3-input w3-border" type="text" v-model="$root.sections.education[0].endDate"> <small id="endDateHelp" class="form-help text-muted">Date completed study.</small>
<small id="endDateHelp" class="form-help text-muted">Date completed study.</small> </p>
</p> <p>
<p> <label for="gpa" class="w3-text-blue"><b>GPA</b></label>
<label for="gpa" class="w3-text-blue"><b>GPA</b></label> <input id="gpa" class="w3-input w3-border" type="text" v-model="edu.gpa">
<input id="gpa" class="w3-input w3-border" type="text" v-model="$root.sections.education[0].gpa"> <small id="gpaHelp" class="form-help text-muted">GPA</small>
<small id="gpaHelp" class="form-help text-muted">GPA</small> </p>
</p>
<h5 class="margin-top-32">Courses</h5> <h5 class="margin-top-32">Courses</h5>
<small id="highlightsHelp" class="form-help text-muted">Names of any courses taken.</small> <small id="highlightsHelp" class="form-help text-muted">Names of any courses taken.</small>
<ol>
<li> <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addCourse(e_index)">+ Add Course</button>
<input id="courses[0]" class="w3-input w3-border" type="text" v-model="$root.sections.education[0].courses[0]"> <ol>
</li> <li v-for="(course, c_index) in edu.courses">
</ol> <input class="w3-input w3-border" type="text" v-model="$root.sections.education[e_index].courses[c_index]">
</div> </li>
</ol>
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(edu, e_index) in $root.sections.education">
<div> <preview-field label="Institution" v-bind:value="edu.institution"></preview-field>
<preview-field label="Institution" v-bind:value="$root.sections.education[0].institution"></preview-field> <preview-field label="Area" v-bind:value="edu.area"></preview-field>
<preview-field label="Area" v-bind:value="$root.sections.education[0].area"></preview-field> <preview-field label="Study Type" v-bind:value="edu.studyType"></preview-field>
<preview-field label="Study Type" v-bind:value="$root.sections.education[0].studyType"></preview-field> <preview-field label="Start Date" v-bind:value="edu.startDate" format="date"></preview-field>
<preview-field label="Start Date" v-bind:value="$root.sections.education[0].startDate" format="date"></preview-field> <preview-field label="End Date" v-bind:value="edu.endDate" format="date"></preview-field>
<preview-field label="End Date" v-bind:value="$root.sections.education[0].endDate" format="date"></preview-field> <preview-field label="GPA" v-bind:value="edu.gpa"></preview-field>
<preview-field label="GPA" v-bind:value="$root.sections.education[0].gpa"></preview-field>
<h5 class="margin-top-32">Courses</h5> <h5 class="margin-top-32">Courses</h5>
<ol> <ol>
<li> <li v-for="(course, c_index) in edu.courses">
<preview-field label="" v-bind:value="$root.sections.education[0].courses[0]" format="list-item"></preview-field> <preview-field label="" v-bind:value="$root.sections.education[e_index].courses[c_index]" format="list-item"></preview-field>
</li> </li>
</ol> </ol>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -488,39 +485,35 @@
<div id="section-awards-root"> <div id="section-awards-root">
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4"> <form class="w3-container w3-card-4" v-for="(award, a_index) in $root.sections.awards">
<div> <p>
<p> <label for="title" class="w3-text-blue required-field"><b>Title</b></label>
<label for="title" class="w3-text-blue required-field"><b>Title</b></label> <input id="title" class="w3-input w3-border" type="text" v-model="award.title" required>
<input id="title" class="w3-input w3-border" type="text" v-model="$root.sections.awards[0].title" required> <small id="titleHelp" class="form-help text-muted">Name of the award.</small>
<small id="titleHelp" class="form-help text-muted">Name of the award.</small> </p>
</p> <p>
<p> <label for="date" class="w3-text-blue required-field"><b>Date</b></label>
<label for="date" class="w3-text-blue required-field"><b>Date</b></label> <input id="date" class="w3-input w3-border" type="text" v-model="award.date" required>
<input id="date" class="w3-input w3-border" type="text" v-model="$root.sections.awards[0].date" required> <small id="dateHelp" class="form-help text-muted">When the award was received</small>
<small id="dateHelp" class="form-help text-muted">When the award was received</small> </p>
</p> <p>
<p> <label for="awarder" class="w3-text-blue"><b>Awarder</b></label>
<label for="awarder" class="w3-text-blue"><b>Awarder</b></label> <input id="awarder" class="w3-input w3-border" type="text" v-model="award.awarder">
<input id="awarder" class="w3-input w3-border" type="text" v-model="$root.sections.awards[0].awarder"> <small id="awarderHelp" class="form-help text-muted">Who gave the aware.</small>
<small id="awarderHelp" class="form-help text-muted">Who gave the aware.</small> </p>
</p> <p>
<p> <label for="summary" class="w3-text-blue"><b>Summary</b></label>
<label for="summary" class="w3-text-blue"><b>Summary</b></label> <textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="award.summary"></textarea>
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="$root.sections.awards[0].summary"></textarea> <small id="summaryHelp" class="form-help text-muted">Describe the award and circumstances.</small>
<small id="summaryHelp" class="form-help text-muted">Describe the award and circumstances.</small> </p>
</p>
</div>
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(award, a_index) in $root.sections.awards">
<div> <preview-field label="Title" v-bind:value="award.title"></preview-field>
<preview-field label="Title" v-bind:value="$root.sections.awards[0].title"></preview-field> <preview-field label="Date" v-bind:value="award.date"></preview-field>
<preview-field label="Date" v-bind:value="$root.sections.awards[0].date"></preview-field> <preview-field label="Awarder" v-bind:value="award.awarder"></preview-field>
<preview-field label="Awarder" v-bind:value="$root.sections.awards[0].awarder"></preview-field> <preview-field label="Summary" v-bind:value="award.summary" format="multi-line"></preview-field>
<preview-field label="Summary" v-bind:value="$root.sections.awards[0].summary" format="multi-line"></preview-field>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -533,45 +526,41 @@
<div id="section-publications-root"> <div id="section-publications-root">
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4"> <form class="w3-container w3-card-4" v-for="(publication, p_index) in $root.sections.publications">
<div> <p>
<p> <label for="name" class="w3-text-blue required-field"><b>Name</b></label>
<label for="name" class="w3-text-blue required-field"><b>Name</b></label> <input id="name" class="w3-input w3-border" type="text" v-model="publication.name" required>
<input id="name" class="w3-input w3-border" type="text" v-model="$root.sections.publications[0].name" required> <small id="nameHelp" class="form-help text-muted">Name of the article.</small>
<small id="nameHelp" class="form-help text-muted">Name of the article.</small> </p>
</p> <p>
<p> <label for="publisher" class="w3-text-blue required-field"><b>Publisher</b></label>
<label for="publisher" class="w3-text-blue required-field"><b>Publisher</b></label> <input id="publisher" class="w3-input w3-border" type="text" v-model="publication.publisher" required>
<input id="publisher" class="w3-input w3-border" type="text" v-model="$root.sections.publications[0].publisher" required> <small id="publisherHelp" class="form-help text-muted">Name of the publication.</small>
<small id="publisherHelp" class="form-help text-muted">Name of the publication.</small> </p>
</p> <p>
<p> <label for="releaseDate" class="w3-text-blue"><b>Release Date</b></label>
<label for="releaseDate" class="w3-text-blue"><b>Release Date</b></label> <input id="releaseDate" class="w3-input w3-border" type="text" v-model="publication.releaseDate" required>
<input id="releaseDate" class="w3-input w3-border" type="text" v-model="$root.sections.publications[0].releaseDate" required> <small id="releaseDateDateHelp" class="form-help text-muted">When it was published (full date or month and year)</small>
<small id="releaseDateDateHelp" class="form-help text-muted">When it was published (full date or month and year)</small> </p>
</p> <p>
<p> <label for="website" class="w3-text-blue"><b>Website</b></label>
<label for="website" class="w3-text-blue"><b>Website</b></label> <input id="website" class="w3-input w3-border" type="text" v-model="publication.website">
<input id="website" class="w3-input w3-border" type="text" v-model="$root.sections.publications[0].website"> <small id="websiteHelp" class="form-help text-muted">Publication website.</small>
<small id="websiteHelp" class="form-help text-muted">Publication website.</small> </p>
</p> <p>
<p> <label for="summary" class="w3-text-blue"><b>Summary</b></label>
<label for="summary" class="w3-text-blue"><b>Summary</b></label> <textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="publication.summary"></textarea>
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="$root.sections.publications[0].summary"></textarea> <small id="summaryHelp" class="form-help text-muted">Details of the article.</small>
<small id="summaryHelp" class="form-help text-muted">Details of the article.</small> </p>
</p>
</div>
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(publication, p_index) in $root.sections.publications">
<div> <preview-field label="Name" v-bind:value="publication.name"></preview-field>
<preview-field label="Name" v-bind:value="$root.sections.publications[0].name"></preview-field> <preview-field label="Publisher" v-bind:value="publication.publisher"></preview-field>
<preview-field label="Publisher" v-bind:value="$root.sections.publications[0].publisher"></preview-field> <preview-field label="Release Date" v-bind:value="publication.releaseDate"></preview-field>
<preview-field label="Release Date" v-bind:value="$root.sections.publications[0].releaseDate"></preview-field> <preview-field label="Website" v-bind:value="publication.website" format="url"></preview-field>
<preview-field label="Website" v-bind:value="$root.sections.publications[0].website" format="url"></preview-field> <preview-field label="Summary" v-bind:value="publication.summary" format="multi-line"></preview-field>
<preview-field label="Summary" v-bind:value="$root.sections.publications[0].summary" format="multi-line"></preview-field>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -584,42 +573,40 @@
<div id="section-skills-root"> <div id="section-skills-root">
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4"> <form class="w3-container w3-card-4" v-for="(skill, s_index) in $root.sections.skills">
<div> <p>
<p> <label for="name" class="w3-text-blue required-field"><b>Name</b></label>
<label for="name" class="w3-text-blue required-field"><b>Name</b></label> <input id="name" class="w3-input w3-border" type="text" v-model="skill.name" required>
<input id="name" class="w3-input w3-border" type="text" v-model="$root.sections.skills[0].name" required> <small id="nameHelp" class="form-help text-muted">Name of a particular skill or a group of skills.</small>
<small id="nameHelp" class="form-help text-muted">Name of a particular skill or a group of skills.</small> </p>
</p> <p>
<p> <label for="level" class="w3-text-blue required-field"><b>Level</b></label>
<label for="level" class="w3-text-blue required-field"><b>Level</b></label> <input id="level" class="w3-input w3-border" type="text" v-model="skill.level" required>
<input id="level" class="w3-input w3-border" type="text" v-model="$root.sections.skills[0].level" required> <small id="levelHelp" class="form-help text-muted">Your level of experience.</small>
<small id="levelHelp" class="form-help text-muted">Your level of experience.</small> </p>
</p>
<h5 class="margin-top-32">Keywords</h5> <h5 class="margin-top-32">Keywords</h5>
<small id="keywordsHelp" class="form-help text-muted">Keywords.</small> <small id="keywordsHelp" class="form-help text-muted">Keywords.</small>
<ol>
<li> <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addKeyword(s_index)">+ Add Keyword</button>
<input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.skills[0].keywords[0]"> <ol>
</li> <li v-for="(keyword, k_index) in skill.keywords">
</ol> <input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.skills[s_index].keywords[k_index]">
</div> </li>
</ol>
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(skill, s_index) in $root.sections.skills">
<div> <preview-field label="Name" v-bind:value="skill.name"></preview-field>
<preview-field label="Name" v-bind:value="$root.sections.skills[0].name"></preview-field> <preview-field label="Level" v-bind:value="skill.level"></preview-field>
<preview-field label="Level" v-bind:value="$root.sections.skills[0].level"></preview-field>
<h5 class="margin-top-32">Keywords</h5> <h5 class="margin-top-32">Keywords</h5>
<ol> <ol>
<li> <li v-for="(keyword, k_index) in skill.keywords">
<preview-field label="" v-bind:value="$root.sections.skills[0].keywords[0]" format="list-item"></preview-field> <preview-field label="" v-bind:value="$root.sections.skills[s_index].keywords[k_index]" format="list-item"></preview-field>
</li> </li>
</ol> </ol>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -665,37 +652,35 @@
<div id="section-interests-root"> <div id="section-interests-root">
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4"> <form class="w3-container w3-card-4" v-for="(interest, i_index) in $root.sections.interests">
<div> <p>
<p> <label for="name" class="w3-text-blue required-field"><b>Name</b></label>
<label for="name" class="w3-text-blue required-field"><b>Name</b></label> <input id="name" class="w3-input w3-border" type="text" v-model="interest.name" required>
<input id="name" class="w3-input w3-border" type="text" v-model="$root.sections.interests[0].name" required> <small id="nameHelp" class="form-help text-muted">Name of the intest.</small>
<small id="nameHelp" class="form-help text-muted">Name of the intest.</small> </p>
</p>
<h5 class="margin-top-32">Keywords</h5> <h5 class="margin-top-32">Keywords</h5>
<small id="keywordsHelp" class="form-help text-muted">Keywords relating to the interest.</small> <small id="keywordsHelp" class="form-help text-muted">Keywords relating to the interest.</small>
<ol>
<li> <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addKeyword(i_index)">+ Add Keyword</button>
<input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.interests[0].keywords[0]"> <ol>
</li> <li v-for="(keyword, k_index) in interest.keywords">
</ol> <input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.interests[i_index].keywords[k_index]">
</div> </li>
</ol>
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(interest, i_index) in $root.sections.interests">
<div> <preview-field label="Name" v-bind:value="interest.name"></preview-field>
<preview-field label="Name" v-bind:value="$root.sections.interests[0].name"></preview-field>
<h5 class="margin-top-32">Keywords</h5> <h5 class="margin-top-32">Keywords</h5>
<ol> <ol>
<li> <li v-for="(keyword, k_index) in interest.keywords">
<preview-field label="" v-bind:value="$root.sections.interests[0].keywords[0]" format="list-item"></preview-field> <preview-field label="" v-bind:value="$root.sections.interests[i_index].keywords[k_index]" format="list-item"></preview-field>
</li> </li>
</ol> </ol>
</div>
</div> </div>
</div> </div>
</div> </div>