is a container for a group of related components. Every Angular app has at least one of these called App module

Module

How well did you know this?

Not at all

Perfectly

are the main building block for Angular applications. Each one of these consists of: An HTML template that declares what renders on the page. A Typescript class that defines behavior. A CSS selector that defines how the (blank) is used in a template.

Components

How well did you know this?

Not at all

Perfectly

A blank is one of the properties of the object that we use along with the component configuration. A blank is used to identify each component uniquely into the component tree, and it also defines how the current component is represented in the HTML DOM

Selector

How well did you know this?

Not at all

Perfectly

A blank is a blueprint for creating an object, we call that created object an instance of a class, or a class instance or just instance for short. We instantiate a blank by using the new keyword and when that happens JavaScript calls the constructor function.

Class

How well did you know this?

Not at all

Perfectly

Blank in Angular is put into use to inject dependencies into the component class. It creates a new instance of the class when the compiler calls ‘new MyClass ()’. While calling ‘new MyClass()’, it is vital that the exact match of the parameter passes the Angular component blank of the class.

Constructor

How well did you know this?

Not at all

Perfectly

To use ngOnInit in Angular, it is required to import into the component class in this way – import {Component, OnInit} from ‘@angular/core’. Though implementing ngOnInit for every component is not essential, it is a good practice that further heads towards the smooth functioning of the platform. Angular ngOnInit is created by Angular itself. Angular also renders and checks the changes in its data bounded properties. It is interesting to note that Angular destroys the component before removing it from DOM. ngOnInit in Angular can be hooked to components and directives. Defining the ngOnInit Angular in the class helps Angular runtime to know that is the right time to call the method. The major benefit of this approach is that it adds specific initialization logic near the class lifecycle.

ngOnInit

How well did you know this?

Not at all

Perfectly

In Angular, a blank is a chunk of HTML. Use special syntax within a template to build on many of Angular’s features.

Template

How well did you know this?

Not at all

Perfectly

Dependencies are services or objects that a class needs to perform its function. Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them.

Angular’s DI framework provides dependencies to a class upon instantiation. You can use Angular DI to increase flexibility and modularity in your applications.

Dependency injection in Angular

How well did you know this?

Not at all

Perfectly

They are instructions in the DOM. They are classes that add additional behavior to elements in your Angular applications. With Angular’s built-in directives, you can manage forms, lists, styles, and what users see.

Directives

How well did you know this?

Not at all

Perfectly

Components—directives with a template. This type of directive is the most common directive type.
Attribute directives—directives that change the appearance or behavior of an element, component, or another directive.
Structural directives—directives that change the DOM layout by adding and removing DOM elements.

The different types of Angular directives are as follows:

How well did you know this?

Not at all

Perfectly

Decorators are functions that are invoked with a prefixed @ symbol, and immediately followed by a class , parameter, method or property. The decorator function is supplied information about the class , parameter or method, and the decorator function returns something in its place, or manipulates its target in some way.

Decorators

How well did you know this?

Not at all

Perfectly

Class decorators, e.g. @Component and @NgModule.
Property decorators for properties inside classes, e.g. @Input and @Output.
Method decorators for methods inside classes, e.g. @HostListener.
Parameter decorators for parameters inside class constructors, e.g. @Inject.

What are types of decorators in Angular?
There are four main types:

How well did you know this?

Not at all

Perfectly

Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.

Property binding

How well did you know this?

Not at all

Perfectly

Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

Event binding

How well did you know this?

Not at all

Perfectly

Is like a reserved variable name that you can use in the template when using event binding. It is the data emitted with said event. It gives us access to event data it allows you to fetch event data. Allows you to grab any data an event passes to us

($event)

How well did you know this?

Not at all

Perfectly

It will trigger on the input event and update the value of the server name in our component automatically.
It will also update the value of the input element if we change the value of server name somewhere else

[(@ngModel)]

How well did you know this?

Not at all

Perfectly

What are the four form of data binding

Event Binding, String Interpolation, Property Binding, and Two Way Binding.

How well did you know this?

Not at all

Perfectly

When building your applications and creating logic, there are times when you want to make comparisons between two or more things. They can be abstract things; they can be items in a list or array or even an object. Angular provides directives to handle these situations called conditionals. So, there is ngIf for times when you want to check for a true or false value, and there is ngFor mostly for a list of items either in an object or an array.

Conditionals

How well did you know this?

Not at all

Perfectly

is an Angular directive from the router library that is used to insert the component matched by routes to be displayed on the screen.

Router-Outlet

How well did you know this?

Not at all

Perfectly

is a directive which binds input, select and textarea, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during validations in a form. We can use blank with: input. text.

ngModel

How well did you know this?

Not at all

Perfectly

We’ll be learning about the @Input() decorator. … Using the @Input() decorator we can instruct the Angular framework that a property in our directive’s class is an input property, and as such, the value of that property can be set via an input binding on the host element.

What is input directive in Angular?
Input data into a Directive

How well did you know this?

Not at all

Perfectly

The child component uses the @Output() property to raise an event to notify the parent of the change. To raise an event, an @Output() must have the type of blank , which is a class in @angular/core that you use to emit custom events.

What is the use of EventEmitter in angular?

How well did you know this?

Not at all

Perfectly

Getting the input at the point and time that I click the button. You use blank
A blank can be placed on any html element. You can only use a local reference in your template/ or html page

Local Reference

How well did you know this?

Not at all

Perfectly

Getting access to local reference or any element directly from our typescript code. This works before you call a method.

@Viewchild

How well did you know this?

Not at all

Perfectly

Use blank to quickly execute reusable code in multiple places without having to set up.

ng-content

All the basic types e.g. int, boolean, char, short, float, long and double are known as primitive types. ... The main difference between primitive and reference type is that primitive type always has a value, it can never be null but reference type can be null, which denotes the absence of value.

What is the difference between primitive and reference type?

An blank is a pattern that listens to a named event, fires a callback, then emits that event with a value. Sometimes this is referred to as a “pub/sub” model, or listener. It's referring to the same thing

Event Emitter

Input is used to receive data in whereas Output is used to send data out. Output sends data out by exposing event producers, usually EventEmitter objects. by the way, I will produce and send data out via the onChange property. A common pattern in Angular is sharing data between a parent component and one or more child components. ... @Input() lets a parent component update data in the child component. Conversely, @Output() lets the child send data to a parent component.

The difference between @input and @output angular

The square brackets that are used with ngClass or some directive signify that we are binding to some property on said directive or ngClass

Little reminder about how square brackets indicate property binding when used with directives

There are three kinds of directives in Angular: Components—directives with a template. Structural directives—change the DOM layout by adding and removing DOM elements. Attribute directives—change the appearance or behavior of an element, component, or another directive

What is attribute directive What are the types?

Directives go in our templates so we can attach them to our elements

Yup

blank is a life cycle hook called by Angular to indicate that Angular is done creating the component. Implement this interface to execute custom initialization logic after your directive's data-bound properties have been initialized.

NgOnInit

The constructor() should only be used to initialize class members but shouldn't do actual “work”. So we should use constructor() to set up Dependency Injection, Initialization of class fields, etc. ngOnInit() is a better place to write “actual work code” that we need to execute as soon as the class is instantiated.

Why we use ngOnInit instead of constructor?

The new operator instantiates a class by allocating memory for a new object. Note: The phrase "instantiating a class" means the same thing as "creating an object"; you can think of the two as being synonymous. When you create an object, you are creating an instance of a class, therefore "instantiating" a class.

What does it mean to instantiate an object?

Observables provide support for passing messages between parts of your application. They are used frequently in Angular and are a technique for event handling, asynchronous programming, and handling multiple values.

Observables

The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of state changes. This pattern is similar (but not identical) to the publish/subscribe design pattern.

Observables Part 2

Means the execution of a program or function.

Invocation

1) In object-oriented programming, the state of an object is the combination of the original values in the object plus any modifications made to them. (2) The current or last-known status, or condition, of a process, transaction or setting. "Maintaining state" or "managing state" means keeping track of the process.

State of an object

The addNewItem() function uses the @Output(), newItemEvent, to raise an event with the value the user types into the .

export class ItemOutputComponent { @Output() newItemEvent = new EventEmitter(); addNewItem(value: string) { this.newItemEvent.emit(value); } }

In synchronous operations tasks are performed one at a time and only when one is completed, the following is unblocked. In other words, you need to wait for a task to finish to move to the next one. In asynchronous operations, on the other hand, you can move to another task before the previous one finishes.

Synchronous & Asynchronous

Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change (Wikipedia). RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code.

What is the use of RxJS in Angular?

In this case, @Input() decorates the property item, which has a type of string, however, @Input() properties can have any type, such as number, string, boolean, or object. The value for item comes from the parent component.

import { Component, Input } from '@angular/core'; // First, import Input export class ItemDetailComponent { @Input() item = ''; // decorate the property with @Input() }

test() are methods on a regular expression object. . match() is a method on a string and takes a regex object as an argument. . test() returns a boolean if there's a match or not

test() and match in Regex

Reactive forms provide direct, explicit access to the underlying forms object model. Compared to template-driven forms, they are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.

Reactive forms

Template-driven forms rely on directives in the template to create and manipulate the underlying object model. They are useful for adding a simple form to an app, such as an email list signup form. They're straightforward to add to an app, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, template-driven forms could be a good fit.

Template-driven

Common form foundation classes Both reactive and template-driven forms are built on the following base classes. FormControl tracks the value and validation status of an individual form control. FormGroup tracks the same values and status for a collection of form controls. FormArray tracks the same values and status for an array of form controls. ControlValueAccessor creates a bridge between Angular FormControl instances and built-in DOM elements.

Common form foundation classes

In Angular, form controls are classes that can hold both the data values and the validation information of any form element. Every form input you have in a reactive form should be bound by a form control. These are the basic units that make up reactive forms

Form Control

FormControl is a class in angular that allow us to manipulate every input field in a form so you can create an instance of the control class. with the control class you can check the value, touched, untouched, dirty, pristine, valid, and errors. These are property's of form control

more on self

In fact, we interact with API’s every time we make a browser request (type a site into our browser and press enter).

API’s Basics

One common use of form objects is to reduce complexity in the controller, and the model, which isn’t incorrect, but does not do justice to the important role that they play.

Form objects part One

As much as possible, you don’t want your models to know about each other beyond the associations, which we can consider to be persistence logic. Business logic that spans across multiple models are best kept outside of the ActiveRecord models (form objects are models too, so let’s make the distinction clear). More on this later, if you aren’t convinced.

Form objects part Two

A session is just a place to store data during one request that you can read during later requests.

A session is

Indicates that the user represented by the sealed client-principal object (in the LOGIN state) has logged out of their current user login session. This is a general purpose method an application can use to invalidate, or terminate access to, a sealed client-principal object.

What method is logout?

# frozen_string_literal: true require "rails_helper" RSpec.describe "[DELETE] /api/v1/logout", type: :request do Given(:path) { "/api/v1/logout" } Given(:user) { FactoryBot.create :user } context "with vaild params" do before do sign_in user end When { delete path } # Then { expect(response).to be_successful } Then { binding.pry expect(response).to be_successful } end end

web side delete test

Headers in a HTTP request or response is the additional information that is transferred to the user or the server. In postman, the headers can be seen in the Headers tab.

Headers in a HTTP request or response

2xx successful – the request was successfully received, understood, and accepted. 3xx redirection – further action needs to be taken in order to complete the request. 4xx client error – the request contains bad syntax or cannot be fulfilled.

2xx, 3xx, 4xx

What are resources in Ruby on Rails? Any object that you want users to be able to access via URI and perform CRUD (or some subset thereof) operations on can be thought of as a resource. In the Rails sense, it is generally a database table which is represented by a model, and acted on through a controller

What are resources in Ruby on Rails?

