card

src/core/DOM.js

@@ -161,7 +161,7 @@ NS.apply = function(a,b) {
             if(attr.hasOwnProperty( i )){
                 if( typeof attr[ i ] === 'function' ){
                     attr[ i ]( setters.attr( el, i ) );
-                }else if(typeof attr[ i ] === 'object' && attr[ i ].hook){
+                }else if(typeof attr[ i ] === 'object'&& attr[ i ] !== null && attr[ i ].hook){
                     return attr[ i ].hook(setters.attr(el, i));
                 }else{
                     setters.attr( el, i )( attr[ i ] );

src/view/block/card/card.scss

@@ -96,6 +96,7 @@ $cardTypes: (
 .card__image {
 	width: 140px;
 	height: 90px;
+	background-image: linear-gradient(180deg, #FFFFFF 0%, #ECECEC 100%);
 	border-radius: 6px;
 	overflow: hidden;
 }
@@ -158,3 +159,8 @@ button.card__button {
 	font-size: 13px;
 	line-height: 17px;
 }
+
+.card--disabled .card__image {
+	filter: grayscale(100%);
+	opacity: 0.5;
+}

src/view/cmp/button/Button.jsx

 import './button.scss';
 
-export default D.declare('view.cmp.Button', function(cfg, children) {
+const Button = D.declare('view.cmp.Button', function(cfg, children) {
   return <button type={cfg.type || 'button'} class={'button'} {...cfg}>{children}</button>
 });
+
+export default Button;
+export {Button};

src/view/cmp/card/Card.jsx

-import Button from "../../page/account/Account";
 import Eye from '/svg/eye.svg';
+import Button from "../button/Button";
+import Format from "../format/Format";
 
 const Card = D.declare('view.cmp.Card', (cfg) => {
-    return <div className={D.cls('card card--'+(cfg.disabled?'disabled':cfg.type))}>
+    return <div className={D.cls('card card--'+
+        (cfg.disabled?'disabled':
+            cfg.seen?'seen':cfg.type))}>
         <div className="card__image">
-            <img src="/uploads/images/card_product3.jpg" alt=""/>
+            <img src={cfg.image} alt=""/>
         </div>
-        <h3 className="card__title">{cfg.title}</h3>
+        <h3 className="card__title"><Format>{cfg.title}</Format></h3>
         <div className="card__footer">
-            {cfg.disabled ? null:
+            {cfg.disabled ? null:(
                 cfg.seen ?
                     <div className="card__note">
                         <span>Просмотрена</span>
@@ -18,6 +21,7 @@ const Card = D.declare('view.cmp.Card', (cfg) => {
                     <Button class={"button card__button"} onclick={cfg.onclick}>
                         <span>Изучить</span>
                     </Button>
+            )
             }
         </div>
     </div>

src/view/page/account/Account.jsx

 import './accountPage.scss';
 import AccountBlock from '../../block/account/Account.jsx';
-import Button from "/view/cmp/button/Button.jsx";
-import Eye from '/svg/eye.svg';
 import '../../block/card/card.scss';
+import {AsyncAuthAjax} from "../../../controller/Ajax";
+import {API} from "../../../dict/Consts";
+import Card from "../../cmp/card/Card";
 
 const Account = D.declare('view.page.Account', () => {
     store.sub([
@@ -24,6 +25,33 @@ const Account = D.declare('view.page.Account', () => {
                 <div class="account-page__content-inner">
                     <div class="cards-list">
                         <h2 class="readers-only">Список непросмотренных карточек</h2>
+
+                        {(()=> {
+                            let c = <div/>;
+                            (async () => {
+                                const result = await AsyncAuthAjax.get(API.ENDPOINTS.GET_USER_NEW_CARDS());
+
+                                D.appendChild(c, result.map((item, n) =>
+
+
+                                    <div class="cards-list__item">
+                                        <Card
+                                            type={'product,info,other'.split(',')[n % 3]}
+                                            disabled={n % 5 === 0}
+                                            seen={n % 4 === 0}
+                                            title={item.name}
+                                            image={item.image}
+                                        />
+                                    </div>
+                                ));
+
+                            })();
+
+
+                            return c
+
+                        })()}
+                        {/*
                         <div class="cards-list__item">
                             <div class="card card--info">
                                 <div class="card__image">
@@ -86,7 +114,7 @@ const Account = D.declare('view.page.Account', () => {
                                 <div class="card__footer">
                                 </div>
                             </div>
-                        </div>
+                        </div>*/}
                     </div>
                 </div>
             </div>