archfirst / bullsfirst-jquery-backbone Goto Github PK
View Code? Open in Web Editor NEWImplementation of the Bullsfirst front-end using jQuery and Backbone.js
Implementation of the Bullsfirst front-end using jQuery and Backbone.js
Filters code is spread in 3 widget folders:
filter
order-filter
transaction-filter
The idea was that common filter code would reside in filter and specific filter code will reside in order-filter and transaction-filter folders. Unfortunately, filter folder has transaction code bleeding into it. Also the two files FilterView and FilterWidget are almost duplicate of each other - probably need only FilterWidget.
In any case, the entire filter code needs to be refactored and cleaned up for better reuse. Should consider how filters settings will be saved in the repository.
Please think through and write up an approach before implementing.
When the symbol or quantity changes, order estimates are fetched from the server twice. Analyze why.
Since both views need accounts to be sorted in the decreasing order of market value, we should do the sorting during fetch and assume that the collections are sorted at the view level.
The current validation engine settings allows spaces in first/last names, but this is not allowed on the server (javaee returns a 400 error).
Currently, pages in urls are being capitalized with 'Page' appended. This leads to a problem with multi-word pages that we expect to be camel-cased in the filesystem.
For example:
Under the current code:
// Derive page name from route, e.g. `home` becomes `HomePage`
var pageName = page[0].toUpperCase() + page.slice(1) + 'Page';
This now looks for /src/js/app/pages/openaccount/OpenaccountPage.js.
If we name our page file OpenAccountPage.js, that will work on OSX and Windows, but break on Linux.
Our options appear to be:
I suggest route 2. The parsing can be then be re-written so that the file path can still be /src/js/app/pages/openaccount/OpenAccountPage.js.
The /openaccount/ could either be hyphenated or not.
See previous implementation of Bullsfirst.
If the symbol is fully typed in to the field (i.e. not picked from the drop down list), it is not taken in.
I guess we will need something like http://benalman.com/projects/jquery-misc-plugins/#serializeobject or http://lostechies.com/derickbailey/2012/05/17/backbone-syphon-serialize-form-inputs-to-javascript-objects/ or something custom.
Please point to me if we already have a helper to convert successful form controls to js objects for passing over to backbone fetch.
Buy a ridiculous amout of AAPL shares (say 1,000,000,000). The application ignores compliance error from the server and does not show any error. See previos implementation of this dialog.
You can click "Preview Order" without filling any fields and no errors appear. Please try the same on the Transfer dialog and see how errors appear.
In OrdersTableView.js 3 fiels are being custom formatted:
order.attributes.creationTimeFormatted = Formatter.formatDateTime( moment(order.attributes.creationTime) );
order.attributes.limitPriceFormatted = Formatter.formatMoney(order.attributes.limitPrice);
order.attributes.executionPriceFormatted = Formatter.formatMoney(order.attributes.executions.price);
This is not necessary. Use Handlebar helpers instead. See PositionTemplate.html.
The max that can be displayed in that space is $9,999.99. We should allow for at least $9,999,999,999.99 (i.e. billions). Please make the dialog box a bit wider.
See Transfers modal window for styling examples.
See Transactions page, which implements these.
This is because of the new approach adopted by the framework, i.e. to repaint the page from scratch every time the page is changed. We have to come up with some solution for this. Recommend storing filterCriteria created in FilterView.js in repository and restoring it on creation of the view. (similar to issue #32 for Orders page)
The Cash / Securities toggle should act the same way the Trade modal has buy / sell. The div is resized upon toggling, which shifts the text down. There is also a hover fade when moving the cursor off of the button.
All the titles within the tabs (Accounts, Positions, Orders, Transaction History) should be moved down by 1px. They look too high right now.
Orders do not expand to show executions. See Positions page implementation to see how TreeTable works.
When a row in the Accounts table is clicked, it transitions correctly to the account details page, but the detail page is not yet implemented. Ditto for the Account chart view.
When closing out of the transfer modal window, any error handling message that were open stay open (or sometimes fly away to the top left with the transfers div). You need to click them to get rid of the messages. They should go away when the transfer modal is hidden.
This causes index page to come up visually blank when the app is installed at some other appRoot.
Why?
The grunt job is not copying the image files as part of the build process. The grunt copy section has the required entries.
Please analyze why.
Edit: After further inspection, if I simply click on "Apply Filter", the application goes twice to the server. So the problem is mire fundamental then described above.
_setupElements() should be called only once when the view is initialized. Currently BaseView.render() calls it, so it is called everytime a view is rendered.
The date picker stays open until you select a new date. You cannot click outside to close it without making changes. If you move to a different screen within the application, it stills stays on top.
Ability to close the date picker is especially important when you want to clear the date filter. As a side note, pressing enter does close the date picker but it is non-intuitive.
TransactionsTableView is calling this.render() in the initialize() method. This is not correct - the view is not ready for rendering at this point. render() is called by the framework as part of the initialization sequence. Always let the framework do it.
Please model this class based on AccountTableBodyView.
Also you should not need creationTimeFormatted and amountFormatted in renderTransaction(). Use Handlebars helper functions to get this effect directly in the template. See AccountTemplate.html as an example.
Refresh the transactions page so that the latest transaction is showed. See previous implementation of Bullsfirst.
This is because of the new approach adopted by the framework, i.e. to repaint the page from scratch every time the page is changed. We have to come up with some solution for this. Recommend storing filterCriteria that is created in OrderFilterWidget.UpdateOrders in the repository and restore it when filter is created.
The app does not seem to be compatible with IE8. Throws a JavaScript error on the landing page ( after login )
Array.forEach is the method which is failing ( not natively supported in IE8 )
positionArray.forEach(function(rawPosition) {
if (typeof rawPosition.children !== 'undefined') {
rawPosition.children = this.positionArrayToCollection(rawPosition.children);
};
positionCollection.add(new Position(rawPosition));
}, this);
Are we looking for IE8 support ?
The table is stretched to make all rows occupy 2 lines, starting with shifting the AM / PM in the order time column breaking to the next line.
See the following account / password for an example:
jdoes / jdoes
Although we are using push state, the server has to be configured to redirect deep URLs to the client. Without this we get 404's from the server.
This is because the entire page is repainted when changing tabs. We need to come up with a way to only repain the tabs.
Sometimes account chart gets confused about which account is selected. Either multiple accounts are selected or selection does not go away when cursor is out of the chart area.
After entering all fields, go back to the quantity field and change it. Now immediately click the preview button - in the preview dialog you will see the old value. Thus values are not transferred correctly on blur. See old implementation of the dialog. It did not have this problem.
The reset button should reset all filters AND refresh the page. Currently, it only resets the filters and you have to refresh the page yourself to update the data.
When the orders page is rendered initially, all orders for the user are displayed. This is a big issue - in a real systems the user could have placed thousands of orders in the past and we do not want to download and paint all these orders when the page is initially displayed. The defaults have been set up to only display today's orders.
In addition, calling this.render() in the initialize() method is not correct - the view is not ready for rendering at this point. render() is called by the framework as part of the initialization sequence. Always let the framework do it.
Please model this page based on the Positions page which is doing something very similar things (including the creation of nested child views.
After a trade is submitted through the Order Preview dialog, the Trade dialog should go away and the main application should switch to the Orders page showing the submitted order. Please see previous implementation.
For alert boxes, we should change the light theme to a dark theme, picking colors from the Trade / Transfer modals. See Fay for details if you have any questions. Alert boxes can be seen after making transfers, and a confirmation message shows up.
The html is referring to these css files. However, in the new folder structure, the CSS files are not available.
<link rel="stylesheet" href="css/aller.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery-ui-1.8.23.custom.css">
<link rel="stylesheet" href="css/jquery.treeTable-20121109.css">
<link rel="stylesheet" href="css/validationEngine.jquery-2.5.2.css">
<link rel="stylesheet" href="css/bullsfirst.css">
Have run the grunt to see if the build process is making any changes to the folder structure. It didn't
Make sure all form fields listed have the same text padding inside. Follow the example from the trade modal account selection drop down. It has 7px padding on the left. However, the options once you select it are tabbed an additional 3px (10px in total). This should not happen.
The styling should follow the drop down seen in the filters area for the transaction history page exactly.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.