Диплом: Автоматизация процессов управления взаимоотношениями с клиентами в службе реализации ООО "Киноафиша", страницы 99-108

99

this.newClient = false;

this.setState({

displayClientDialog: true,

client: Object.assign({}, e.data)

});

}

addNew(what) {

if (what === 'film') {

this.newFilm = true;

this.setState({

film: {

name: '',

description: '',

big_poster: '',

small_poster: '',

trailer: '',

director: '',

stars: '',

film_length: '',

age: '',

genre: '',

country: '',

producers: '',

premier: ''

},

displayFilmDialog: true

});

}

if (what === 'cinema') {

this.newCinema = true;

this.setState({

cinema: {name: '', address: '', site: '', phone_number: '', metro: '', lat: '', lng: ''},

displayCinemaDialog: true

});

}

if (what === 'client') {

this.newClient = true;

this.setState({

client: {email: '', phone_number: ''},

displayClientDialog: true

});

}

if (what === 'session') {

this.newSession = true;

this.setState({

session: {

data: {

name: "",

date: "",

price: ""

},

children: []

},

displaySessionDialog: true

});

}

renderCinemaEditor() {

let header = <div className="ui-helper-clearfix" style={{lineHeight:

'1.87em'}}>Кинотеатры</div>;

let footer = <div className="ui-helper-clearfix" style={{width: '100%'}}>

<Button style={{float: 'left'}} icon="fa-plus" label="Добавить" onClick={() => {

100

this.addNew('cinema')

}}/>

</div>;

let dialogFooter = <div className="ui-dialog-buttonpane ui-helper-clearfix">

<Button icon="fa-close" label="Удалить" className="ui-button-danger" onClick={() => {

this.delete('cinema')

}}/>

<Button label="Сохранить" icon="fa-check" onClick={() => {

this.save('cinema')

}}/>

</div>;

return (

<div>

<DataTable value={this.state.cinemaList} emptyMessage="Нет записей" paginator={true} rows={15}

header={header} footer={footer}

selectionMode="single" selection={this.state.selectedCar} onSelectionChange={(e) => {

this.setState({selectedCar: e.data});

}}

onRowSelect={this.onCinemaSelect}>

</DataTable>

<Dialog visible={this.state.displayCinemaDialog} header="Подробно о кинотеатре" modal={true}

footer={dialogFooter}

onHide={() => this.setState({displayCinemaDialog: false})}>

{this.state.cinema && <div className="ui-grid ui-grid-responsive ui-fluid">

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="name">Название</label></div>

<InputText id="name" onChange={(e) => {

this.updateCinemaProperty('name', e.target.value)

}} value={this.state.cinema.name}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="address">Адрес</label></div>

<InputText id="address" onChange={(e) => {

this.updateCinemaProperty('address', e.target.value)

}} value={this.state.cinema.address}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="site">Сайт</label></div>

<InputText id="site" onChange={(e) => {

this.updateCinemaProperty('site', e.target.value)

}} value={this.state.cinema.site}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="phone_number">Номер телефона</label></div>

<InputText mask="+7(999)999-9999" id="phone_number" onChange={(e) => {

101

this.updateCinemaProperty('phone_number', e.target.value)

}} value={this.state.cinema.phone_number}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="metro">Метро</label></div>

<InputText id="metro" onChange={(e) => {

this.updateCinemaProperty('metro', e.target.value)

}} value={this.state.cinema.metro}/>

</div>

<div className="ui-grid-col-12" style={{padding: '4px 10px'}}><label

htmlFor="metro">Координаты</label></div>

<div className="ui-grid-col-4" style={{paddingTop: '10px', paddingLeft: '15px'}}><label

htmlFor="metro">Широта</label></div>

<InputText id="metro" onChange={(e) => {

this.updateCinemaProperty('lat', e.target.value)

}} value={this.state.cinema.lat}/>

</div>

<div className="ui-grid-col-4" style={{paddingTop: '10px'}}><label

htmlFor="metro">Долгота</label></div>

<InputText id="metro" onChange={(e) => {

this.updateCinemaProperty('lng', e.target.value)

}} value={this.state.cinema.lng}/>

</div>

</div>}

</Dialog>

</div>

</div>);

}

renderFilmEditor() {

let header = <div className="ui-helper-clearfix" style={{lineHeight: '1.87em'}}>Фильмы</div>;

let footer = <div className="ui-helper-clearfix" style={{width: '100%'}}>

<Button style={{float: 'left'}} icon="fa-plus" label="Добавить" onClick={() => {

this.addNew('film')

}}/>

</div>;

let dialogFooter = <div className="ui-dialog-buttonpane ui-helper-clearfix">

<Button icon="fa-close" label="Удалить" className="ui-button-danger" onClick={() => {

this.delete('film')

}}/>

<Button label="Сохранить" icon="fa-check" onClick={() => {

this.save('film')

}}/>

</div>;

const dataFormat = {

'big_poster': (cell) => {

if (cell.big_poster != '') {

return <i className='fa fa-check'/>

} else return <i className='fa fa-times'/>

},

'small_poster': (cell) => {

if (cell.big_poster != '') {

return <i className='fa fa-check'/>

} else return <i className='fa fa-times'/>

},

102

'trailer': (cell) => {

if (cell.big_poster != '') {

return <i className='fa fa-check'/>

} else return <i className='fa fa-times'/>

}

return (

<div>

<DataTable value={this.state.filmList} emptyMessage="Нет записей" scrollable={true} paginator={true}

scrollHeight="400px"

rows={5} header={header} footer={footer}

selectionMode="single" selection={this.state.selectedCar} onSelectionChange={(e) => {

this.setState({selectedCar: e.data});

}}

onRowSelect={this.onFilmSelect}>

<Column field="big_poster" body={dataFormat.big_poster} header="Большой постер"

style={{width: '150px', textAlign: 'center'}}/>

<Column field="small_poster" body={dataFormat.small_poster} header="Маленький постер"

style={{width: '150px', textAlign: 'center'}}/>

<Column field="trailer" body={dataFormat.trailer} header="Трейлер"

style={{width: '150px', textAlign: 'center'}}/>

<Column field="film_length" header="Продолжительность"

style={{width: '200px', textAlign: 'center'}}/>

</DataTable>

<Dialog visible={this.state.displayFilmDialog} header="Подробно о фильме" modal={true}

footer={dialogFooter} width='50%'

onHide={() => this.setState({displayFilmDialog: false})}>

{this.state.film && <div className="ui-grid ui-grid-responsive ui-fluid">

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="name">Название</label></div>

<InputText id="name" onChange={(e) => {

this.updateFilmProperty('name', e.target.value)

}} value={this.state.film.name}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="description">Описание</label></div>

<InputTextarea rows={5} cols={30} autoResize={true} id="description"

onChange={(e) => {

this.updateFilmProperty('description', e.target.value)

}} value={this.state.film.description}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="big_poster">Большой постер (url)</label></div>

<InputText id="site" onChange={(e) => {

103

this.updateFilmProperty('big_poster', e.target.value)

}} value={this.state.film.big_poster}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="small_poster">Маленький постер (url)</label></div>

<InputText onChange={(e) => {

this.updateFilmProperty('small_poster', e.target.value)

}} value={this.state.film.small_poster}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="trailer">Трейлер (url)</label></div>

<InputText id="trailer" onChange={(e) => {

this.updateFilmProperty('trailer', e.target.value)

}} value={this.state.film.trailer}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="director">Режиссёр</label></div>

<InputText id="director" onChange={(e) => {

this.updateFilmProperty('director', e.target.value)

}} value={this.state.film.director}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="stars">Актёры</label></div>

<InputText id="stars" onChange={(e) => {

this.updateFilmProperty('stars', e.target.value)

}} value={this.state.film.stars}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="film_length">Продолжительность</label></div>

<InputText id="film_length" onChange={(e) => {

this.updateFilmProperty('film_length', e.target.value)

}} value={this.state.film.film_length}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="age">Возраст</label></div>

<InputText id="age" onChange={(e) => {

this.updateFilmProperty('age', e.target.value)

}} value={this.state.film.age}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="genre">Жанр</label></div>

104

<InputText id="genre" onChange={(e) => {

this.updateFilmProperty('genre', e.target.value)

}} value={this.state.film.genre}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="country">Страна</label></div>

<InputText id="country" onChange={(e) => {

this.updateFilmProperty('country', e.target.value)

}} value={this.state.film.country}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="producers">Продюсеры</label></div>

<InputText id="producers" onChange={(e) => {

this.updateFilmProperty('producers', e.target.value)

}} value={this.state.film.producers}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="premier">Премьера</label></div>

<InputText id="premier" onChange={(e) => {

this.updateFilmProperty('premier', e.target.value)

}} value={this.state.film.premier}/>

</div>

</div>}

</Dialog>

</div>

</div>);

}

onTreeSelect(e) {

this.setState({selectedTree: e.selection});

}

renderSessionEditor() {

let footer = <div className="ui-helper-clearfix" style={{width: '100%'}}>

<Button style={{float: 'left'}} icon="fa-plus" label="Добавить" onClick={() => {

this.addNew('session')

}}/>

</div>;

let dialogFooter = <div className="ui-dialog-buttonpane ui-helper-clearfix">

<Button icon="fa-close" label="Удалить" className="ui-button-danger" onClick={() => {

this.delete('film')

}}/>

<Button label="Сохранить" icon="fa-check" onClick={() => {

this.save('film')

}}/>

</div>;

return (

<TreeTable footer={footer} value={this.state.sessionList}

footer={footer} selectionMode="single"

header="Сеансы"

selectionChange={this.onTreeSelect.bind(this)}>

105

</TreeTable>

<Dialog visible={this.state.displayClientDialog} header="Подробно о клиенте" modal={true}

footer={dialogFooter}

onHide={() => this.setState({displayClientDialog: false})}>

{this.state.client && <div className="ui-grid ui-grid-responsive ui-fluid">

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="email">Электронная почта</label></div>

<InputText id="email" onChange={(e) => {

this.updateClientProperty('email', e.target.value)

}} value={this.state.client.email}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="phone_number">Номер телефона</label></div>

<InputText id="phone_number" onChange={(e) => {

this.updateClientProperty('phone_number', e.target.value)

}} value={this.state.client.phone_number}/>

</div>

</div>}

</Dialog></div>)

}

renderClientBase() {

let header = <div className="ui-helper-clearfix" style={{lineHeight: '1.87em'}}>Клиенты</div>;

let footer = <div className="ui-helper-clearfix" style={{width: '100%'}}>

<Button style={{float: 'left'}} icon="fa-plus" label="Добавить" onClick={() => {

this.addNew('client')

}}/>

</div>

<Button icon="fa-comments" style={{float: 'right'}} label="На телефон"

onClick={this.sendSms}/>

</div>

<Button icon="fa-envelope" label="На почту" style={{float: 'left'}}

onClick={this.sendEmail}/>

</div>

</div>;

let dialogFooter = <div className="ui-dialog-buttonpane ui-helper-clearfix">

<Button icon="fa-close" label="Удалить" className="ui-button-danger" onClick={() => {

this.delete('client')

}}/>

<Button label="Сохранить" icon="fa-check" onClick={() => {

this.save('client')

}}/>

</div>;

return (<div>

<DataTable value={this.state.clientList} emptyMessage="Нет записей"

scrollable={true} paginator={true}

scrollHeight="400px"

rows={10} header={header} footer={footer}

106

selectionMode="single" selection={this.state.selectedCar}

onSelectionChange={(e) => {

this.setState({selectedCar: e.data});

}}

onRowSelect={this.onClientSelect}>

<Column field="email" header="Электронная почта" filter={true} sortable={true}

style={{textAlign: 'center'}}/>

</DataTable>

<Dialog visible={this.state.displayClientDialog} header="Подробно о клиенте" modal={true}

footer={dialogFooter}

onHide={() => this.setState({displayClientDialog: false})}>

{this.state.client && <div className="ui-grid ui-grid-responsive ui-fluid">

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="email">Электронная почта</label></div>

<InputText id="email" onChange={(e) => {

this.updateClientProperty('email', e.target.value)

}} value={this.state.client.email}/>

</div>

<div className="ui-grid-col-4" style={{padding: '4px 10px'}}><label

htmlFor="phone_number">Номер телефона</label></div>

<InputText id="phone_number" onChange={(e) => {

this.updateClientProperty('phone_number', e.target.value)

}} value={this.state.client.phone_number}/>

</div>

</div>}

</Dialog>

</div>

</div>);

}

export() {

this.dt.exportCSV();

}

analyticalReportDateOnChange(e) {

this.setState({analyticalReportDate: e.value})

}

renderAnalyticalReport() {

let header = <div><Calendar value={this.state.analyticalReportDate}

onChange={this.analyticalReportDateOnChange}

selectionMode="multiple" showIcon="true" placeholder="Дата"

style={{float: 'left'}} dateFormat="dd.mm.yy"/>

<div className="ui-helper-clearfix" style={{lineHeight: '1.87em'}}>Отчёт</div>

</div>;

let footer = <div className="ui-helper-clearfix" style={{width: '100%'}}>

</div>;

return (<div>

<DataTable value={this.state.analyticalReport}

exportFilename={this.state.analyticalReportDate !== null ?

moment(new Date(this.state.analyticalReportDate)).format('DD.MM.YYYY') : 'Аналитический отчёт'}

emptyMessage="Нет записей" scrollable={true} paginator={true}

scrollHeight="400px" rows={10} header={header} footer={footer}

ref={(el) => {

this.dt = el;

107

}}>

<Column field="fullness" header="Процент заполненности" sortable={true}

style={{textAlign: 'center'}}/>

</DataTable>

</div>

</div>);

}

render() {

const MyMapComponent = withScriptjs(withGoogleMap((props) =>

<GoogleMap

defaultZoom={12}

defaultCenter={{lat: 55.755826, lng: 37.6172999}}

>

{this.state.cinemaList.map(marker => {

return <Marker position={{lat: marker.lat, lng: marker.lng}}/>

})

}

</GoogleMap>

));

const header = <div style={{'textAlign': 'left'}}>

</div>;

return (

<h1>КИН<i className="fa fa-star-o fa-spin"/>АФИША</h1>

</div>

<h3 style={{float: 'right'}}>Вы вошли как <br/>Администратор</h3>

</div>

</div>

</header>

<DataGrid value={this.state.filmList} itemTemplate={this.carTemplate.bind(this)}

header={header}

paginator={true}

rows={12}/>

</TabPanel>

<TabPanel header="Кинотеатры" leftIcon="fa-video-camera"

headerClassName='cinema_panel_style'>

<DataList value={this.state.cinemaList}

itemTemplate={this.cinemaTemplate.bind(this)}

paginator={true} rows={10} header={header}/>

</div>

108

<MyMapComponent

isMarkerShown

googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"

loadingElement={<div style={{height: `100%`}}/>}

containerElement={<div style={{height: `545px`}}/>}

mapElement={<div style={{height: `100%`}}/>}

/>

</div>

</TabPanel>

<TabPanel header="Панель администратора" leftIcon="fa-cogs"

headerClassName='admin_panel_style'>

{this.renderFilmEditor()}

</AccordionTab>

{this.renderCinemaEditor()}

</AccordionTab>

{this.renderSessionEditor()}

</AccordionTab>

{this.renderClientBase()}

</AccordionTab>

{this.renderAnalyticalReport()}

</AccordionTab>

</Accordion>

</TabPanel>

</TabView>

</div>

{this.state.showFilmDlg ? this.renderFilmDialog() : null}

{this.state.showSessionDlg ? this.renderSessionDialog() : null}

{this.state.showSessionForSelectedCinemaDlg ?

this.renderSessionForSelectedCinemaDialog() : null}

</div>

);

}

export default App;

Смотрите также:

"Автоматизация обработки заявок ООО "Проектно-Строительная Компания"
"Автоматизация процесса аттестации персонала для ООО "Нэт Бай Нэт Холдинг"
"Анализ интернет-активности конкурентов ( на примере конкурентов "Газпром нефть")
"Бухгалтерский учёт и аудит расчётов с подотчётними лицами в организации на примере ООО "ЛОЦ 10""
«Психологическое сопровождение персонала в организации на примере ООО «Крокус»
Cовершенствование деловой оценки персонала в организации (на примере ООО "Даймонд кейтеринг развитие")
IPO - инструмент финансирования деятельности организации. На примере ПАО «Нефтяная компания «Лукойл»
PR как средство продвижения организации (на примере ПАО "Тамбовский завод "Комсомолец им. Н.С. Артемова")
PR-коммуникации в сфере общественного питания (на примере кафе-кондитерской «Cream Cheese»)
SMM как средство повышения эффективности работы учреждений социокультурной сферы (на примере Малого театра)