Friday, March 23, 2018

gitignore template

https://github.com/github/gitignore
Posted by at No comments:

Tuesday, March 20, 2018

express pug materialize, router



=============== every time, save file, re-START server ==============
nodemon --exec npm start


npm install express-generator -g

express --view=pug myapp

nodemon can monitor file change and restart server
npm install -g nodemon



with express-pug,  normally start server by
npm start
with Nodemon installed, I use
nodemon --exec npm start
Note: nodemon app.js will NOT work here,
because express.js use start script


============================================================


Pug.js Cheat Sheet



https://codepen.io/mimoduo/post/pug-js-cheat-sheet



Includes

//- Include another pug file
include ./path-to/file.pug

//- Include other file types as plain text
include styles.css
include script.js

#Extends & Blocks

//- template.pug
block data
  - var pageTitle = "Pugcupid"
html
  head
    title= pageTitle
  body
    block ribbon
    block content
      p Pugs fo life

//- page.pug
//- Extends template.pug
extends ./path-to/template.pug

block data
  - var pageTitle = "Pudome"

block ribbon
  p New pug jazz

block content
  p This wipes out "Pugs fo life"



========================================================

http://localhost:3000/index/tmp2/laxxxx/2


var index = require('./routes/index');


app.use('/index', index);


// this is index router, should continue with /index/xxxxxxxxx, not duplicate
// wrong : router.get('/index/:template/:place/:url_id', function(req, res, next) {
router.get('/:template/:place/:url_id', function(req, res, next) {

Posted by at No comments:

Monday, March 19, 2018

glassgov force search and




=======================
cleargov1

hoogw, hoogw2000, hoogw2001
pass: aaaa1111


-----------------------------
glassgov1:

hoogw
pass: A1a18113
*************************************************

 C:\Apache24\htdocs\glassgov1\view\default\layout.php

 footer, 

 head, add google ad script
C:\Apache24\htdocs\glassgov1\language\en\common.php

 home = Transparent Gov


=======================================

 改过以后， search “aaa bbb”
无论是tag 还是topic 必须同时有 aaa 和 bbb 的帖子才出现在搜索结果里，和google search一样。
没改之前，search “aaa bbb”
无论是tag 还是topic， 只有aaa，没有bbb的帖子也出现在搜索结果里。这是不符合google search的原则的。

改这个文件。要加个括号。 (topic or tag) AND (topic or tag) AND (topic or tag)
controller/search.php


///$NormalQuery[] = 't.Topic LIKE :Topic' . $ParamName . ' or t.Tags LIKE :Tag' . $ParamName;
             // joe [2]
 $NormalQuery[] = '('.'t.Topic LIKE :Topic' . $ParamName . ' or t.Tags LIKE :Tag' . $ParamName . ')';
...................
.............
.......
...


///$Temp = implode(' OR ', $NormalQuery);
// joe [1]    (topic or tag) AND (topic or tag) AND (topic or tag)
$Temp = implode(' AND ', $NormalQuery);
...................
.............
.......
...




*************************************************************

发帖，link 的 URL中如果有 “&” 就会失败


替换这个文件src/library/WhiteHTMLFilter.php为新版即可


********************************************************************



++++++++++++++++++++++++++++++++++++++++

搜索提示功能，失败 



我自己改了一下，挺好用的，有同样问题的朋友可以试试，
改这个文件 controller\json.php

干脆不用 dict table
直接搜索 tags table

           `case “tag_autocomplete”:
             。。。。。
              。。。。
               。。。
           
            $Result            = $DB->column("SELECT Name FROM " . PREFIX . "tags WHERE Name LIKE :Keyword limit 10", array(
  "Keyword" => $Keyword . "%"
 ));`

另外再加一个 case, 这个是主页顶上搜 帖子 标题的，大搜索。

     `   case 'searchTopic_autocomplete':

 ..........

           .....................

            $Result            = $DB->column("SELECT Topic FROM " . PREFIX . "topics WHERE Topic LIKE :Keyword limit 10", array(
  "Keyword" => "%". $Keyword . "%"
 ));`

另外一个改动， 原来的tag_autocomplete 改成 searchTopic_autocomplete
static\js\default\global.js
          `$("#SearchInput").autocomplete({
 //serviceUrl: WebsitePath + '/json/tag_autocomplete',
         
            serviceUrl: WebsitePath + '/json/searchTopic_autocomplete',`
这个地方不用改，知道就好。这里是tag 联想提示用的。
static\js\default\new.function.js
$("#AlternativeTag").autocomplete({ serviceUrl: WebsitePath + '/json/tag_autocomplete',






********************************************

去掉：

Website_Statistics
C:\Apache24\htdocs\glassgov1\view\default\home.php

 search Website_Statistics
comment this div section
*************************************************






++++++++++++++++++++++
allow registration, close ?

go to mysql, db, table:   carbon_config

 set this to false.
CloseRegistration = false

+++++++++++++++++++++++++++++





--------------------

 remove logo, extend search box length,

C:\Apache24\htdocs\glassgov1\view\default\layout.php

 search logo.png, comment block remove logo


search searchbox
C:\Apache24\htdocs\glassgov1\static\css\default\style.css
search searchbox
change width: 360px; to 560px    /* add 200 */
change width: 264px; to 464px;/*360-(56+4*2)-16*2*/
-------------------------------------
C:\Apache24\htdocs\glassgov1\view\default\layout.php
top nav 3 button move to below, see joe comment
C:\Apache24\htdocs\glassgov1\view\default\sider.php
-------------------------------------------------------


C:\Apache24\htdocs\glassgov1\static\css\default\style.css
search autocomplete-suggestion
change color, style to below:

 background: rgba(255,255,255,0.9); /* #F3F3F3; */
autocomplete-selected
background: #F3F3F3; /*#ADE1F4;*/

 ---------------------------------------------


++++++++++++++++++++++++++++++

 remove avatar on each post list

 5 files need change

 C:\Apache24\htdocs\glassgov1\view\default\home.php
C:\Apache24\htdocs\glassgov1\view\default\search.php
C:\Apache24\htdocs\glassgov1\view\default\recycle_bin.php
C:\Apache24\htdocs\glassgov1\view\default\tag.php
C:\Apache24\htdocs\glassgov1\view\default\tags.php


search item-avatar

 comment out the div block
C:\Apache24\htdocs\glassgov1\view\default\topic.php

 search detail-avatar
comment out the div block


search "comment-avatar"
C:\Apache24\htdocs\glassgov1\view\default\topic.php

 comment out div

++++++++++++++++++++++++++++++++++++++++




Posted by at No comments:

Thursday, March 1, 2018

set user path windows 

setx path "%path%;C:\Program Files\Microsoft VS Code"
Posted by at No comments:

Thursday, February 8, 2018

Your global Angular CLI version is greater than your local version . The local Angular CLI version is used.


local version CLI is installed under your specific project folder, node module.
Every project folder has there own local CLI version installed.

So you should UNDER your project folder run below command.




error:
Your global Angular CLI version(xxx) is greater than your local version (xxxxxx). The local Angular CLI version is used.

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install
Posted by at 1 comment:

Thursday, January 11, 2018

ngif


 ngif expression resulting value won’t just be the boolean true or false

 if the expression is just a object, it still evaluate it as truthiness.

 if the object is undefined, or non-exist, then ngif will evaluate it as falseness.

 




common use is if an object loaded, exist, then display the content of this object, otherwise display "loading.......".


     

         Still loading...........
   

   

         

               object.info, object.id, object.name ... etc.
   




another example: 


     
      things = {
     car: 'Honda',
     shoes: 'Nike',
     shirt: 'Tom Ford',
     watch: 'Timex'
     };

     

      Nice car!
   

   
       Call a Uber.
   

     

anthoer example:

   

       Nice {{ car }}!
   
   

[ngif template][1]


[ngif angular 4][2]


  [1]: https://blog.angular-university.io/angular-reactive-templates/
  [2]: https://alligator.io/angular/ngif-new-features-angular4/




----------------------------------------------------------------------------------------------------------------
Here loading message will be shown unless dataFromServer has got some values


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  showSelected: boolean;
  dataFromServer: string;

  constructor() {
    this.showSelected = true;
    this.dataFromServer = 'Hello';

  }
}



 *ngIf="dataFromServer; else loadingBar">
  {{dataFromServer}}
-template #loadingBar> Loading </ng-template>
Posted by at No comments:

Tuesday, November 21, 2017

start a new empty angular project


https://github.com/angular/flex-layout

in the end demo section, last one is good example


create a material.module.ts as below, than in app.module import it.
import { NgModule } from '@angular/core';
import {PlatformModule} from '@angular/cdk/platform';
import {ObserversModule} from '@angular/cdk/observers';

import {CdkTableModule} from '@angular/cdk/table';
import 'hammerjs';

import {
MatAutocompleteModule,


MatButtonModule,


MatButtonToggleModule,


MatCardModule,


MatCheckboxModule,


MatChipsModule,


MatDatepickerModule,


MatDialogModule,


MatExpansionModule,


MatGridListModule,


MatIconModule,


MatInputModule,


MatListModule,


MatMenuModule,


MatNativeDateModule,


MatPaginatorModule,


MatProgressBarModule,


MatProgressSpinnerModule,


MatRadioModule,


MatRippleModule,


MatSelectModule,


MatSidenavModule,


MatSliderModule,


MatSlideToggleModule,


MatSnackBarModule,


MatSortModule,


MatTableModule,


MatTabsModule,


MatToolbarModule,


MatTooltipModule,


MatStepperModule
} from '@angular/material';



const materialModule = [


CdkTableModule,


MatAutocompleteModule,


MatButtonModule,


MatButtonToggleModule,


MatCardModule,


MatCheckboxModule,


MatChipsModule,


MatStepperModule,


MatDatepickerModule,


MatDialogModule,


MatExpansionModule,


MatGridListModule,


MatIconModule,


MatInputModule,


MatListModule,


MatMenuModule,


MatNativeDateModule,


MatPaginatorModule,


MatProgressBarModule,


MatProgressSpinnerModule,


MatRadioModule,


MatRippleModule,


MatSelectModule,


MatSidenavModule,


MatSliderModule,


MatSlideToggleModule,


MatSnackBarModule,


MatSortModule,


MatTableModule,


MatTabsModule,


MatToolbarModule,


MatTooltipModule,


];



@NgModule({
exports: [
// export material modul


materialModule,

ObserversModule,
PlatformModule
]
})
export class CustomMaterialModule {}

in app.module.ts, just import above module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';


import { AppComponent } from './app.component';
import { CustomMaterialModule } from './material.module';

@NgModule({
imports: [ BrowserModule, FormsModule, FlexLayoutModule, CustomMaterialModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }



========================================================================

create a new project (https://material.angular.io/guide/getting-started)

1) create a new empty angular project
ng new project-name

2) copy src/app folder from other project to our new project.
     It is app folder, not src

3) install material
    npm install --save @angular/material @angular/cdk
  npm install --save @angular/animations
    npm install --save hammerjs

4) style.css add
     @import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

     index.html add icon
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     

5) import material to app module
     by add section below
        

const materialModules = [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule
];
@NgModule({
  imports: [...materialModules],
  exports: [...materialModules],
  declarations: []
})
export class xxxxxxxxModule {
}

import { BrowserModule } from "@angular/platform-browser";

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";

import { PokemonListComponent } from "./pokemon/pokemon-list.component";
import { PokemonDetailComponent } from "./pokemon/pokemon-detail.component";
import { PokemonService } from "./pokemon/pokemon-service";



// ----------------- import ------ material angular ---------------

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatStepperModule,
} from '@angular/material';