This is how we can modify the reset_password_token using devise with the least possible code changes. It involves understanding the flow of logic throughout the different components in devise, as well as the role each component play, so that you know what can and should be modified. The same can be applied to the confirmation flow as well.

understanding the flow of logic

A flash message is a way to communicate information with the users of your Rails application so they can know what happens as a result of their actions. Example messages: “Password changed correctly” (confirmation) “User not found” (error)

A flash message

What is logic flow in programming? Flow control is a high-level way of programming a computer to make decisions. These decisions can be simple or complicated, executed once or multiple times. Logic presents rules that allow you to build up and represent more complex ideas. ...

What is logic flow in programming?

The show method displays only further details on a single book. This functionality will be achieved by the following lines of code. The show method's @book = Book. find(params[:id]) line tells Rails to find only the book that has the id defined in params[:id].

What is a show method in ruby?

Rails framework allows complex objects to be stored in a database column via the ActiveRecord::Serialization module. But understanding when to store serialized data in a column is more crucial than knowing how to do it. Through this article, we will first learn "when" to store serialized data and then the "how" part.

Serialization in Rails for Storage

Normalization is a database design technique that reduces data redundancy and eliminates undesirable characteristics like Insertion, Update and Deletion Anomalies. Normalization rules divides larger tables into smaller tables and links them using relationships. The purpose of Normalisation in SQL is to eliminate redundant (repetitive) data and ensure data is stored logically.

What is Normalization?

When should you not store serialized data?

Storing serialized data in the database could open up a can of worms if we are not mindful. Following are some of the conditions when you may avoid serializing the data: 1) You need to query the serialized data across the records quite often. 2) The state of the serialized data would change frequently. This would need frequent updates to the serialized column which can be a heavy operation. 3) There is a possibility that the field/property name of an object would change in future. (Note: This is not a pressing issue as we do have ways to fix this as explained in the Custom Serializer section below.) Once you are convinced that all the above criteria do not apply to your use-case, you may go ahead and implement serialization for storing the data.

When should you not store serialized data?

The term DSL is also used to describe some of the concepts in ActiveRecord, which is part of Ruby on Rails. The concept of a DSL is actually unrelated to Ruby, and has been around for a long time. It's generally used to describe a language that has constructs suited for expressing concepts of a particular domain.

What is a DSL and how does it pertain to Ruby?

2 Answers. Generally asset is anything that browser loads after it gets the HTML page. Meaning javascript, css and any images

What is assets in Ruby on Rails?

Sprockets is a Ruby library for compiling and serving web assets. Sprockets allows to organize an application's JavaScript files into smaller more manageable chunks that can be distributed over a number of directories and files. It provides structure and practices on how to include assets in our projects.

What are sprockets in rails?

An index is a numerical representation of an item's position in a sequence. This sequence can refer to many things: a list, a string of characters, or any arbitrary sequence of values. In some programming languages, an array can be defined by key-value pairs, where a specific key points to a value.

What is an Index in Coding?

1 Answer. The purpose of the . call method is to invoke/execute a Proc/Method instance.

What does .call do in Ruby?

Image result for what does .map do in ruby Map is a Ruby method that you can use with Arrays, Hashes & Ranges. The main use for map is to TRANSFORM data. For example: Given an array of strings, you could go over every string & make every character UPPERCASE.

What does .MAP do Ruby?

rails g pipeline Api::V1::CompanyLead show create index update destroy

An example for when you need to generate the structure for our api endpoints.

create app/controllers/api/v1/company_leads_controller.rb create app/pipelines/api/v1/company_lead_pipeline.rb create app/serializers/api/v1/company_lead_serializer.rb create app/services/api/v1/company_leads/create.rb create app/services/api/v1/company_leads/update.rb create app/services/api/v1/company_leads/destroy.rb create spec/requests/api/v1/company_leads/index_spec.rb create spec/requests/api/v1/company_leads/show_spec.rb create spec/requests/api/v1/company_leads/create_spec.rb create spec/requests/api/v1/company_leads/update_spec.rb create spec/requests/api/v1/company_leads/destroy_spec.rb route namespace :api do

CompanyLead

Index shows the list of resources, but likely only an abbreviated portion of those resources. Show shows the full details of a single resource. potentially with more information from other resources.

Index VS Show

A blob is a record that contains the metadata about a file and a key for where that file resides on the service. ... Subsequent to the file being uploaded server-side to the service via create_after_upload!.

What is active storage blob?

Functional programming lets you describe what you want to do, as opposed to how you want it done. An example of what would be “Give me all the even numbers in this list.“. You don’t really care about how it’s doing it, you’re telling it what you want

Functional programming

What the pluck () function does is that it essentially loops through a collection and collects all the data from the particular field and stores it in another collection. That would mean, it plucks the concerned value from a large set of data and stores them in a separate collection for later usage.

How does pluck work?

new is a class method, which generally creates an instance of the class (this deals with the tricky stuff like allocating memory that Ruby shields you from so you don't have to get too dirty). Then, initialize , an instance method, tells the object to set its internal state up according to the parameters requested

What does New do in Ruby?

The call() method calls a function with a given this value and arguments provided individually.

call() method

What happens after you call map? Map returns a new array with the results. It won’t change the original. If you want to change the original array you can use map!.

Map Method in Ruby

git restore spec/serializers/api/v1/user_lead_serializer_spec.rb

git restore work if you have not committed your code and need to restore your code within some file back to its original state.

Ruby interprets semicolons and newline characters as the ending of a statement. However, if Ruby encounters operators, such as +, −, or backslash at the end of a line, they indicate the continuation of a statement.

Line Endings in Ruby Program

Ruby is a perfect Object Oriented Programming Language. The features of the object-oriented programming language include − Data Encapsulation Data Abstraction Polymorphism Inheritance

Ruby is a perfect Object Oriented Programming Language

Variables in a Ruby Class Ruby provides four types of variables − Local Variables − Local variables are the variables that are defined in a method. Local variables are not available outside the method. You will see more details about method in subsequent chapter. Local variables begin with a lowercase letter or _. Instance Variables − Instance variables are available across methods for any particular instance or object. That means that instance variables change from object to object. Instance variables are preceded by the at sign (@) followed by the variable name. Class Variables − Class variables are available across different objects. A class variable belongs to the class and is a characteristic of a class. They are preceded by the sign @@ and are followed by the variable name. Global Variables − Class variables are not available across classes. If you want to have a single variable, which is available across classes, you need to define a global variable. The global variables are always preceded by the dollar sign ($).

Variables in a Ruby Class

Class methods can only be called on classes Instance methods can only be called on instances of classes Class methods are always defined def self.method_name Instance methods are always defined def method_name

Instance methods vs class methods

Classes are a grouping of methods that exist to construct an object by creating a new instance of the class. Instances are the objects created by a class.

Instance methods vs class methods part: 2

A class is the blueprint from which individual objects are created

Duh

A class is the blueprint from which individual objects are created

Yup

rails db:migrate:status

db migrate

rails db:migrate:status

db migrate status

find_by will not throw an error but find will

find vs find_by

When installing a gem make sure not to use install because that will install it locally and so you need to store the gem inside the gem file

Gem Install

lead = Lead.first

var = model.method. The model has the data base associations which all have values

bin/rails generate pipeline Api::V1::Map_Areas::Contact create update destroy

Generate Leads contacts

contact = ::Api::V1::Leads::Contacts::Create.call contact_params

might need

The backend validators generate errors, they pass errors to the Front-End

Backend Validators in Ruby

The "newer" syntax is only for symbols. {hello: 'world'} is equivalent to {:hello => 'world'} but if your key is a string then you still have to use the "hash rocket" syntax: {'hello' => 'world'}

For symbols.

Ruby operators The following table shows common Ruby operators ordered by precedence (highest precedence first): Category Symbol Resolution, access operators :: . Array operators [ ] [ ]= Exponentiation ** Not, complement, unary plus, minus ! ~ + - Multiply, divide, modulo * / % Addition, subtraction + - Shift operators << >> Bitwise and & Bitwise or, logical or ^ | Relational operators > >= < <= Bitwise or, logical or ^ | Equality, pattern match operators <=> == === != =~ !~ Logical and && Logical or || Range operators .. ... Ternary ?: Assignment operators = += -= *= **= /= %= &= |= ^= <<= >>= ||= &&= Alternate negation not Alternate logical or, and or and

Ruby operators The following table shows common Ruby operators ordered by precedence (highest precedence first):

Persisted if the contact saved than the contact persisted but if the contact did not save than it did not persist

Persisted in Ruby

devise-jwt is a devise extension which uses JWT tokens for user authentication. It follows secure by default principle. This gem is just a replacement for cookies when these can't be used. As cookies, a token expired with devise-jwt will mandatorily have an expiration time.

devise-jwt

Class variables begin with @@ and must be initialized before they can be used in method definitions.

Class variables

When an uninitialized local variable is referenced, it is interpreted as a call to a method that has no arguments.

Uninitialized local variable

Ruby Constants Constants begin with an uppercase letter. Constants defined within a class or module can be accessed from within that class or module, and those defined outside a class or module can be accessed globally. Constants may not be defined within methods. Referencing an uninitialized constant produces an error. Making an assignment to a constant that is already initialized produces a warning.

Ruby Constants

Ruby Pseudo-Variables They are special variables that have the appearance of local variables but behave like constants. You cannot assign any value to these variables. self − The receiver object of the current method. true − Value representing true. false − Value representing false. nil − Value representing undefined. __FILE__ − The name of the current source file. __LINE__ − The current line number in the source file.

Ruby Pseudo-Variables

Example 123 # Fixnum decimal 1_234 # Fixnum decimal with underline -500 # Negative Fixnum 0377 # octal 0xff # hexadecimal 0b1011 # binary ?a # character code for 'a' ?\n # code for a newline (0x0a) 12345678901234567890 # Bignum

Ruby Literals and Integers

http://localhost:3000/rails/info/routes

Looking up routes on the front-end side

Ruby Literals and Integers

open coverage/index.html

The coverage plugin helps you know how much your test covers

create app/controllers/api/v1/notes_controller.rb create app/pipelines/api/v1/note_pipeline.rb create app/serializers/api/v1/note_serializer.rb create app/services/api/v1/notes/create.rb create app/services/api/v1/notes/update.rb create app/services/api/v1/notes/destroy.rb create spec/requests/api/v1/notes/create_spec.rb create spec/requests/api/v1/notes/update_spec.rb create spec/requests/api/v1/notes/destroy_spec.rb

Generated paths for notes

ActiveRecord::Base.connection.tables ActiveRecord::Base.connection.columns('projects').map(&:name)

Grabbing tables in ruby console

https://apidock.com/rails/ActionController/Parameters/permit https://apidock.com/rails/Hash/slice

Examples for permit and slice

Two services folders exist one is for spec and the other is for normal services

Service folder structure

In Ruby, nil is a special value that to serve as an indication of the absence of any value. Nil is an object of NilClass. nil is Ruby's way of referring to nothing or void

Nil in Ruby

build_stubbed is the younger, more hip sibling to build ; it instantiates and assigns attributes just like build , but that's where the similarities end.

build_stubbed

Ruby if...else Statement if conditional [then] code... [elsif conditional [then] code...]... [else code...] end

Ruby if...else Statement

Ruby provides a special statement which is referred as unless statement. This statement is executed when the given condition is false. ... In if statement, the block executes once the given condition is true, however in unless statement, the block of code executes once the given condition is false.

The unless statement

Reloads the attributes of this object from the database. The optional options argument is passed to find when reloading so you may do e.g. record.reload(:lock => true) to reload the same record with an exclusive row lock.

Reload

Reload in Ruby

You misunderstood build. It's just an alias of new, nothing special. build won't "create" a record in database, just create a new object in memory so that the view can take this object and display something, especially for a form.

Build

The HyperText Transfer Protocol (HTTP) 401 Unauthorized response status code indicates that the client request has not been completed because it lacks valid authentication credentials for the requested resource.

401

Gulp is a tool that helps you out with several tasks when it comes to web development. It's often used to do front end tasks like: Spinning up a web server. Reloading the browser automatically whenever a file is saved.

Why do we need gulp?

knock-pro-web git:(lc/notes-update-lead) git pull origin staging ➜ knock-pro-web git:(lc/notes-update-lead) ✗ ga ➜ knock-pro-web git:(lc/notes-update-lead) gcm knock-pro-web git:(lc/notes-update-lead) git push origin lc/notes-update-lead -f

fixing commit error

`rails g pipeline Api::V1::NameOfEndpoint ` action options: [show create index update destroy] bin/rails generate pipeline Api::V1::Map_Areas show create index update destroy

example for generate

create app/controllers/api/v1/map_areas_controller.rb create app/pipelines/api/v1/map_area_pipeline.rb create app/serializers/api/v1/map_area_serializer.rb create app/services/api/v1/map_areas/create.rb create app/services/api/v1/map_areas/update.rb create app/services/api/v1/map_areas/destroy.rb create spec/requests/api/v1/map_areas/index_spec.rb create spec/requests/api/v1/map_areas/show_spec.rb create spec/requests/api/v1/map_areas/create_spec.rb create spec/requests/api/v1/map_areas/update_spec.rb create spec/requests/api/v1/map_areas/destroy_spec.rb route namespace :api do

routes and file for map_areas

What are transactions in rails?

Rails transactions are a way to ensure that a set of database operations will only occur if all of them succeed. Otherwise they will rollback to the previous state of data

Strong Parameters is a feature of Rails that prevents assigning request parameters to objects unless they have been explicitly permitted. It has its own DSL (Domain Specific Language, or in other words, a predefined syntax it understands), that allows you to indicate what parameters should be allowed

Strong Parameters in Rails

What does '?' Mean in Ruby? i know that the '?' in ruby is something that checks the yes/no fulfillment.

def destroy render json: ::Api::V1::MapAreaPipeline.destroy(params[:id]) end

controller/destroy

def destroy id map_area = MapArea.find id map_area.destroy ::BaseSerializer.empty end

pipeline/destroy

# frozen_string_literal: true require "rails_helper" RSpec.describe "[DELETE] /api/v1/map_areas/:id", type: :request do Given(:path) { "/api/v1/map_areas/#{map_area.id}" } Given(:group) { FactoryBot.create :group } Given(:user) { FactoryBot.create :user, id: 1 } Given(:map_area) { FactoryBot.create( :map_area, id: 1, group_id: group.id, name: "name", hex_color: "#4ef9e8", coordinates: [{ lat: 1.222, lon: 1.333 }], user_ids: [], ) } context "with valid params" do When { delete path, headers: api_auth_headers(user) } Then { expect(response).to be_successful expect(response_body[:data]).to be_empty expect(response_body[:errors]).to be_empty } end context "with unauthenticated user" do When { delete path } Then { expect(response).to be_unauthorized } end end

spec/destroy

Assignment Branch Condition (ABC) size is a measurement of the size of a method. It is essentially determined by counting the number of Assignments, Branches, and Conditional statements To reduce ABC score, you could move some of those assignments into before_action calls:

Assignment Branch Condition (ABC)

strong Params and Rails permit nested hash attributes

Grab explanations for these

A transverse activity is an activity executed by several objects in some combination. The activity is described as a single unit, separately from the descriptions of the participating objects. ... Usual language mechanisms such as class, object etc

Transverse in coding

Enumerator, specifically, is a class in Ruby that allows both types of iterations – external and internal. Internal iteration refers to the form of iteration which is controlled by the class in question, while external iteration means that the environment or the client controls the way iteration is performed.

Enumerator in Ruby

rails g pipeline Api::V1::Map_Icon_Settings index

The before(:each) method is where we define the setup code. When you pass the :each argument, you are instructing the before method to run before each example in your Example Group i.e. the two it blocks inside the describe block in the code above.

The before(:each) method

Factory Bot's creates test fixtures that are fake test objects that can be re-used throughout testing an application.

Factory Bot Definition

A Domain-Specific Language, or DSL, is “a programming language of limited expressiveness focused on a particular domain”. It makes tasks in its domain easier by removing extraneous code for a particular task and allowing you to focus on the specific task at hand.

A Domain-Specific Language, or DSL

rails generate pipeline Api::V1::UserMapAreas::map_area_id destroy

I bet that often you see a lot of enormous scopes in Ruby on Rails models, endless chains of queries in controllers and even bulky chunks of raw SQL.

enormous scopes

These problems can be solved by using Query Object pattern — a common technique that isolates your complex queries. Query Object in ideal case is a separate class that contains one specific query that implements just one business logic rule.

DB queries application problems: Solved

An OpenStruct is a data structure, similar to a Hash, that allows the definition of arbitrary attributes with their accompanying values. This is accomplished by using Ruby's metaprogramming to define methods on the class itself. OpenStruct is the most complex (it's a wrapper for Hash) so it's the slowest. However the magnitude of the difference in speed is kind of surprising.

