RuhNetConsulting
/
Adminator-admin-dashboard
mirror of https://github.com/puikinsh/Adminator-admin-dashboard
1
0
Fork 0
Code Issues 0 Projects 0 Releases 16 Wiki Activity
Browse Source

Added user form 

Added user form script
Updated imports of index

TODO: Visa still hardcoded, needs DB
pull/144/head
Mohammed Tantawy 7 years ago
parent
0e263a1ee6
commit
0b333c8790
5 changed files with 88 additions and 235 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -3
      package.json
  2. +1
    -0
      server.js
  3. +1
    -0
      src/assets/scripts/index.js
  4. +82
    -0
      src/assets/scripts/user-form/index.js
  5. +2
    -232
      src/forms.html

+ 2
- 3
package.json View File

@ -13,8 +13,7 @@
"lint:scss": "stylelint ./src/**/*.scss --syntax scss", "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
"lint": "npm run lint:js && npm run lint:scss" "lint": "npm run lint:js && npm run lint:scss"
}, },
"devDependencies": {
},
"devDependencies": {},
"dependencies": { "dependencies": {
"babel-core": "^6.26.0", "babel-core": "^6.26.0",
"babel-eslint": "^8.0.1", "babel-eslint": "^8.0.1",
@ -65,4 +64,4 @@
"popper.js": "^1.12.6", "popper.js": "^1.12.6",
"skycons": "^1.0.0" "skycons": "^1.0.0"
} }
}
}

+ 1
- 0
server.js View File

@ -9,3 +9,4 @@ app.use('/', express.static(__dirname + '/build'));
const server = app.listen(process.env.PORT || 3000, function () { const server = app.listen(process.env.PORT || 3000, function () {
console.log('Server started at http://localhost:%s', server.address().port); console.log('Server started at http://localhost:%s', server.address().port);
}

+ 1
- 0
src/assets/scripts/index.js View File

@ -15,3 +15,4 @@ import './email';
import './fullcalendar'; import './fullcalendar';
import './googleMaps'; import './googleMaps';
import './utils'; import './utils';
import './user-form';

+ 82
- 0
src/assets/scripts/user-form/index.js View File

@ -0,0 +1,82 @@
import * as $ from 'jquery';
const schemeJson = [
{name: "full_name", type: "text", required: true, label: "Full name" },
{name: "dob", type: "date", required: true, label: "Date of Birth" },
{name: "arrived", type: "date", required: true, label: "Arrived in Australia" },
{name: "visa", type: "dropdown", required: true, label: "Visa Type",
dropdown: [
{
id: 0,
name: "417 Working Holiday 1st yr"
},
{
id: 1,
name: "417 Working Holiday 2nd yr"
},
{
id: 2,
name: "417 Working Holiday 3rd yr"
},
{
id: 3,
name: "462 Work and Holiday"
},
{
id: 4,
name: "600 Student"
}
]
},
{name: "skills", type: "tags", required: true, label: "Skills" },
];
let formHtml = '';
for (let key in schemeJson) {
let field = schemeJson[key];
let visas = field.dropdown;
switch(field.type){
case 'text':
formHtml += `
<div class="form-group">
<label for="${field.name}" class="bmd-label-floating">${field.label}</label>
<input type="${field.type}" class="form-control" name="${field.name}">
</div>
`;
break;
case 'dropdown':
formHtml += `
<div class="form-group">
<label for="${field.name}">${field.label}</label>
<select id="${field.name}" class="form-control">
<option selected>Choose...</option>
${ visas.map(visa => `
<option>${visa.name}</option>
`)}
</select>
</div>
`;
break;
case 'date':
formHtml += `
<div class="form-group">
<label for="${field.name}" class="bmd-label-floating">${field.label}</label>
<input type="text" id="date-${field.name}" class="form-control datepicker" name="${field.name}">
</div>
`;
break;
}
}
formHtml += `<button type="submit" class="btn btn-primary">Submit</button>`;
$('#user-form').html(formHtml);
$('#date-dob').datepicker({
format: 'mm/dd/yyyy',
endDate: '-18y'
});
$('#date-arrived').datepicker({
format: 'mm/dd/yyyy',
endDate: '0d'
});

+ 2
- 232
src/forms.html View File

@ -519,243 +519,13 @@
<div class="masonry-sizer col-md-6"></div> <div class="masonry-sizer col-md-6"></div>
<div class="masonry-item col-md-6"> <div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd"> <div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Basic Form</h6>
<h6 class="c-grey-900">User Form</h6>
<div class="mT-30"> <div class="mT-30">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Complex Form Layout</h6>
<div class="mT-30">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="fw-500">Birthdate</label>
<div class="timepicker-input input-icon form-group">
<div class="input-group">
<div class="input-group-addon bgc-white bd bdwR-0">
<i class="ti-calendar"></i>
</div>
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
<label for="inputCall2" class=" peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span>
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
<form id="user-form">
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Horizontal Form</h6>
<div class="mT-30">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-legend col-sm-2">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Check me out
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Disabled Forms</h6>
<div class="mT-30">
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Validation</h6>
<div class="mT-30">
<form class="container" id="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
</div>
</div>
</div>
</div> </div>
</div> </div>
</main> </main>


Write Preview
Loading…
Cancel
Save