Remove material design-style date pickers (#25)

* Remove date picker.

* Update path.

* Add hint to label.

* Remove unneeded JS.

* Add shipable config.

* Styles no longer needed.

* Move.

* Add docker integration.

* Add better layer caching.

* Not needed.

* Specify host.

* Tag image.

* add push

Dockerfile

@@ -6,11 +6,14 @@ RUN mkdir /code
 WORKDIR /code
 RUN mkdir requirements
 ADD bikeshop_project /code
-COPY requirements /code/requirements
+ADD requirements /code/requirements/base.txt
+ADD requirements /code/requirements/production.txt
 RUN pip install -r requirements/production.txt
 RUN npm cache clean
+ADD ./bikeshop_project/bower.json bower.json
 RUN npm install --unsafe-perm -g bower
 RUN bower install --allow-root
+ADD ./bikeshop_project/package.json package.json
 RUN npm install --unsafe-perm
 RUN npm run build-production
 RUN DJANGO_SETTINGS_MODULE=bikeshop.settings.production python manage.py collectstatic --no-input

bikeshop_project/bower.json

@@ -18,7 +18,6 @@
   ],
   "dependencies": {
     "material-design-lite": "^1.3.0",
-    "md-date-time-picker": "https://github.com/puranjayjain/md-date-time-picker.git#master",
     "normalize-css": "normalize.css#^4.1.1"
   }
 }

bikeshop_project/core/templates/membership_form.html

@@ -1,10 +1,6 @@
 {% extends 'dashboard.html' %}
 {% load staticfiles %}
 
-{% block styles %}
-    <link rel="stylesheet" href="{% static 'vendor/md-date-time-picker/dist/css/mdDateTimePicker.min.css' %}">
-{% endblock %}
-
 {% block content %}
     <div class="mdl-cell mdl-cell--8-col">
         <h1>New Membership</h1>
@@ -150,26 +146,7 @@
 {% endblock %}
 
 {% block scripts %}
-        <script src="{% static 'vendor/moment/min/moment.min.js' %}"></script>
-        <script src="{% static 'vendor/draggabilly/dist/draggabilly.pkgd.min.js' %}"></script>
-        <script src="{% static 'vendor/md-date-time-picker/dist/js/scroll-into-view-if-needed.js' %}"></script>
-        <script src="{% static 'vendor/md-date-time-picker/dist/js/mdDateTimePicker.min.js' %}"></script>
         <script>