An OpenStruct

A data structure is a specific way to organize & access data. Examples include: Arrays Binary trees Hashes Different data structures excel at different tasks.

What is a data structure?

What is contiguous in coding? Contiguous describes two or more objects that are adjacent to each other. In computing, contiguous data is data that is moved or stored in a solid uninterrupted block.

What is contiguous in coding?

In simple terms, models are Ruby classes that can holds value of a single row in a database table. Since they all inherit ActiveRecord::Base through ApplicationRecord class, they are equipped with all the Active Record methods which enables them to interact with the database.

Rails Models What are models?

Decoupling is a coding strategy that involves taking the key parts of your classes' functionality (specifically the hard-to-test parts) and replacing them with calls to an interface reference of your own design. With decoupling, you can instantiate two classes that implement that interface.

Decoupling Part One

Decoupling is a tool that allows decomposing a complicated problem in a series of simpler ones, solving them independently and then combining the results

Decoupling Part One

Active Record objects can be created from a hash, a block, or have their attributes manually set after creation. The new method will return a new object while create will return the object and save it to the database. A call to user. save will commit the record to the database.

Active Record objects

Middleware is software that lies between an operating system and the applications running on it. Essentially functioning as hidden translation layer, middleware enables communication and data management for distributed applications.

Middleware is software

Data: /opt/homebrew/var/lib/elasticsearch/elasticsearch_logancratty/ Logs: /opt/homebrew/var/log/elasticsearch/elasticsearch_logancratty.log Plugins: /opt/homebrew/var/elasticsearch/plugins/ Config: /opt/homebrew/etc/elasticsearch/

elasticsearch

transport.tcp.port. 9300. The port that is used for communication between Elasticsearch nodes in a cluster.

tcp

index data when changes are made happens when include Elasticsearch::Model::Callbacks is included With Elasticsearch::Model::Callbacks, whenever a movie is added, modified, or deleted, its document on Elasticsearch is also updated.

include Elasticsearch::Model::Callbacks

You can use the search API to search and aggregate data stored in Elasticsearch data streams or indices. The API's query request body parameter accepts queries written in Query DSL. The following request searches my-index-000001 using a match query. This query matches documents with a user.id value of kimchy

How do you search in Elasticsearch?

nock-pro-web git:(lc/company-users-index) rails generate pipeline Api::V1::Company_Users index create app/controllers/api/v1/company_users_controller.rb create app/pipelines/api/v1/company_user_pipeline.rb create app/serializers/api/v1/company_user_serializer.rb create spec/requests/api/v1/company_users/index_spec.rb route namespace :api do namespace :v1 do resources :company_users, only: [:index] end end

pipeline Api::V1::Company_Users index

A nested query is a query that has another query embedded within it. The embedded query is called a subquery. A subquery typically appears within the WHERE clause of a query. It can sometimes appear in the FROM clause or HAVING clause.Jul

What is nested query?