import {CdkTableModule} from '@angular/cdk/table';
import 'hammerjs';

const materialModule = [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
];

// ------------ End ----- material angular ---------------


@NgModule({
imports: [
AppRoutingModule,
BrowserModule,
FormsModule,
HttpModule,
// import material modul
materialModule,
],


//exports:[materialModule],

declarations: [
AppComponent,
PokemonListComponent,
PokemonDetailComponent
],
providers: [
PokemonService
],
bootstrap: [AppComponent]
})
export class AppModule { }


6) vscode, ctrl+` will open internal cmd
    ng serve --port 4205


7) if compiled failed, from error message said missing some package.
     Do not go to source package.json, you should not edit copy and past missing package to new project package.json.
 
     instead you should run

         npm install xxxxx --save

      this will automatically update package.json for you.


   for hero project, you must run , because angular cli will not add it by default.
 npm install angular-in-memory-web-api --save
 
Angular CLI no longer uses SystemJS (replaced by Webpack), so systemjs.config.js no longer exists.

===========================================
ng new project-name

cd project-name

ng serve --host 0.0.0.0 --port 4201




========================
first check angular /cli version by


ng --verison


if you see error:

Your global Angular CLI version (1.6.5) is greater than your local
version (1.5.2). The local Angular CLI version is used.

run this, to update local cli

npm install --save-dev @angular/cli@latest

You must have angular/cli the latest version install both global and locally



-g means install globle
npm install -g @angular/cli

ng new my-app



cd my-app
ng serve --open




npm install

=====================================


run angular app on PHP


open cmd
1) cd your-project folder
2) ng build
3) copy dist folder to apache/htdocs/[dist/or your-project-name]
4) Important:  open the index.html file, find <base href="/">
change it to <base href="/your-project-name/">
Without doing this, js file will not be load correctly.

Posted by at No comments:
Subscribe to: Posts (Atom)