✨ Add option to change prepend time setting

systemli · Apr 5, 2022 · 15df982 · 15df982
1 parent ddf325d
commit 15df982
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/src/components/MessageForm.js b/src/components/MessageForm.js
@@ -18,8 +18,6 @@ const initialState = {
     formErrorMessage: '',
 };
 
-const counterLimit = 280;
-
 export default class MessageForm extends React.Component {
     constructor(props) {
         super(props);
@@ -29,15 +27,19 @@ export default class MessageForm extends React.Component {
         this.state = initialState;
     }
 
+    counterLimit() {
+        return this.props.ticker.prepend_time ? 274 : 280
+    }
+
     handleInput(event, input) {
         let color;
         let errorMessage = '';
         let error = false;
 
         //TODO: Calculate length for Twitter (cutting links to 20 characters)
-        if (input.value.length > counterLimit) {
+        if (input.value.length > this.counterLimit()) {
             color = 'red';
-            errorMessage = `The message is too long. You must remove ${input.value.length - counterLimit} characters.`;
+            errorMessage = `The message is too long. You must remove ${input.value.length - this.counterLimit()} characters.`;
             error = true;
         } else if (input.value.length >= 260) {
             color = 'orange';
@@ -60,7 +62,7 @@ export default class MessageForm extends React.Component {
         let message = this.state.message, id = this.props.ticker.id, geoInformation = this.state.geoInformation,
             attachments = [];
         const {length} = message;
-        if (length === 0 || length > counterLimit) {
+        if (length === 0 || length > this.counterLimit()) {
             return;
         }
 
@@ -221,7 +223,7 @@ export default class MessageForm extends React.Component {
                     onChange={this.uploadAttachment.bind(this)}
                 />
                 <Label
-                    content={`${state.counter}/${counterLimit}`}
+                    content={`${state.counter}/${this.counterLimit()}`}
                     color={state.counterColor} style={{float: 'right'}}
                 />
             </Form>

diff --git a/src/components/Ticker.js b/src/components/Ticker.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Card, Confirm, Icon, Label} from 'semantic-ui-react';
+import {Button, Card, Confirm, Divider, Icon, Label, Popup} from 'semantic-ui-react';
 import {deleteTicker} from "../api/Ticker";
 import PropTypes from 'prop-types';
 import ReactMarkdown from "react-markdown";
@@ -108,6 +108,15 @@ export default class Ticker extends React.Component {
                     <Card.Description>
                         <ReactMarkdown source={this.props.ticker.description}/>
                     </Card.Description>
+                    <Card.Description>
+                        <Divider />
+                        <Icon color={this.props.ticker.prepend_time ? 'green' : 'gray'}
+                              name={this.props.ticker.prepend_time ? 'toggle on' : 'toggle off'}
+                        /> 
+                        Prepend Time
+                        <Popup content='This will prepend the time (in format 13:12) to the message' 
+                               trigger={<Button basic color='black' compact circular icon='info' size='tiny' style={{marginLeft: '.5em'}}/>}/>
+                    </Card.Description>
                 </Card.Content>
                 <Card.Content>
                     <Button.Group size='tiny' fluid compact>

diff --git a/src/components/TickerForm.js b/src/components/TickerForm.js
@@ -172,6 +172,13 @@ export default class TickerForm extends React.Component {
                             onChange={(event, input) => this.form.description = input.value}
                             required
                         />
+                        <Form.Checkbox
+                            toggle
+                            label='Prepend Time'
+                            name='prepend_time'
+                            defaultChecked={this.props.ticker.prepend_time}
+                            onChange={(event, input) => this.form.prepend_time = input.checked}
+                        />
                         <Header dividing>Information</Header>
                         <Form.Group widths='equal'>
                             <Form.Input label='Author'>