A Callback is a function that is to be executed after another function has finished executing — hence the name ‘call back’. What is a Callback Function? Functions which takes Funs(i.e. functional objects) as arguments, or which return Funs are called higher order functions. Any function that is passed as an argument is called a callback function. a callback function is a function that is passed to another function (let's call this other function otherFunction) as a parameter, and the callback function is called (or executed) inside the otherFunction.

Call back vs Callback Function

In computer programming, a callback is a reference to executable code, or a piece of executable code, that is passed as an argument to other code. This allows a lower-level software layer to call a subroutine (or function) defined in a higher-level layer.

Callback function part two

Nested queryedit. Wraps another query to search nested fields. The nested query searches nested field objects as if they were indexed as separate documents. If an object matches the search, the nested query returns the root parent document.

What is nested query in Elasticsearch?

ES is document oriented; it stores its entire objects inside documents. It also indexes these documents to make them searchable. A document belongs to a type and a type belongs to an index. You can draw some parallels to how a traditional relational database is structured: Relational DB ⇒ Databases ⇒ Tables ⇒ Rows ⇒ Columns Elasticsearch ⇒ Indices ⇒ Types ⇒ Documents ⇒ Fields

Elastic-Search is document Oriented

One shard each from Node 1 and Node 2 have moved to the new Node 3, and we have two shards per node, instead of three. This means that the hardware resources (CPU, RAM, I/O) of each node are being shared among fewer shards, allowing each shard to perform better. A shard is a fully fledged search engine in its own right, and is capable of using all of the resources of a single node. With our total of six shards (three primaries and three replicas), our index is capable of scaling out to a maximum of six nodes, with one shard on each node and each shard having access to 100% of its node’s resources.

Shards explained in elastic-search

delete searchable

do not forget

email full name first name last name group id

For ES

GET /development_knock_pro_web_user/_search { "query": { "nested": { "path": "profile", "query": { "bool": { "must": [ { "match": { "profile.full_name": "Sebulba" } }, { "match": { "profile.phone_number": "+3817569173539" } } ] } } } } }

ES query example {"query": { "bool": { "must": [ {"'nested": { "path": "", "query": { "bool": { "must": [ { "match": { "user.email":"art_kautzer@lakin.io"}}] } } }}, {"nested": { "path": "", "query": { "bool": { "must": [ { "match": { "profile.full_name": "Sebulba"}}] } } }} ] } }}

Elastic-search Aggregations provide you with the ability to group and perform calculations and statistics (such as sums and averages) on your data by using a simple search query. An aggregation can be viewed as a working unit that builds analytical information across a set of documents.

Elastic-search Aggregations

Must means: Clauses that must match for the document to be included. Should means: If these clauses match, they increase the _score; otherwise, they have no effect. They are simply used to refine the relevance score for each document.

Must vs should in Elastic-Search

Wildcard query Returns documents that contain terms matching a wildcard pattern. A wildcard operator is a placeholder that matches one or more characters. For example, the * wildcard operator matches zero or more characters. You can combine wildcard operators with other characters to create a wildcard pattern.

Wildcard query

query_string supports Lucene syntax to interpret the text, where as multi_match just attempts to match the given "text" against the listed fields' indexed values.

query_string vs multi_match

The key difference is that a query_string query (with multiple fields and the AND operator) will match when each term exists in at least one field while a multi-match query (also using AND) matches only when all the terms exist in at least one field. The terms of a query_string query do not need to exist in the same field, while it does matter in a multi-match.

query_string vs multi_match Part 2

must means: The clause (query) must appear in matching documents. These clauses must match, like logical AND. should means: At least one of these clauses must match, like logical OR. Basically they are used like logical operators AND and OR. See this. Now in a bool query: must means: Clauses that must match for the document to be included. should means: If these clauses match, they increase the _score; otherwise, they have no effect. They are simply used to refine the relevance score for each document

Must vs Should

What is fuzziness in Elasticsearch? In Elasticsearch, fuzzy query means the terms in the queries don't have to be the exact match with the terms in the Inverted Index. To calculate the distance between query, Elasticsearch uses Levenshtein Distance Algorithm

Fuzziness in Elastic-search?

What is fuzziness in Elastic-search? In Elastic-search, fuzzy query means the terms in the queries don't have to be the exact match with the terms in the Inverted Index. To calculate the distance between query, Elastic-search uses Levenshtein Distance Algorithm

Fuzziness in Elastic-search?

Monte Carlo methods, or Monte Carlo experiments, are a broad class of computational algorithms that rely on repeated random sampling to obtain numerical results. The underlying concept is to use randomness to solve problems that might be deterministic in principle.

Monte Carlo Methods || Monte Carlo experiments

Parameters for gt (Optional) Greater than. gte (Optional) Greater than or equal to. lt (Optional) Less than. lte (Optional) Less than or equal to. format (Optional, string) Date format used to convert date values in the query. By default, Elasticsearch uses the date format provided in the 's mapping. This value overrides that mapping format.

Parameters for

indices.query.bool.max_nested_depth (Static, integer) Maximum nested depth of bool queries. Defaults to 20. This setting limits the nesting depth of bool queries. Deep nesting of boolean queries may lead to stack overflow.

indices.query.bool.max_nested_depth

Options hash is a nice concept enabled by a feature of ruby parser. Say, you have a method with some required arguments. Also you may pass some optional arguments. Over time you may add more optional arguments or remove old ones. To keep method declaration clean and stable, you can pass all those optional arguments in a hash. Such method would look like this:

Options hash

What is parser used for? Parser. A parser is a software component that takes input data (frequently text) and builds a data structure – often some kind of parse tree, abstract syntax tree or other hierarchical structure, giving a structural representation of the input while checking for correct syntax.

What is parser used for?

A :: scope operator refers to the global scope instead of local. module Music module Record # perhaps a copy of Abbey Road by The Beatles? end module EightTrack # like Gloria Gaynor, they will survive! end end module Record # for adding an item to the database end To access Music::Record from outside of Music you would use Music::Record. To reference Music::Record from Music::EightTrack you could simply use Record because it's defined in the same scope (that of Music). However, to access the Record module responsible for interfacing with your database from Music::EightTrack you can't just use Record because Ruby thinks you want Music::Record. That's when you would use the scope resolution operator as a prefix, specifying the global/main scope: ::Record.

Scope Operator

How do I know if a code is prefix code? If you have 0, 00, 1, 11 all as keys, this is not a prefix-code because 0 is a prefix of 00, and 1 is a prefix of 11. A prefix code is where none of the keys starts with another key. So for example, if your keys are 0, 10, 11 this is a prefix code and uniquely decipherable.

How do I know if a code is prefix code?

GET /development_knock_pro_web_user/_search { "query": { "query_string": { "query": "(company_id:1 OR group_id:1) AND (company_id:2 OR group_id:2)" } } }

id query

{ "query": { "query_string": { "fields": [ "company_id", "group_id" ], "query": "1 AND 1" } } } { "query": { "terms": { "group_id": [ "1", "2", "3" ] } } }

query_string and query/terms

GET /development_knock_pro_web_user/_search { "query": { "query_string": { "fields": [ "company_id", "group_id" ], "query": "2 AND 2" } } } { "query": { "terms": { "group_id": [ "6", "10", "12" ] } } } { "query": { "bool": { "should": [ { "nested": { "path": "profile", "query": { "multi_match": { "query": "Sebulba", "fields": ["profile.full_name"] } } } }, { "multi_match": { "query": "tyree_johns@yost.biz", "fields": ["email"] } } ] } } }

{ "query": { "bool": { "should": [ { "nested": { "path": "profile", "query": { "multi_match": { "query": "Sebulba", "fields": ["profile.full_name", "profile.first_name", "profile.last_name"] } } } }, { "multi_match": { "query": "tyree_johns@yost.biz", "fields": ["email"] } }, { "query": { "query_string": { "fields": [ "company_id", "group_id" ], "query": "1 AND 1" } } } ] } }

str? equivalent to type?(String) int? equivalent to type?(Integer) float? equivalent to type?(Float) decimal? equivalent to type?(BigDecimal) bool? equivalent to type?(Boolean) date? equivalent to type?(Date) time? equivalent to type?(Time) date_time? equivalent to type?(DateTime) array? equivalent to type?(Array) hash? equivalent to type?(Hash)

Shorthand for common Ruby types:

In the modern era, software is commonly delivered as a service: called web apps, or software-as-a-service. The twelve-factor app is a methodology for building software-as-a-service apps that: Use declarative formats for setup automation, to minimize time and cost for new developers joining the project; Have a clean contract with the underlying operating system, offering maximum portability between execution environments; Are suitable for deployment on modern cloud platforms, obviating the need for servers and systems administration; Minimize divergence between development and production, enabling continuous deployment for maximum agility; And can scale up without significant changes to tooling, architecture, or development practices.

Software is commonly delivered as a service

Declares which components, directives, and pipes belong to the module. Makes some of those components, directives, and pipes public so that other module's component templates can use them. Imports other modules with the components, directives, and pipes that components in the current module need. Provides services that other application components can use.

Angular modularity

Ngrx is a group of Angular libraries for reactive extensions. Ngrx/Store implements the Redux pattern using the well-known RxJS observables of Angular 2. It provides several advantages by simplifying your application state to plain objects, enforcing unidirectional data flow, and more.

Ngrx is a group of Angular libraries for reactive extensions.

Both observables and promises help us work with asynchronous functionality in JavaScript. Promises deal with one asynchronous event at a time, while observables handle a sequence of asynchronous events over a period of time.

What is difference between Observable and promises?

Image result for angular observable Angular Observable use as an interface to handle a variety of common asynchronous operations such as send observable data from child to parent component by defining custom events, handle AJAX or HTTP requests and responses, listen and respond user input in Angular Router and Forms

What is an Observable in Angular 8?

An overview of Reactive Programming Reactive programming is the term which you hear much these days, but what it means? Reactive programming is mainly the way through which the applications handle events as well as the data flow in the applications. In the concept of reactive programming, you will design the components along with some different pieces of the software to react to these changes rather than asking for changes. It could certainly be a great movement. Read more at: https://www.freelancinggig.com/blog/2020/03/11/what-is-the-difference-between-ngrx-and-rxjs/

An overview of Reactive Programming Reactive

git remote add origin yourremotegitrepository After git fetch //you should get all remote branches git checkout branchname

Git repo to work

Basically, it's the "model" of the objects required for your business purposes. Say you were making a sales tracking website - you'd potentially have classes such as Customer, Vendor, Transaction, etc. That entire set of classes, as well as the relationships between them, would constitute your Domain Model.

Domain Model

Template variables help you use data from one part of a template in another part of the template. Use template variables to perform tasks such as respond to user input or finely tune your application's forms.

Template variables

Why we use controls in Angular? The built-in form controls target native HTML elements such as inputs, text areas, checkboxes, etc. formControlName property applied to it. And this is how the HTML element gets binded to the form. Whenever the user interacts with the form inputs, the form value and validity state will be automatically re-calculated

Why we use controls in Angular?

https://www.concretepage.com/angular-2/angular-2-ngform-with-ngmodel-directive-example

Angular NgForm with NgModel Directive Example

From Wikipedia, the free encyclopedia. In object-oriented programming, a member variable (sometimes called a member field) is a variable that is associated with a specific object, and accessible for all its methods (member functions).

What is meant by member variable?

A class groups a set of values and a set of operations. The values and the operations of a class are called its members. Member variables implement the values and member functions implement the operations.

What is member variable and member function?

Parsing is the process of analyzing text made of a sequence of tokens to determine its grammatical structure with respect to a given (more or less) formal grammar. The parser then builds a data structure based on the tokens. This data structure can then be used by a compiler, interpreter or translator to create an executable program or library. is syntactically valid for that language's grammar

Parsing

If I gave you an english sentence, and asked you to break down the sentence into its parts of speech (nouns, verbs, etc.), you would be parsing the sentence. That's the simplest explanation of parsing I can think of. That said, parsing is a non-trivial computational problem. You have to start with simple examples, and work your way up to the more complex.

Parsing 2

Webpack is a tool that lets you compile JavaScript modules, also known as module bundler. Given a large number of files, it generates a single file (or a few files) that run your app. It can perform many operations: helps you bundle your resources. watches for changes and re-runs the tasks.

What is Webpack and why use it?

"pk.eyJ1IjoiZGFybHBlcGl0byIsImEiO iJjazdma3c3cXIwM3ljM29wZ3Rpbm 42OTRuIn0.RBmcyKFsAUsXoqWzbQLGDQ";

sales-app

'pk.eyJ1IjoiZmF0aW1hZ3JhY2UiLCJhIjoiY2s5Z TNtdDlvMGFlMDNlbnViazA3YmUwNi J9.wCbrbShpdtHikD_LWTgBZA';

setter-app

Why This Is a Good Question This is a tough question to Google for unless you know the right search terms. The #{} operator technically performs expression substitution inside a string literal. The Answer The #{} literal is the operator used for interpolation inside double-quoted strings the same way that the backticks or $() construct would be used in Bash. From a practical point of view, the expression inside the literal is evaluated, and then the entire #{} expression (including both the operator and the expression it contains) is replaced in situ with the result.

#{} operator technically performs expression substitution inside a string literal.

The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project.

The API key

Restricting API keys adds security to your application by ensuring only authorized requests are made with your API key.

Restricting API keys

With the Maps SDK for Android, add maps to your Android app including Wear OS apps using Google Maps data, map displays, and map gesture responses. You can also provide additional information for map locations and support user interaction by adding markers, polygons, and overlays to your map.

What is a map SDK?

Maps SDKs. Bring the real world to your users with dynamic maps for the web and mobile. With the Maps SDK for Android, add maps to your Android app including Wear OS apps using Google Maps data, map displays, and map gesture responses. You can also provide additional information for map locations and support user interaction by adding markers, polygons, and overlays to your map.

What is a map SDK?

AIzaSyDRhVHrzLA4L1-6PLpxFNjIVc806Zob_l0

Android API Key

4A:67:8D:E7:2E:E0:71:8A:AF:EC:F3:E9:07:67:D0:70:C8:DC:16:BD

SHA KEY

The Service Usage API is an infrastructure service of Google Cloud that lets you list and manage APIs and Services in your Cloud projects. You can list and manage APIs and Services provided by Google, Google Cloud, and third-party producers

Service Usage API

What is Confluence used for? Confluence is a collaboration wiki tool used to help teams to collaborate and share knowledge efficiently. With confluence, we can capture project requirements, assign tasks to specific users, and manage several calendars at once with the help of Team Calendars add-on

What is Confluence used for?

%i = All values within an array are individually given a symbol

%i operator

Image result for what is a components template A template is a form of HTML that tells Angular how to render the component. Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's host view.

What is Angular component template?

The functional programming paradigm was explicitly created to support a pure functional approach to problem solving. Functional programming is a form of declarative programming. In contrast, most mainstream languages, including object-oriented programming (OOP) languages such as C#, Visual Basic, C++, and Java, were designed to primarily support imperative (procedural) programming. With an imperative approach, a developer writes code that specifies the steps that the computer must take to accomplish the goal. This is sometimes referred to as algorithmic programming. In contrast, a functional approach involves composing the problem as a set of functions to be executed. You define carefully the input to each function, and what each function returns. The following table describes some of the general differences between these two approaches.

Imperative Programing is Procedural Programing Declarative Programing is Functional Programing

Markup is what HTML do to the text inside them. They mark it as a certain type of text(like bold, italic, underline etc). HTML is a language as it has its own code words like any other language. Due to these reasons HTML is calles Markup language

Why is it called Mark up language?

As with most things you should pick which to use based on the context and what is conceptually the correct way to go. A switch is really saying "pick one of these based on this variables value" but an if statement is just a series of boolean checks. Also switches implement strict comparisons

Switch Statement vs If statement

Angular's component model offers strong encapsulation and an intuitive application structure. Components also make your application painless to unit test and can improve the overall readability of your code.

Angular's component model offers strong

Every component has an HTML template that declares how that component renders. You define this template either inline or by file path.

Angular Template

Angular extends HTML with additional syntax that lets you insert dynamic values from your component. Angular automatically updates the rendered DOM when your component's state changes. One application of this feature is inserting dynamic text,

Angular extends HTML

Notice the use of double curly braces--they instruct Angular to interpolate the contents within them.

interpolate

Notice the use of the square brackets--that syntax indicates that you're binding the property or attribute to a value in the component class.

[style.color]="fontColor">

Data-binding =communication TypeScript Code ----> Output Data Template HTML (Business Logic) You can output Data through String interpolation and property Binding React to User Events with event Binding To react to both you use Two way Binding

data binding

Ternary Conditional Operator Typescript

The Typescript conditional operator is a Ternary Operator, which takes three operands. The first operand is a condition to evaluate. It is followed by a question mark (?), then an expression (expression1). It is then followed by a colon (:) and second expression (expression2). If the condition is true, then expression1 executes & if the condition is false, then expression2 executes. The conditional operator is a shorthand way to write an If else statement.

String Interpolation has to resolve to a string in the end

String Interpolation

Borrowed from MDN Docs, this definition of DOM Events is perhaps the most accurate one. Events are nothing but a way of letting us know that some change has occurred in the DOM. This allows us to make our web pages interactive, make them react to these changes. Let us see how we can act on these changes using the TypeScript programming language.

Definition DOM Events

What objects are and how they are related to each other is Inheritance

Inheritance

With Composition you are describing what an object can do

Composition

With Composition you are describing what an object can do You can create a number of different composable objects that you can create. First you have Functions that define what all the object can do Create new functions that return new objects that give you all the functionality you want inside of them It give you more flexibility compared to having to follow an inheritance tree

Composition

Testing Help with refactoring your code/ drying up code and helps a Developer see what behavior it has Difference between Behavior and Implementation

Benefits of Testing

Directives VS Decorators

Directives Directives are the building blocks of Angular applications. An Angular component isn’t more than a directive with a template. When we say that components are the building blocks of Angular applications, https://angular.io/guide/attribute-directives https://www.sitepoint.com/practical-guide-angular-directives/ Decorators Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime. Decorators are functions that are invoked with a prefixed @ symbol, and immediately followed by a class, parameter, method or property. The decorator function is supplied information about the class, parameter or method. We can say Decorators are functions, and there are four things (class, parameter, method and property) that can be decorated, which will follows with each different function signatures. There are some good blogs you can read them for more info... https://angular-2-training-book.rangle.io/features/typescript/decorators https://codecraft.tv/courses/angular/es6-typescript/decorators/

Android Permissions

NSLocationAlwaysUsageDescription Your location is not needed. This request has popped up due to a 3rd party framework used by the app in a context that does NOT need you to reveal you location. Do be sure to check audit trail for the location queries on ios 15 or later. NSLocationWhenInUseUsageDescription You will get zero benefit allowing this app accessing your location. You should never see this alert. If you do alert technical support at foo@bar.baz

IOS permissions

Sources

A map or layer source states which data the map should display. Specify the type of source with the "type" property, which must be one of vector, raster, raster-dem, geojson, image, video. A source provides map data that Mapbox GL JS can use with a style document to render a visual representation of that data. This delegation makes it possible to style the same source in different ways, as you might do to differentiate the appearances of different types of roads in a highways layer.

enableMapLayer(map: mapboxgl.Map){ map.loadImage( 'https://docs.mapbox.com/mapbox-gl-js/assets/cat.png', (error, image) => { if (error) throw error; // Add the image to the map style. map.addImage('cat', image); // Add a data source containing one point feature. map.addSource('point', { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [ -111.80923, 39.954685 ] }, 'properties': { 'title': 'Mapbox', 'description': 'Utah, USA' } } ] } }); // Add a layer to use the image to represent the data. map.addLayer({ 'id': 'points', 'type': 'symbol', 'source': 'point', // reference the data source 'layout': { 'icon-image': 'cat', // reference the image 'icon-size': 0.25 } }); } ); }; }

Icons in Angular

public geojson = { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Point', coordinates: new mapboxgl.LngLat(-111.80923, 39.954685) }, properties: { title: 'Mapbox', description: 'Utah, USA' } }, { type: 'Feature', geometry: { type: 'Point', coordinates: new mapboxgl.LngLat(-122.414, 37.776) }, properties: { title: 'Mapbox', description: 'San Francisco, California' } } ] } // enableMapLayer(map: mapboxgl.Map) { // const marker = new mapboxgl.Marker() // .setLngLat([-122.414, 37.776]) // .addTo(map); // add the marker to the map // } // } enableMapLayer(map: mapboxgl.Map) { // add markers to map for (const feature of this.geojson.features) { // create a HTML element for each feature // const el = document.createElement('div') // el.className = 'marker' // make a marker for each feature and add it to the map console.log(feature) new mapboxgl.Marker() .setLngLat(feature.geometry.coordinates) .addTo(map) } } }

Markers in Angular

Every component consuming the shared service receives the most up to date data

Behavior Subject any => any

From what I understand, to "resolve a dependency" means to "go get" it (i.e. from the service container) so it can be "used" where it's being injected or "passed" into.

Resolve a Dependency

From my own personal notes (mostly snippets from the docs, google group posts, and SO posts): Modules provide a way to namespace/group services, directives, filters, configuration information and initialization code help avoid global variables are used to configure the $injector, allowing the things defined by the module (or the whole module itself) to be injected elsewhere (Dependency Injection stuff) Angular modules are not related to CommonJS or Require.js. As opposed to AMD or Require.js modules, Angular modules don't try to solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and both module systems can live side by side and fulfill their goals (so the docs claim). Services are singletons, so there is only one instance of each service you define. As singletons, they are not affected by scopes, and hence can be accessed by (shared with) multiple views/controllers/directives/other services You can (and probably should) create custom services when two or more things need access to the same data (don't use root scope) or you just want to neatly encapsulate your data you want to encapsulate interactions with, say, a web server (extend $resource or $http in your service) Built-in services start with '$'. To use a service, dependency injection is required on the dependent (e.g., on the controller, or another service, or a directive). Directives (some of the items below say essentially the same thing, but I've found that sometimes a slightly different wording helps a lot) are responsible for updating the DOM when the state of the model changes extend HTML vocabulary = teach HTML new tricks. Angular comes with a built in set of directives (e.g., ng-* stuff) which are useful for building web applications but you can add your own such that HTML can be turned into a declarative Domain Specific Language (DSL). E.g., the and elements on the Angular home page demo "Creating Components". Non-obvious built-in directives (because they don't start with "ng"): a, form, input, script, select, textarea. Under Angular, these all do more than normal! Directives allow you to "componentize HTML". Directives are often better than ng-include. E.g., when you start writing lots of HTML with mainly data-binding, refactor that HTML into (reusable) directives. The Angular compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensions directives. When you boil it all down, a directive is just a function which executes when the Angular compiler encounters it in the DOM. A directive is a behavior or DOM transformation which is triggered by a presence of an attribute, an element name, a class name, or a name in a comment. Directive is a behavior which should be triggered when specific HTML constructs are encountered in the (HTML) compilation process. The directives can be placed in element names, attributes, class names, as well as comments. Most directives are restricted to attribute only. E.g., DoubleClick only uses custom attribute directives. see also What is an angularjs directive? Define and group Angular things (dependency injection stuff) in modules. Share data and wrap web server interaction in services. Extend HTML and do DOM manipulation in directives. And make Controllers as "thin" as possible.

A good explanation on modules, services, and directives

A Markup Language HTML is a type of markup language. It encapsulates, or “marks up” data within HTML tags, which define the data and describe its purpose on the webpage. The web browser then reads the HTML, which tells it things like which parts are headings, which parts are paragraphs, which parts are links, etc.

HTML

markup language CSS is the acronym for Cascade Styling Sheets. In short, it is a sheet style language, which is a type of language you can use to describe the presentation of a markup language – in this case, to describe the movements of HTML.

CSS but I like saying its a styling language

A provider is an object declared to Angular so that it can be injected in the constructor of your components, directives and other classes instantiated by Angular

What is provider

https://blog.angular-university.io/angular-dependency-injection

Angular Dependency Injection: Complete Guide

https://www.tektutorialshub.com/angular/angular-providers/

The four types of of providers

Arrays and objects are reference types and have nothing to do with Angular and everything to do with Javascript

Reference types

You can use the slice method to return a new array

slick()

In Angular, RxJS provides 4 types of subjects to create an observable. Those 4 types are Subject, BehaviorSubject, ReplaySubject and AsyncSubject. They can be distinguished from each other by looking at how they react to subscribe.

In Angular, RxJS provides 4 types of subjects to create an observable

The next() method returns an object with two properties done and value. You can also provide a parameter to the next method to send a value to the generator.

The next() function is a generator function

Observable uses generators to represent values that change over time. Generators enable interaction, animation, realtime data streaming, and all the other exciting, dynamic capabilities of Observable notebooks. The simplest generator is a cell that yields a single value

Are Observables generators?

Generators are functions that return an object which conforms to the Iterable- and Iterator protocols. You might not have heard of these protocols, but, ever since ES2015, they are used to loop over or spread objects like Array, Map, Set, and String.

When would you use a generator function?

In Rails, pluck is a shortcut to select one or more attributes without loading the corresponding records just to filter out the selected attributes. It returns an Array of attribute values

Pluck Method in Ruby

The next method allows you to execute code within your generator. The next method has two properties that re done and value. The value will be whatever is yielded and the done property will evaluate too true or false. True meaning there is not code to run and false meaning their is still code that needs to be run.

Well be back soon!

Sorry for the inconvenience. Were performing some maintenance at the moment.

— Ion Solar Dev Team

The try statement defines the code block to run (to try). The catch statement defines a code block to handle any error. The finally statement defines a code block to run regardless of the result. The throw statement defines a custom error.

In PHP, mainly four types of errors are considered: Syntax Error or Parse Error. Fatal Error. Warning Error.

PHP, mainly four types of errors

new date and just calling time

' (dot) operator is PHP's concatenation operator. Two string operands are joined together (characters of right hand string appended to left hand string) and returns a new string. PHP also has

SQL injection, also known as SQLI, is a common attack vector that uses malicious SQL code for backend database manipulation to access information that was not intended to be displayed. This information may include any number of items, including sensitive company data, user lists or private customer details.

What do SQL injections attack?

Working on persisting through sessions with multiple requests

make a hard reset to the #4 commit

Curl sessions, multiple instantiation with dependency injection, deprecated versions on the server vs local env, not being able to handle multiple sessions, figuring it all out with expired and refresh tokens. Error handling made it harder because of its lack of reporting. Reimplement on the database and the next thing is to check every endpoint

mysql fieldpro_app -u root -p

mysql fieldpro_app -u fieldpro_user -p

desc app_users

mysql -help

## Background ## Modifications ## Result ## Testing

https://developer.android.com/

Make assumptions on their PRs(put yourself in their shoes) 👞 and think how can it be done better what is the 20 percent will make it 80 percent better

NgClass DIRECTIVE Adds and removes CSS classes on an HTML element.

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.

A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method Document.getElementsByClassName().

The onblur event occurs when an element loses focus. The onblur event is often used on input fields. The onblur event is often used with form validation (when the user leaves a form field).

Project_Id : "a008b00001UKhCHAA1"

lc/duplicate-accounts-bug)

front

lc/duplicate-accounts-bu

back

Abdulhai, Sherif - (919) 454-1732

Jonathan Crawford(1) 11:27 and imran abdullah(2) 10:45 && 11:02 created the Abdulhai, Sherif twice These guys are setters that are on the same team Raleigh Sales team Look for images within the account Do they have the same address

Once the the lead gets converted to a customer and the calendar is filled out it does not show up unless refreshed. So users might be making another one and seeing it.

held date setters get a part of what they are owed

contract execution date sales and setter gets payed out

Notes on line 97

Clear and descriptive endpoints in POSTMAN. Helps with Testing and finding errors. Testflight does not replace POSTMAN

Separate PRs for white spaces because it makes the really hard to read in PRs

Separate your commits and separate PRs if the task is very large. In Jira break up the functionality/task with in it being one PR. If not a huge PR could result in us missing mistakes and not seeing Edge cases.

Make the title and mainly the background much more descriptive to avoid edge cases

Prove and show you tested it

var arr = [2, 5, 6, 3, 8, 9]; var val,j=0; // use of push() method for(j=0; j<4 ; j++){ var y = arr[j]; var x = y * j; val = arr.push(x); } // printing element console.log( arr ); // [2, 5, 6, 3] which is related to j<4 // 0, 1, 2, 3 = Incrementing pattern from j<4 // 0: 0 * 0 = 0 // 1: 1 * 5 = 5 // 2: 2 * 6 = 12 // 3: 3 * 3 = 9

Binding types other than interpolation have a target name to the left of the equal sign. The target of a binding is a property or event, which you surround with square bracket ([ ]) characters, parenthesis (( )) characters, or both ([( )]) characters. The binding punctuation of [], (), [()], and the prefix specify the direction of data flow. Use [] to bind from source to view Use () to bind from view to source Use [()] to bind in a two-way sequence of view to source to view

Use interpolation to display the value of this variable in the corresponding component template: content_copy

Current customer: {{ currentCustomer }}

Appointment = Schedule or Disposition Schedule a number of schedules pertaining to its number per day, yesterday,weekly, monthly, ect Deposition is held Apts or not held Apts

DNS pins are the only pin that is not a held pin. All the Scheduling info it held in Sales Force

You are grabbing the whole teams Appointments/Schedules

dev.iondeveloper.com

{ "method": "get_sales_team_qs", "timeframe": "TODAY", "startDate": "2020-01-01", "endDate": "2020-01-01" }

{ "method": "get_knock_stats" }

Appointment_Held_Date_Time_Stamp__c

SF Call

getQuickStatsForIndividual getAllQSData

Return_Appointment_Date_Time__c its in UTC and convert moutain standard time

Use intelligent caching strategies: Use intelligent caching strategies, such as dynamic caching and stale-while-revalidate, to balance the need for fresh data with the need for quick access to pre-cached resources. ---Customize the pre-caching strategy based on your specific requirements.---

CACHING

Repos is in memory and logic is in Memory. This is important to understand when talking about pre-caching or you can say caching. Also caching in memory vs from a Redis server. Caching in memory in the local browser is MUCH FASTER. This helps your pages load faster and your server does not get bogged down. Developers control over the cache, meaning they can determine when and how long a file is cached as well as serve it to the browser without going to the network, meaning it can be used to create web apps that work offline.

$start_date = "2014-01-01T00:00:00.000Z"; $end_date = date("Y-m-d")."T23:59:59.999Z";

$startDate = new DateTime($body['startDate']); $startDate = $startDate->format('Y-m-d'); $endDate = new DateTime($body['endDate']); $endDate = $endDate->format('Y-m-d');

$start = date('Y-m-d\TH:i:s\Z', strtotime($res[0]->Return_Appointment_Date_Time__c . ' 00:00:00')); $end = date('Y-m-d\TH:i:s\Z', strtotime($res[0]->Return_Appointment_Date_Time__c . ' 23:59:59')); // $dateRange = $this->formatDateRange($dateLiteral, "Return_Appointment_Date_Time__c", $start, $end); // $dateRange = $this->formatDateRange($dateLiteral, "Return_Appointment_Date_Time__c", date('Y-m-d', $start), date('Y-m-d', $end)); // $start = $end = strtotime($res[0]->Return_Appointment_Date_Time__c); // $end = strtotime($res[0]->Return_Appointment_Date_Time__c . ' 23:59:59'); $dateRange = $this->formatDateRange($dateLiteral, "Return_Appointment_Date_Time__c", date('Y-m-d H:i:s', $start), date('Y-m-d H:i:s', $end)); // $appointmentDate = new DateTime($res[0]->Return_Appointment_Date_Time__c); // $appointmentDate = $appointmentDate->format('Y-m-d'); // $start = strtotime($appointmentDate); // $end = strtotime($appointmentDate . ' 23:59:59'); // $dateRange = $this->formatDateRange($dateLiteral, "Return_Appointment_Date_Time__c", date('Y-m-d H:i:s', $start), date('Y-m-d H:i:s', $end));

onGoClick() { let start = moment(this.startDate).format("YYYY-MM-DD"); let end = moment(this.endDate).format("YYYY-MM-DD"); this.utilities.showToast("Please wait..."); // this.selectedPeriod.periodNew = 'CUSTOM'; this.fetchQuickStats(); }

// Get Return_Apt_held/Total Appointments // $start = date("Y-m-d\TH:i:s\Z", strtotime($start)); // $end = date("Y-m-d\TH:i:s\Z", strtotime($end)); // $start = date("Y-m-d\TH:i:s\Z", $start); // $end = date("Y-m-d\TH:i:s\Z", $end);

Add alert for self Gen so that they have a disposition. Change the alert time from being the day after to 4 hours after the appointment so that when they disposition it. Thats for all appointments. There is self Gen and setters

SELECT SalesPerson__r.Name, SalesPerson__r.Active__c FROM Project__c

SELECT SalesPerson__c, SalesPerson__r.Active__c FROM Project__c WHERE SalesPerson__r.Active__c = false

If all the values are returning as false when the Salesperson is active, then there may be an issue with the way the Active__c field is being evaluated in the backend code. Here's what you can do to troubleshoot: Check the data in Salesforce to ensure that the Active__c field is being set correctly for each Salesperson. Double-check the code to make sure that the logic for evaluating the Active__c field is correct. One possibility is that the value is being inverted somewhere in the code, causing true to be interpreted as false and vice versa. Add some debug statements to the code to print out the value of the Active__c field for each Salesperson, and see if it matches what you expect based on the data in Salesforce. This can help pinpoint where the issue is occurring.

Gertrude Gutierrez

Update team and individual stats RFP stat to only return self sets

sudo xcode-select --reset

platform :ios, '14.0' use_frameworks! workaround to avoid Xcode caching of Pods that requires # Product -> Clean Build Folder after new Cordova plugins installed # Requires CocoaPods 1.6 or newer install! 'cocoapods', :disable_input_output_paths => true def capacitor_pods pod 'Capacitor', :path => '../../node_modules/@capacitor/ios' pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios' pod 'CapacitorCommunityIntercom', :path => '../../node_modules/@capacitor-community/intercom' pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app' pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser' pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera' pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard' pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation' pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics' pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard' pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share' pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar' pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins' end target 'App' do capacitor_pods # Add your Pods here end

heroku logs -r staging heroku logs -t -r staging heroku login heroku -version

Manually Approve an App Device for a Sales Rep Fix Customer Who Isn't Getting a Password Reset Email

When using NULL or "false" to represent a falsey value, it's important to ensure that the comparison operators are appropriate. In your code, you're using the != operator to check if Proposal_Requested_Date__c is not equal to "false". This comparison will return true if Proposal_Requested_Date__c is NULL or false, which may not be what you intended. It may be better to use strict equality comparison (!== and ===) instead of loose equality comparison (!= and ==) to avoid any unexpected type coercion. It's also important to ensure that the data types of the values you're comparing are consistent. For example, Financing__r->Contract_Stage_Complete__c may be returning a boolean value while you're checking for NULL. If this is the case, the condition will always evaluate to false. Double-check the data types returned by the Salesforce API and adjust your code accordingly. Another thing to consider is that the code currently assumes that the lifecycle stages are sequential and that each stage is completed before moving to the next one. However, this may not always be the case, especially if there are multiple parallel processes happening at the same time. It may be better to use a more flexible approach that allows for multiple stages to be in progress simultaneously. Lastly, you may want to consider adding more error handling to the code to handle any unexpected exceptions that may occur during the API calls or data processing. This can help prevent your application from crashing and provide better feedback to the end user. With these considerations in mind, you may want to review your implementation and make any necessary adjustments to ensure that it works as expected.

Based on the code snippet, the issue seems to be related to how the NULL value is handled. In PHP, NULL is a special value that represents the absence of a value. In the given code, if a value is set to NULL, the code does not handle this value and does not update the lifecycle accordingly. This is because the code only checks for non-null values when updating the lifecycle. To fix this issue, you need to add a check for NULL values in each condition where the code is checking for non-null values. For example, instead of using if($res[0]->Proposal_Requested_Date__c != NULL), you should use if($res[0]->Proposal_Requested_Date__c !== NULL). The !== operator checks for strict equality, including the type of the value, which includes NULL.

There are several benefits to creating your own libraries in Angular: Reusability: Libraries allow you to create reusable components, services, and other functionality that can be used across multiple projects. This can save a significant amount of development time, as you don't have to recreate the same functionality every time you start a new project. Consistency: By creating your own libraries, you can ensure that your code is consistent across different projects. This can make it easier to maintain and update your codebase over time. Scalability: Libraries can help you manage the complexity of larger projects by breaking them down into smaller, more manageable pieces. This can make it easier to add new features and functionality as your project grows. Maintainability: Libraries can help you keep your codebase organized and maintainable by enforcing separation of concerns and providing clear boundaries between different parts of your application. Collaboration: By creating your own libraries, you can share your code with other developers and collaborate more easily on projects. This can help you build better software faster, as you can leverage the expertise and experience of others in your team or community. Overall, creating your own libraries in Angular can help you build better software faster, improve code quality and maintainability, and collaborate more effectively with others in your team or community.

An Angular library can be defined as a collection of objects that provide reusable functionality for Angular applications. These objects can include components, services, directives, pipes, and other elements of an Angular application. However, it's important to note that an Angular library is not just a collection of objects - it's also a packaged and distributable unit of code that can be published to a package registry such as npm. This packaged form of the library includes the compiled code and any dependencies needed for the library to work. When you create an Angular library, you define a public API that exposes the objects and functionality that you want other developers to use. This API is defined in the public_api.ts file, which is the entry point to your library. Overall, an Angular library can be thought of as a collection of objects, but it's also a packaged and distributable unit of code with a defined public API.

"Centric Maven" is not a commonly used phrase, but it can be interpreted as a person or business that is an expert in a particular area or industry and is focused on delivering customer-centric solutions or services. The term "centric" refers to being centered or focused on a particular thing or group, while "maven" refers to someone who is highly knowledgeable or skilled in a particular field. So, together, "Centric Maven" can be understood as a business or individual that is highly skilled and focused on delivering solutions or services that are centered around the needs and satisfaction of their customers

To find micro businesses that may need your customer service services, you can try the following strategies: Online search: Use search engines like Google to find small e-commerce businesses that may need customer service support. Use keywords like "small e-commerce business" or "micro business" to narrow down your search. Social media: Check social media platforms like LinkedIn and Twitter for small business owners who may be looking for customer service support. You can also join groups and forums related to e-commerce and small business to connect with potential clients. Local business directories: Check local business directories or chambers of commerce to find small businesses in your area that may need customer service support. Networking: Attend networking events or conferences related to e-commerce or small business to meet potential clients and make connections. Cold calling/emailing: You can also reach out to small businesses directly via email or phone to offer your services and see if they have any customer service needs. Remember to tailor your approach to each potential client and demonstrate how your services can benefit their business. Be prepared to answer questions about your experience, pricing, and availability.

Automating your clients' customer service can help you create passive income by reducing the amount of time and effort you need to invest in each client. Here are some steps you can take to automate your clients' customer service: Use chatbots: Chatbots are automated systems that can answer common customer inquiries and provide support 24/7. You can use chatbots to handle basic customer inquiries and free up your time to focus on more complex issues. Implement an FAQ section: Create a comprehensive FAQ section on your client's website or app to answer common customer questions. This can reduce the number of inquiries your client receives and help customers find answers to their questions quickly and easily. Use pre-written responses: Create a library of pre-written responses to common customer inquiries that you can quickly copy and paste when responding to emails or social media messages. Use ticketing systems: Implement a ticketing system to track customer inquiries and ensure that they are addressed in a timely manner. You can set up automated responses to let customers know that their inquiry has been received and is being addressed. Use customer feedback tools: Implement customer feedback tools to automatically collect feedback from customers and identify areas for improvement in your client's customer service process. By implementing these strategies, you can automate many of the routine tasks involved in customer service and free up your time to focus on higher-level tasks and growing your business.

Yes, Pannellum is a JavaScript library that can handle 360 panoramic photos in various formats, including the .360 file format used by the GoPro MAX camera to save its 360 photos. Pannellum supports multiple panoramic image formats such as equirectangular, cubemap, and multiresolution images, including the proprietary .360 format used by the GoPro MAX. To display a 360 photo captured by the GoPro MAX using Pannellum, you will need to convert the .360 file into a format that can be read by Pannellum, such as the equirectangular format. To convert the .360 file to an equirectangular format, you can use the GoPro VR Reframe software, which is available for free on the GoPro website. Once you have converted the .360 file to an equirectangular format, you can then use Pannellum to display the 360 panoramic photo on your website or application.

The error message suggests that you haven't created a Cloud Firestore database in your Firebase project yet. To fix this error, follow these steps: The error message suggests that the Cloud Storage bucket you are trying to use in your Firebase project requires a location setting to be configured, but it has not been set yet. If you are using Firebase CLI to deploy your codebase to Firebase, and the terminal is asking whether to initialize a new codebase or overwrite an existing one, it means that Firebase CLI has detected that you have not previously deployed any codebase to your Firebase project. If you are not seeing the "Cloud Resource Location" option in your Firebase project settings, it could be because your project was created before Google started enforcing regionalization of resources. In that case, you can try creating a new Firebase project with regionalization enabled and migrate your existing resources to the new project.

Path based redirection CORS NGINX

endpoint: new URL('https://api.iondeveloper.com/fieldpro/latest/admin'), endpoint: new URL('https://dev.iondeveloper.com/api/fieldpro/'),

getActiveTemplates()); return; break; case 'get_template': $template = new TemplateController(); echo json_encode($template->getTemplate($_REQUEST['templateId'])); return; break; case 'get_complete_template': $template = new TemplateController(); echo json_encode($template->getCompleteTemplate($_REQUEST['id'])); return; break; case 'get_question_categories': $category = new CategoryController(); echo json_encode($category->getCategories($_REQUEST['templateId'])); return; break; case 'get_template_questions': $question = new QuestionController(); echo json_encode($question->getTemplateQuestions($_REQUEST['templateId'])); return; break; case 'get_question_types': $question = new QuestionController(); echo json_encode($question->getQuestionTypes()); return; break; case 'get_response': $response = new ResponseController(); echo json_encode($response->getResponse($_REQUEST['id'])); return; break; case 'get_responses': $response = new ResponseController(); echo json_encode($response->getResponses($_REQUEST['page'])); return; break; case 'get_response_photos': $response = new ResponseController(); echo $response->getResponsePhotos($_REQUEST['id']); return; break; case 'search_responses': $response = new ResponseController(); echo json_encode($response->searchResponses($_REQUEST['term'])); return; break; case 'get_work_types': $worktype = new WorkTypeController(); echo json_encode($worktype->getWorkTypes()); return; break; case 'get_sf_work_types': $worktype = new WorkTypeController(); echo json_encode($worktype->getSFWorkTypes()); return; break; default: $return['success'] = false; $return['message'] = 'Invalid or no API method sent'; echo json_encode($return); return; break; } return; break; case 'POST': switch ($_REQUEST['method']) { case 'create_template': $template = new TemplateController(); echo json_encode($template->createTemplate($body)); return; break; case 'create_question_category': $category = new CategoryController(); echo json_encode($category->createCategory($body)); return; break; case 'create_question_categories': $category = new CategoryController(); echo json_encode($category->createCategories($body)); return; break; case 'create_question': $question = new QuestionController(); echo json_encode($question->createQuestion($body)); return; break; case 'create_questions': $question = new QuestionController(); echo json_encode($question->createQuestions($body)); return; break; case 'create_work_type': $worktype = new WorkTypeController(); echo json_encode($worktype->mapWorkType($body)); return; break; case 'create_work_types': $worktype = new WorkTypeController(); echo json_encode($worktype->mapWorkTypes($body)); return; break; default: $return['success'] = false; $return['message'] = 'Invalid or no API method sent'; echo json_encode($return); return; break; } return; break; case 'PUT': switch ($_REQUEST['method']) { case 'update_template': $template = new TemplateController(); echo json_encode($template->updateTemplate($body)); return; break; case 'deactivate_template': $template = new TemplateController(); echo json_encode($template->deactivateTemplate($body)); return; break; case 'updated_work_type': $worktype = new WorkTypeController(); echo json_encode($worktype->mapWorkType($body)); return; break; default: $return['success'] = false; $return['message'] = 'Invalid or no API method sent'; echo json_encode($return); return; break; } return; break; case 'DELETE': switch ($_REQUEST['method']) { case 'delete_work_type': $worktype = new WorkTypeController(); echo json_encode($worktype->deleteWorkType($_REQUEST['id'])); return; break; case 'delete_work_type_group': $worktype = new WorkTypeController(); echo json_encode($worktype->deleteWorkTypeGroup($_REQUEST['id'])); return; break; default: $return['success'] = false; $return['message'] = 'Invalid or no API method sent'; echo json_encode($return); return; break; } return; break; default: $return['success'] = false; $return['message'] = 'Invalid or no API method sent'; echo json_encode($return); return; break; }

Image Details

what does the cordova-plugin-telerik-imagepicker do

In the provided code snippet, the function energyLifetime has a parameter $params that is set to null by default. This means that if no value is passed for $params when calling the energyLifetime function, it will be assigned the value null. Setting the default value of a parameter to null provides flexibility when calling the function. If the caller wants to specify specific parameters for the API request, they can pass them as an argument when calling the function. If no specific parameters are needed, the function can be called without passing any arguments, and the default value of null will be used. For example, the function can be called in the following ways: energyLifetime(); - In this case, $params will be null, and the API request will be made without any additional parameters. energyLifetime($specificParams); - Here, $params will take the value of $specificParams, and the API request will include the specified parameters. By allowing $params to be set to null, the function provides flexibility for handling different scenarios and allows the caller to customize the parameters based on their requirements.

Now you have two generic methods getEnphaseData and getSolarData that handle the API calls. The other methods (getEnphaseSystemInfo, getEnphaseInventory, etc.) utilize these generic methods by passing the appropriate parameters. This way, you have consolidated the API calls into two methods, reducing code duplication and improving maintainability. for system-data.ts

Idea Gun options; Pulls all the guns that exist and gives you common prices, reviews, and specs. Cons and Pros.

Disabling OPTIONS requests altogether is not recommended, as OPTIONS requests play a crucial role in the HTTP protocol and the CORS mechanism. The OPTIONS request is part of the CORS preflight process, which allows servers to specify which origins, methods, and headers are allowed for cross-origin requests. By disabling OPTIONS requests and treating all requests as GET requests, you may encounter several issues: Cross-origin requests may fail: Without the OPTIONS request and the CORS preflight process, browsers may block cross-origin requests. This can lead to security restrictions and prevent your application from accessing resources from different domains. Limited functionality: OPTIONS requests provide important information about the server's capabilities and supported methods. By treating all requests as GET, you might miss out on the ability to perform other types of requests, such as POST, PUT, or DELETE, which may be necessary for certain operations. Security risks: The CORS mechanism is designed to protect users from cross-origin attacks. By bypassing the OPTIONS request and allowing all requests as GET, you may introduce security vulnerabilities, as your server won't have the opportunity to validate and enforce CORS policies. It's important to understand and properly handle OPTIONS requests within your server-side code to ensure secure and reliable cross-origin communication.

enphase.page.ts import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { SystemData } from 'src/app/providers/system-data'; import { Chart } from 'chart.js'; import * as moment from 'moment'; import { ActivatedRoute } from '@angular/router'; import { UtilityClass } from 'src/app/utils/UtilityClass'; import { InventoryModal } from './inventory/inventory.modal'; @Component({ selector: 'app-enphase', templateUrl: './enphase.page.html', styleUrls: ['./enphase.page.scss'], }) export class EnphasePage implements OnInit { @ViewChild('barCanvas', { static: false }) barCanvas: ElementRef; barChart: any; private enphaseId; public summary = []; public summarymwh = 0; public timePeriod = 'days'; public lastSevenDays = []; public sevenLabels = []; public monthView = []; public monthLabels = []; private yearData = []; private yearLabels = []; public customView = []; public customLabels = []; public startDate; public endDate; public isCustom = false; public errorLabel = ""; public lastSevenDaysTotal = 0; public currentMonthTotal = 0; public yearTotal = 0; private sInventory; constructor(private route: ActivatedRoute, private systemData: SystemData, private utils: UtilityClass) { } ngOnInit() { this.enphaseId = this.route.snapshot.paramMap.get('eid'); } ngAfterViewInit() { this.initiateDatas(); this.barChart = new Chart(this.barCanvas.nativeElement, { type: 'bar', data: { labels: [], datasets: [{ label: 'kWh', data: [], backgroundColor: '#2196F3', borderColor: ['rgba(fff,fff,fff,1)'], borderWidth: 1, radius: 0 }] }, options: { animation: { duration: 1500 }, maintainAspectRatio: false, legend: { display: false }, scales: { xAxes: [{ display: true, ticks: { autoSkip: true, maxTicksLimit: 12 } }], yAxes: [{ display: true, ticks: { beginAtZero: true }, scaleLabel: { labelString: "Values in kWh", display: true }, }] } } }); } ionViewDidEnter() { // Update the chart data and display the graph this.barChart.data.labels = this.sevenLabels; this.barChart.data.datasets[0].data = this.lastSevenDays; this.barChart.update(); } setTimePeriod(period) { this.isCustom = false; if (period == 'days') { this.barChart.data.labels = this.sevenLabels; this.barChart.data.datasets[0].data = this.lastSevenDays; this.barChart.update(); } else if (period == 'month') { this.barChart.data.labels = this.monthLabels; this.barChart.data.datasets[0].data = this.monthView; this.barChart.update(); } else if (period == 'year') { this.barChart.data.labels = this.yearLabels; this.barChart.data.datasets[0].data = this.yearData; this.barChart.update(); } } initiateDatas() { this.systemData.getEnphasePreviousSeven(this.enphaseId) .subscribe(data => { let production = []; if (data.production && data.production.length > 0) { for (let i = 0; i < data.production.length; i++) { let prodValue = this.tokWh(data.production[i]); this.lastSevenDaysTotal += data.production[i]; production.push(prodValue); } this.lastSevenDaysTotal = this.tokWh(this.lastSevenDaysTotal); } this.sevenLabels = this.Last7Days(data.start_date); this.lastSevenDays = production; this.barChart.data.labels = this.sevenLabels; this.barChart.data.datasets[0].data = this.lastSevenDays; this.barChart.update(); }); this.systemData.getEnphaseEnergyLife(this.enphaseId) .subscribe(data => { if (data == null) return let production = []; let labelsArray = []; if (data.production) { let monthYear = moment().format("YYYY-MM"); let totalDays = moment(monthYear, "YYYY-MM").daysInMonth(); let prodCount = 0; for (let day = 1; day <= totalDays; day++) { if (prodCount < data.production.length) { let prodValue = this.tokWh(data.production[prodCount]); this.currentMonthTotal += data.production[prodCount]; production.push(prodValue); prodCount++; } else production.push(0); labelsArray.push(day); } this.currentMonthTotal = this.toMWh(this.currentMonthTotal); } this.monthLabels = labelsArray; this.monthView = production; if (this.monthView.length < 1) this.monthView.push(0); this.barChart.data.labels = this.sevenLabels; this.barChart.data.datasets[0].data = this.lastSevenDays; this.barChart.update(); }); this.systemData.getEnphaseYearly(this.enphaseId) .subscribe(data => { console.log("Yearly", data) this.yearLabels = ['Jan', 'Feb', "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; let arrayData = []; let yearCount = 0; for (let i = 0; i < 12; i++) { arrayData.push(this.tokWh(data[i])); this.yearTotal += data[i]; if (data[i] > 0) { yearCount++; } } this.yearData = arrayData; this.yearTotal = this.toMWh(this.yearTotal); }); this.startDate = moment().startOf('month').format('YYYY-MM-DD'); this.endDate = moment().format('YYYY-MM-DD'); } Last7Days(date) { let sevenArray = []; for (var i = 0; i < 7; i++) { let sDate = moment(date).add(i, "days"); sevenArray.push(sDate.format("DD/MM")); } return sevenArray; } getGraphData(start, end, prod, startProd, labelFormat) { let labels = []; let datas = []; let toContinue = true; let startPush = false; let currD = moment(start); let prodCount = 0; while (toContinue) { if (currD.isSame(startProd)) startPush = true; if (startPush && prodCount < prod.length) { let prodValue = this.tokWh(prod[prodCount]); datas.push(prodValue); prodCount++; } else datas.push(0); labels.push(currD.format(labelFormat)); if (currD.isSame(end)) toContinue = false; currD.add(1, "days"); } return { label: labels, data: datas } } roundToTwoDec(num) { return Math.round(parseFloat(num) * 100) / 100; } roundToThreeDec(num) { return Math.round(parseFloat(num) * 1000) / 1000; } tokWh(watts) { return this.roundToTwoDec(watts / 1000); } toMWh(watts) { let kWh = watts / 1000; return this.roundToThreeDec(kWh / 1000); } getMomentDate(mDate, format) { if (mDate) return moment(mDate * 1000).format(format) else return ""; } }

system.data.ts import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { tap } from 'rxjs/operators'; import { IonSolarService } from '../services/ion-solar.service'; @Injectable({ providedIn: 'root' }) export class SystemData { private urlEndpointEnphase = "enphase/"; private urlEndpointSolar = "solaredge/index.php"; constructor(public ionService: IonSolarService) {} private cache: { [key: string]: any } = {}; getEnphaseYearly(enphaseId): Observable { const cacheKey = `enphaseYearly_${enphaseId}`; if (this.cache[cacheKey]) { return of(this.cache[cacheKey]); } else { const params = { method: 'year', enphase_id: enphaseId }; return this.ionService.makeGETRequest(this.urlEndpointEnphase, params).pipe( tap(response => { if (response) { this.cache[cacheKey] = response; } }) ); } } getEnphaseEnergyLife(enphaseId): Observable { const cacheKey = `enphaseEnergyLife_${enphaseId}`; if (this.cache[cacheKey]) { return of(this.cache[cacheKey]); } else { const params = { method: 'energyLifetime', enphase_id: enphaseId }; return this.ionService.makeGETRequest(this.urlEndpointEnphase, params).pipe( tap(response => { if (response) { this.cache[cacheKey] = response; } }) ); } } getEnphasePreviousSeven(enphaseId): Observable { const cacheKey = `enphasePreviousSeven_${enphaseId}`; if (this.cache[cacheKey]) { return of(this.cache[cacheKey]); } else { const params = { method: 'previousSeven', enphase_id: enphaseId }; return this.ionService.makeGETRequest(this.urlEndpointEnphase, params).pipe( tap(response => { if (response) { this.cache[cacheKey] = response; } }) ); } } getSolarMonthly(solarId) { let params = { method: 'month', solar_edge_id: solarId } return this.ionService.makeGETRequest(this.urlEndpointSolar, params); } getSolarYearly(solarId) { let params = { method: 'year', solar_edge_id: solarId } return this.ionService.makeGETRequest(this.urlEndpointSolar, params); } getSolarSeven(solarId) { let params = { method: 'seven', solar_edge_id: solarId } return this.ionService.makeGETRequest(this.urlEndpointSolar, params); } }

To Native Cordova -> File resolveLocalFileSystemURI File626000404 ["options": [file:///var/mobile/Containers/Data/Application/2C492E68-A6C4-40B5-99F4-C91C31C37C61/tmp/cdv_photo_106.jpg]]

If you're trying to load images from the user's gallery, it's important to note that the Pannellum viewer may have limitations or restrictions when it comes to loading local files directly from the device. Web browsers typically have security restrictions that prevent direct access to local file paths due to potential security risks. To work with local files from the user's gallery, you'll need to use appropriate methods or plugins to access the file's content and convert it into a format that can be used by the Pannellum viewer. This may involve reading the file using the File API, FileReader, or utilizing Cordova plugins specifically designed for accessing files on mobile devices. Here's an example of how you could modify the getSecuredImage method to handle loading images from the user's gallery using the cordova-plugin-telerik-imagepicker plugin:

The file file://var/mobile/Containers/Data/Applications/!31D9C72-197f-4681-BF45-D4D32830787/tmp/cdv_photo_219.jpg could not be accessed

dataUrl The url starting with 'data:image/jpeg;base64,' and the base64 encoded string representation of the image, if using CameraResultType.DataUrl.

openMultiplePhotoGallery

openMultiplePhotoGallery(successCallback, errorCallback) { let options: ImagePickerOptions = { maximumImagesCount: 40, quality: 80, outputType: 0, }; this.imagePicker.requestReadPermission().then((res2) => { this.imagePicker.getPictures(options).then((filePaths) => { const convertedImages = []; const promises = []; for (let i = 0; i < filePaths.length; i++) { const filePath = filePaths[i]; const fileName = filePath.substring(filePath.lastIndexOf('/') + 1); const fileExt = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase(); if (fileExt !== 'jpg' && fileExt !== 'jpeg') { const promise = this.convertToJpg(filePath).then((jpgFilePath) => { convertedImages.push(jpgFilePath); }); promises.push(promise); } else { convertedImages.push(filePath); } } Promise.all(promises).then(() => { successCallback(convertedImages); }); }, (err) => { errorCallback(err); }); }).then(data => { // Handle the read permission }, (err) => { // Show the permissions alert if (this.platform.is('ios')) { this.createAlert(null, "FieldPro needs permissions to work.

Go to Settings, and scroll down to the list of apps, tap on FieldPro.
Give permissions to Photos, Microphone, and Camera.", ['OK']); } else { this.createAlert(null, "FieldPro needs permissions to work.

Go to Settings -> Apps -> Field Pro.
Give permissions to Files and Camera.", ['OK']); } }); } convertToJpg(filePath) { return new Promise((resolve, reject) => { window['resolveLocalFileSystemURL'](filePath, (fileEntry) => { fileEntry.file((file) => { const reader = new FileReader(); reader.onloadend = () => { const imgBlob = new Blob([reader.result], { type: 'image/jpeg' }); const newFilePath = this.file.cacheDirectory + 'converted_' + Date.now() + '.jpg'; this.writeFile(newFilePath, imgBlob).then(() => { resolve(newFilePath); }).catch((err) => { reject(err); }); }; reader.onerror = (err) => { reject(err); }; reader.readAsArrayBuffer(file); }, (err) => { reject(err); }); }, (err) => { reject(err); }); }); } writeFile(filePath, fileBlob) { return new Promise((resolve, reject) => { window['resolveLocalFileSystemURL'](this.file.dataDirectory, (dirEntry) => { dirEntry.getFile(filePath, { create: true, exclusive: false }, (fileEntry) => { fileEntry.createWriter((fileWriter) => { fileWriter.onwriteend = () => { resolve(); }; fileWriter.onerror = (err) => { reject(err); }; fileWriter.write(fileBlob); }, (err) => { reject(err); }); }, (err) => { reject(err); }); }, (err) => { reject(err); }); }); }

As of my knowledge cutoff in September 2021, Pannellum does not have built-in support specifically for the "cnv_photo_jpg" file format. Pannellum primarily supports equirectangular and cube map image formats commonly used for 360 panoramas. However, Pannellum provides a flexible API that allows you to create custom plugins and extensions, which means it might be possible to extend its functionality to support the "cnv_photo_jpg" format. You would need to write a custom plugin or extension that can handle parsing and displaying the specific file format. I would recommend checking the Pannellum documentation and community resources to see if anyone has already developed a custom plugin or extension for the "cnv_photo_jpg" format or to get guidance on implementing your own custom solution if necessary.

openMultiplePhotoGallery(successCallback, errorCallback) { let options: ImagePickerOptions = { maximumImagesCount: 40, quality: 80, outputType: 0, }; this.imagePicker.requestReadPermission().then((res2) => { this.imagePicker.getPictures(options).then((filePaths) => { const convertedFilePaths = []; const convertImage = (filePath: string) => { const isSupportedFormat = filePath.toLowerCase().endsWith('.jpg') || filePath.toLowerCase().endsWith('.jpeg') || filePath.toLowerCase().endsWith('.png'); if (isSupportedFormat) { convertedFilePaths.push(filePath); } else { // Convert image file to JPEG or PNG format this.file.resolveLocalFilesystemUrl(filePath).then((fileEntry: FileEntry) => { const fileName = filePath.substr(filePath.lastIndexOf('/') + 1); const path = filePath.substr(0, filePath.lastIndexOf('/') + 1); const convertedFileName = 'converted_image.jpg'; // Set the desired converted file name const convertedFilePath = path + convertedFileName; // Set the desired converted file path and format fileEntry.file((file) => { const reader = new FileReader(); reader.onloadend = () => { // Convert base64 image to Blob const blob = this.b64toBlob(reader.result as string, 'image/jpeg'); // Convert to JPEG format // const blob = this.b64toBlob(reader.result as string, 'image/png'); // Convert to PNG format // Write the Blob to the desired converted file path this.file.writeFile(this.file.dataDirectory, convertedFileName, blob, { replace: true }).then(() => { convertedFilePaths.push(convertedFilePath); // Check if all files have been converted if (convertedFilePaths.length === filePaths.length) { successCallback(convertedFilePaths); } }).catch((error) => { // Handle error while writing the converted file console.error('Error writing converted file:', error); }); }; reader.readAsDataURL(file); }, (error) => { // Handle error while getting the file console.error('Error getting file:', error); }); }).catch((error) => { // Handle error while resolving file path console.error('Error resolving file path:', error); }); } }; for (const filePath of filePaths) { convertImage(filePath); } // Check if all files are already in a supported format if (convertedFilePaths.length === filePaths.length) { successCallback(convertedFilePaths); } }, (err) => { errorCallback(err); }); }).then(data => { }, (err) => { if (this.platform.is('ios')) { this.createAlert(null, "FieldPro needs permissions to work.

Go to Settings, and scroll down to the list of apps, tap on FieldPro.
Give permissions to Photos, Microphone, and Camera.", ['OK']); } else { this.createAlert(null, "FieldPro needs permissions to work.

Go to Settings -> Apps -> Field Pro.
Give permissions to Files and Camera.", ['OK']); } }); } b64toBlob(b64Data: string, contentType: string): Blob { const byteCharacters = atob(b64Data); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += 512) { const slice = byteCharacters.slice(offset, offset + 512); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } const blob = new Blob(byteArrays, { type: contentType }); return blob; }

The file file:///var/mobile/Containers/Data/Application/54350720-9BEC-429F-B9F4-B22229471429/tmp/cdv_photo_024.jpg could not be accessed

Angular Flashcards

Well be back soon!

Current customer: {{ currentCustomer }}