Git Product home page Git Product logo

angular-dir-dropzone's Introduction

angular-dir-dropzone

AngularJS (v1.x.x) directive for DropZone.js

As of this latest commit, dropzone version used was v3.7.1

To Use:

inject ngDirDropZone into your Angular Module dependency declaration

write html template directive as such

<div id="" class="" data-drop-box data-upload-url=""></div>

Here you go Brian :). Thank You. It's gonna be alright :)

for you again Brian :)

the below was curled from the login.html with a page embedded js declared <script type="module">

// Initialize Firebase
const app = initializeApp(firebaseConfig);
//initializeAnalytics(app);
const db = getFirestore(app);
//const analytics = getAnalytics(app);
const querySnapshot = await getDocs(collection(db, "users"));
//console.log("Scope: ",angular.element(".login").scope());
querySnapshot.forEach((doc) => {
    angular.element(".login").scope().login.userData.push(doc.data());
  //console.log(`${doc.id} => `, doc.data());
});

To understand the above, ref the angular.element("").scope()

in the login view template, had this

<div class="container text-center login"></div>

excerpt from the app.js $routeProvider

.when('/login', {
    templateUrl: 'views/login.html',
        controller: 'LoginCtrl',
        controllerAs: 'login',
        isLogin: true
    })

excerpt from the login controller

angular.module('ejournalApp')
  .controller('LoginCtrl', function ($log, $scope, eJournalAppService, $rootScope) {
    this.userData = [];
})

Excerpt from the eJournalAppService, depicting the setWithExpiry and getWithExpiry (Mutator & Accessor) from the localStorage

angular.module('ejournalApp')
  .factory('eJournalAppService', function ($mdToast, $log) {
    // Service logic
    // ...
    function setWithExpiry(key, value, ttl) {
      const now = new Date();

      // `item` is an object which contains the original value
      // as well as the time when it's supposed to expire
      const item = {
        value: value,
        expiry: now.getTime() + ttl,
      };
      localStorage.setItem(key, JSON.stringify(item));
    }

    function getWithExpiry(key) {
      const itemStr = localStorage.getItem(key);
      // if the item doesn't exist, return null
      if (!itemStr) {
        return null;
      }
      const item = JSON.parse(itemStr);
      const now = new Date();
      // compare the expiry time of the item with the current time
      if (now.getTime() > item.expiry) {
        // If the item is expired, delete the item from storage
        // and return null
        localStorage.removeItem(key);
        return null;
      }
      return item.value;
    }

    const localStorageKeys = {
      ACCOUNT_DETAILS: 'account',
    };
    
    // Public API here
    return {
      AccountSession: function (userData) {
        setWithExpiry(localStorageKeys.ACCOUNT_DETAILS, userData, 30 * 60 * 1000);
      },
      getAccountSession: function () {
        return getWithExpiry(localStorageKeys.ACCOUNT_DETAILS);
      },
      deleteAccountSession: function () {
        localStorage.removeItem(localStorageKeys.ACCOUNT_DETAILS);
      }
    };
  });

For Brian, the Login Samplee

login.html

<div class="container text-center login">
    <h1>Transactions eJournal</h1>
    
    <div class="card border w-50 mx-auto bg-dark border-warning">
        <div class="card-header text-center text-white h3">
            Login
        </div>
        <div class="card-body bg-dark text-start">
            <md-content layout-padding>
                <div>
                    <md-input-container class="md-block" flex-gt-sm>
                        <label for="username">Username</label>
                        <input type="text" name="username" id="username" ng-model="login.username" required data-ng-keypress="login.initDoLogin($event)">
                    </md-input-container>

                    <md-input-container class="md-block" flex-gt-sm>
                        <label for="password">Password</label>
                        <input type="password" id="password" name="password" ng-model="login.password" required data-ng-keypress="login.initDoLogin($event)">
                    </md-input-container>
                </div>
                <div class="text-center">
                    <md-button class="py-1 px-4 md-raised md-primary md-hue-2 text-white btn btn-lg w-50 rounded-pill" data-ng-click="login.doLogin()">
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true" data-ng-if="loginLoading"></span>
                        Submit
                    </md-button>
                </div>
            </md-content>
        </div>
    </div>
</div>
<script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js";
    import { getFirestore, addDoc, collection, getDocs } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-firestore.js";
    //import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-analytics.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // import { initializeApp } from "/bower_components/firebase/firebase-app.js";
    // import { getFirestore } from "/bower_components/firebase/firebase-firestore.js";
    //import { initializeAnalytics, getAnalytics } from "/bower_components/firebase/firebase-analytics.js";
  
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: "",
      authDomain: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: "",
      measurementId: ""
    };
  
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    //initializeAnalytics(app);
    const db = getFirestore(app);
    //const analytics = getAnalytics(app);
    const querySnapshot = await getDocs(collection(db, "users"));
    //console.log("Scope: ",angular.element(".login").scope());
    querySnapshot.forEach((doc) => {
        angular.element(".login").scope().login.userData.push(doc.data());
      //console.log(`${doc.id} => `, doc.data());
    });