-        var renewedAt = new mdDateTimePicker.default({
-            type: 'date',
-            past: moment().subtract(100, 'years'),
-            trigger: document.getElementById('{{  membership_form.renewed_at.id_for_label }}')
-        });
-        document.getElementById('{{ membership_form.renewed_at.id_for_label }}').addEventListener('focus', function() {
-            console.log('Toggle!');
-              renewedAt.toggle();
-        });
-        document.getElementById('{{  membership_form.renewed_at.id_for_label }}').addEventListener('onOk', function () {
-            console.log('onOk');
-            this.parentNode.classList.add('is-dirty');
-            this.value = renewedAt.time.format('YYYY-MM-DD');
-        })
-
         var responsibilities = [
                 document.getElementById('{{ membership_form.safe_space.id_for_label }}'),
                 document.getElementById('{{ membership_form.respect_community.id_for_label }}'),

bikeshop_project/registration/templates/edit_member_form.html

@@ -1,33 +1,21 @@
 {% extends 'dashboard.html' %}
 {% load staticfiles %}
 
-{% block styles %}
-    <link rel="stylesheet" href="{% static 'vendor/md-date-time-picker/dist/css/mdDateTimePicker.min.css' %}">
-{% endblock %}
-
 {% block scripts %}
     <script src="{% static 'vendor/moment/min/moment.min.js' %}"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/object-observe/0.2.6/object-observe-lite.min.js"></script>
-    <script src="{% static 'vendor/draggabilly/dist/draggabilly.pkgd.min.js' %}"></script>
-    <script src="{% static 'vendor/md-date-time-picker/dist/js/mdDateTimePicker.min.js' %}"></script>
     <script>
-    var dateOfBirth = new mdDateTimePicker.default({
+    dateOfBirthInput = document.getElementById('{{ form.date_of_birth.id_for_label }}');
-        type: 'date',
+
-        past: moment().subtract(100, 'years')
+    dateOfBirthInput.addEventListener('blur', function(event) {
-    });
+        var input = event.target;
-        document.getElementById('{{ form.date_of_birth.id_for_label }}').addEventListener('focus', function() {
-          dateOfBirth.toggle();
-    });
-    Object.observe(dateOfBirth, function(changes) {
-        var input = document.getElementById('{{ form.date_of_birth.id_for_label }}');
-        input.value = dateOfBirth.time().format('YYYY-MM-DD');
         input.parentNode.classList.add('is-dirty');
 
         var threshold = moment.duration(18, 'years');
-        var dob = dateOfBirth.time().clone();
+        var dob = moment(input.value, 'YYYY-MM-DD');
 
         if (dob.add(threshold).isAfter(moment())) {
             document.getElementById('{{ form.guardian_name.id_for_label }}').disabled = false;
+            document.getElementById('{{ form.guardian_name.id_for_label }}').required = true;
             document.getElementById('{{ form.guardian_name.id_for_label }}').parentNode.classList.remove('is-disabled');
         } else {
             document.getElementById('{{ form.guardian_name.id_for_label }}').disabled = true;
@@ -122,7 +110,7 @@
         </div>
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.date_of_birth.errors %}is-invalid{% endif %}">
             {{ form.date_of_birth }}
-            <label class="mdl-textfield__label" for="{{ form.date_of_birth.id_for_label }}">{{ form.date_of_birth.label }}</label>
+            <label class="mdl-textfield__label" for="{{ form.date_of_birth.id_for_label }}">{{ form.date_of_birth.label }} (e.g. 1991-08-25)</label>
             {% if form.date_of_birth.errors %}
             <span class="mdl-textfield__error">{{ form.date_of_birth.errors }}</span>
             {% else %}

bikeshop_project/registration/templates/member_form.html

@@ -1,34 +1,21 @@
 {% extends 'dashboard.html' %}
 {% load staticfiles %}
 
-{% block styles %}
-    <link rel="stylesheet" href="{% static 'vendor/md-date-time-picker/dist/css/mdDateTimePicker.min.css' %}">
-{% endblock %}
-
 {% block scripts %}
     <script src="{% static 'vendor/moment/min/moment.min.js' %}"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/object-observe/0.2.6/object-observe-lite.min.js"></script>
-    <script src="{% static 'vendor/draggabilly/dist/draggabilly.pkgd.min.js' %}"></script>
-    <script src="{% static 'vendor/md-date-time-picker/dist/js/scroll-into-view-if-needed.js' %}"></script>
-    <script src="{% static 'vendor/md-date-time-picker/dist/js/mdDateTimePicker.min.js' %}"></script>
     <script>
-    var dateOfBirth = new mdDateTimePicker.default({
+    dateOfBirthInput = document.getElementById('{{ form.date_of_birth.id_for_label }}');
-        type: 'date',
+
-        past: moment().subtract(100, 'years')
+    dateOfBirthInput.addEventListener('blur', function(event) {
-    });
+        var input = event.target;
-        document.getElementById('{{ form.date_of_birth.id_for_label }}').addEventListener('focus', function() {
-          dateOfBirth.toggle();
-    });
-    Object.observe(dateOfBirth, function(changes) {
-        var input = document.getElementById('{{ form.date_of_birth.id_for_label }}');
-        input.value = dateOfBirth.time.format('YYYY-MM-DD');
         input.parentNode.classList.add('is-dirty');
 
         var threshold = moment.duration(18, 'years');
-        var dob = dateOfBirth.time.clone();
+        var dob = moment(input.value, 'YYYY-MM-DD');
 
         if (dob.add(threshold).isAfter(moment())) {
             document.getElementById('{{ form.guardian_name.id_for_label }}').disabled = false;
+            document.getElementById('{{ form.guardian_name.id_for_label }}').required = true;
             document.getElementById('{{ form.guardian_name.id_for_label }}').parentNode.classList.remove('is-disabled');
         } else {
             document.getElementById('{{ form.guardian_name.id_for_label }}').disabled = true;
@@ -232,7 +219,7 @@
 {#            </label>#}
 {#        </div>#}
         <div>
-            <button disabled="true" id="submit" type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Submit</button>
+            <button disabled id="submit" type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Submit</button>
         </div>
         </form>
     </div>

shippable.yml

@@ -0,0 +1,15 @@
+# Language setting
+language: python
+
+# Version number
+python:
+  - "3.6"
+
+build:
+  cache: true
+  env:
+    - secure: stCGu2o9rdpGLek5SVL3d5+7XZw1aSbKV1F5c63M+xSDSvteK9B2/Qxjqc0FA5kigXAtpRdZIBp6/TrrIe3fNb6O77ATIZnIC19lAlxY9F80J5em1TkDSX8PRFoz3yuhNm/DpBYzytMjf57IQq4VlxLm3jms8hgCjMG2HeCKe9KqomUJ7hg7HBlPHnR/WqayQxnUnHkVe9MKKXxHjD2kL1Z4PFBM/fc5I5kNiJYhvmeoXPyvT8G6HKK9ZXG8Bw9OF/PtB7xI3/3ElqMEccHj+Ff66/a6rm5sMxbd2aOq8I0LTHXmONs+wsMniwcb1MIiO0Pc9sP9HbU0iGnnBrnmWA==
+  post_ci:
+    - docker commit $SHIPPABLE_CONTAINER_NAME bcbc/workstand:production
+push:
+    - docker push drwlrsn/workstand:production