</script>

login.js

'use strict';

/**
 * @ngdoc function
 * @name ejournalApp.controller:LoginCtrl
 * @description
 * # LoginCtrl
 * Controller of the ejournalApp
 */
angular.module('ejournalApp')
  .controller('LoginCtrl', function ($log, $scope, eJournalAppService, $rootScope) {
    this.userData = [];

    // $scope.$watch('login.userData', function (newValue, oldValue) {
    //   $log.log('User Data: ', newValue);
    //   $log.log('Old User Data: ', oldValue);
    // }, true);

    this.doLogin = function () {
      if (_.isEmpty(this.userData)) {
        eJournalAppService.showSimpleToast('Unable to connect to Database');
        return;
      }

      if (!_.isEmpty(this.userData)) {
        if (_.isEmpty(this.username)) {
          eJournalAppService.showSimpleToast('Username is Required');
          return;
        }
        if (_.isEmpty(this.password)) {
          eJournalAppService.showSimpleToast('Password is Required');
          return;
        }
        $scope.loginLoading = true;

        let userFound = this.userData.some(el => el.username === this.username);
        if (!userFound) {
          eJournalAppService.showSimpleToast('Username not found. Contact Administrator');
          $scope.loginLoading = false;
          return;
        }

        let passwordFound = this.userData.some(el => el.username === this.username && el.password === this.password);
        if (!passwordFound) {
          eJournalAppService.showSimpleToast('Password incorrect. Try again');
          $scope.loginLoading = false;
          return;
        }

        let user = _.find(this.userData, el => el.username === this.username && el.password === this.password);

        eJournalAppService.setAccountSession(user);
        $rootScope.account = eJournalAppService.getAccountSession();

        $rootScope.goTo('/');
      }
    };

    this.initDoLogin = function (keyEvent) {
      //$log.log('KeyEvent: ', keyEvent);
      if (keyEvent.keyCode === 13) {
        this.doLogin();
      }
    };

  });

the app.js

'use strict';

/**
 * @ngdoc overview
 * @name ejournalApp
 * @description
 * # ejournalApp
 *
 * Main module of the application.
 */
angular
  .module('ejournalApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngMaterial',
    'angularUtils.directives.dirPagination'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main',
        isLogin: false
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about',
        isLogin: false
      })
      .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl',
        controllerAs: 'login',
        isLogin: true
      })
      .when('/receipt/:transaction', {
        templateUrl: 'views/receipt.html',
        controller: 'ReceiptCtrl',
        controllerAs: 'receipt',
        isLogin: false
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  .config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .primaryPalette('orange')
      .accentPalette('green')
      .dark();
  })
  // .config(function ($mdDateLocaleProvider) {
  //   $mdDateLocaleProvider.formatDate = function (date) {
  //     return moment(date).format('yyyy/MM/DD');
  //   };
  //   $mdDateLocaleProvider.parseDate = function (dateString) {
  //     var m = moment(dateString, 'yyyy/MM/DD', true);
  //     return m.isValid() ? m.toDate() : new Date(NaN);
  //   };
  // })
  .run(function ($rootScope, $location, eJournalAppService, $log) {
    $rootScope.goTo = function (where) {
      if (where) {
        $location.path('/' + where);
      }
    };

    if (_.isEmpty(eJournalAppService.getAccountSession())) {
      $rootScope.goTo('login');
    } else {
      $rootScope.account = eJournalAppService.getAccountSession();
    }

    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
      $rootScope.isLogin = current.isLogin;
    });

    $rootScope.$on('$routeChangeStart', function (event, next) {
      if (_.isEmpty(eJournalAppService.getAccountSession())) {
        $rootScope.goTo('login');
      }

      if (next.controllerAs === 'login' && !_.isEmpty(eJournalAppService.getAccountSession())) {
        $rootScope.goTo('/');
      }
      //$rootScope.isLogin = next.isLogin;
    });

    $rootScope.isActive = function (route) {
      return $location.path() === route;
    };

    $rootScope.doLogout = function () {
      //$rootScope.isLogin = true;
      $rootScope.account = {};
      eJournalAppService.deleteAccountSession();
      $rootScope.goTo('login');
    };
  });

angular-dir-dropzone's People

Contributors

ominira avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.