CC-2145 : Redesign & layout fixes for the Preferences screen

view templates are all done, form works. just need javascript.

.zfproject.xml

@@ -125,6 +125,8 @@
         <formFile formName="AddShowRR"/>
         <formFile formName="AddShowRebroadcastDates"/>
         <formFile formName="AddShowAbsoluteRebroadcastDates"/>
+        <formFile formName="SoundcloudPreferences"/>
+        <formFile formName="GeneralPreferences"/>
       </formsDirectory>
       <layoutsDirectory enabled="false"/>
       <modelsDirectory>

application/controllers/PreferenceController.php

@@ -27,17 +27,19 @@ class PreferenceController extends Zend_Controller_Action
         if ($form->isValid($request->getPost())) {
 
             $values = $form->getValues();
-            Application_Model_Preference::SetHeadTitle($values["stationName"], $this->view); 
-            Application_Model_Preference::SetDefaultFade($values["stationDefaultFade"]);                      
-            Application_Model_Preference::SetStreamLabelFormat($values["streamFormat"]);
-            Application_Model_Preference::SetAllow3rdPartyApi($values["thirdPartyApi"]);
-            Application_Model_Preference::SetDoSoundCloudUpload($values["UseSoundCloud"]);  
-            Application_Model_Preference::SetSoundCloudUser($values["SoundCloudUser"]);
-            Application_Model_Preference::SetSoundCloudPassword($values["SoundCloudPassword"]); 
-            Application_Model_Preference::SetSoundCloudTags($values["SoundCloudTags"]);
-            Application_Model_Preference::SetSoundCloudGenre($values["SoundCloudGenre"]);
-            Application_Model_Preference::SetSoundCloudTrackType($values["SoundCloudTrackType"]);
-            Application_Model_Preference::SetSoundCloudLicense($values["SoundCloudLicense"]);                       
+            
+            Application_Model_Preference::SetHeadTitle($values["preferences_general"]["stationName"], $this->view); 
+            Application_Model_Preference::SetDefaultFade($values["preferences_general"]["stationDefaultFade"]);                      
+            Application_Model_Preference::SetStreamLabelFormat($values["preferences_general"]["streamFormat"]);
+            Application_Model_Preference::SetAllow3rdPartyApi($values["preferences_general"]["thirdPartyApi"]);
+
+            Application_Model_Preference::SetDoSoundCloudUpload($values["preferences_soundcloud"]["UseSoundCloud"]);  
+            Application_Model_Preference::SetSoundCloudUser($values["preferences_soundcloud"]["SoundCloudUser"]);
+            Application_Model_Preference::SetSoundCloudPassword($values["preferences_soundcloud"]["SoundCloudPassword"]); 
+            Application_Model_Preference::SetSoundCloudTags($values["preferences_soundcloud"]["SoundCloudTags"]);
+            Application_Model_Preference::SetSoundCloudGenre($values["preferences_soundcloud"]["SoundCloudGenre"]);
+            Application_Model_Preference::SetSoundCloudTrackType($values["preferences_soundcloud"]["SoundCloudTrackType"]);
+            Application_Model_Preference::SetSoundCloudLicense($values["preferences_soundcloud"]["SoundCloudLicense"]);                       
             
             $this->view->statusMsg = "<div class='success'>Preferences updated.</div>";
         }

application/forms/GeneralPreferences.php

@@ -0,0 +1,65 @@
+<?php
+
+class Application_Form_GeneralPreferences extends Zend_Form_SubForm
+{
+
+    public function init()
+    {
+        $this->setDecorators(array(
+            array('ViewScript', array('viewScript' => 'form/preferences_general.phtml'))
+        ));
+
+        //Station name
+        $this->addElement('text', 'stationName', array(
+            'class'      => 'input_text',
+            'label'      => 'Station Name:',
+            'required'   => true,
+            'filters'    => array('StringTrim'),
+            'validators' => array('NotEmpty'),
+            'value' => Application_Model_Preference::GetValue("station_name"),
+            'decorators' => array(
+                'ViewHelper'
+            )
+        ));
+
+        $defaultFade = Application_Model_Preference::GetDefaultFade();
+        if($defaultFade == ""){
+            $defaultFade = '00:00:00.000000';
+        }
+
+        //Default station fade
+        $this->addElement('text', 'stationDefaultFade', array(
+            'class'      => 'input_text',
+            'label'      => 'Default Fade:',
+            'required'   => false,
+            'filters'    => array('StringTrim'),
+            'validators' => array(array('regex', false, 
+                array('/^[0-2][0-3]:[0-5][0-9]:[0-5][0-9](\.\d{1,6})?$/', 
+                'messages' => 'enter a time 00:00:00{.000000}'))),
+            'value' => $defaultFade,
+            'decorators' => array(
+                'ViewHelper'
+            )
+        ));
+            
+        $stream_format = new Zend_Form_Element_Radio('streamFormat');
+        $stream_format->setLabel('Stream Label:');
+        $stream_format->setMultiOptions(array("Artist - Title",
+                                            "Show - Artist - Title",
+                                            "Station name - Show name"));
+        $stream_format->setValue(Application_Model_Preference::GetStreamLabelFormat());
+        $stream_format->setDecorators(array('ViewHelper'));
+        $this->addElement($stream_format);
+
+        $third_party_api = new Zend_Form_Element_Radio('thirdPartyApi');
+        $third_party_api->setLabel('Allow Remote Websites To Access Show Schedule Info');
+        $third_party_api->setMultiOptions(array("Disabled",
+                                            "Enabled"));
+        $third_party_api->setValue(Application_Model_Preference::GetAllow3rdPartyApi());
+        $third_party_api->setDecorators(array('ViewHelper'));
+        $this->addElement($third_party_api);
+    }
+
+
+}
+

application/forms/Preferences.php

@@ -7,138 +7,23 @@ class Application_Form_Preferences extends Zend_Form
     {
         $this->setAction('/Preference/update')->setMethod('post');
 
-        //Station name
-        $this->addElement('text', 'stationName', array(
-            'class'      => 'input_text',
-            'label'      => 'Station Name:',
-            'required'   => true,
-            'filters'    => array('StringTrim'),
-            'validators' => array('NotEmpty'),
-            'value' => Application_Model_Preference::GetValue("station_name")
+        $this->setDecorators(array(
+            array('ViewScript', array('viewScript' => 'form/preferences.phtml'))
         ));
         
-        $defaultFade = Application_Model_Preference::GetDefaultFade();
-        if($defaultFade == ""){
-            $defaultFade = '00:00:00.000000';
-        }
+        $general_pref = new Application_Form_GeneralPreferences();
+        $this->addSubForm($general_pref, 'preferences_general');
 
-        //Default station fade
-        $this->addElement('text', 'stationDefaultFade', array(
-            'class'      => 'input_text',
-            'label'      => 'Default Fade:',
-            'required'   => false,
-            'filters'    => array('StringTrim'),
-            'validators' => array(array('regex', false, 
-                array('/^[0-2][0-3]:[0-5][0-9]:[0-5][0-9](\.\d{1,6})?$/', 
-                'messages' => 'enter a time 00:00:00{.000000}'))),
-            'value' => $defaultFade
-        ));
-            
-        $stream_format = new Zend_Form_Element_Radio('streamFormat');
-        $stream_format->setLabel('Stream Label:');
-        $stream_format->setMultiOptions(array("Artist - Title",
-                                            "Show - Artist - Title",
-                                            "Station name - Show name"));
-        $stream_format->setValue(Application_Model_Preference::GetStreamLabelFormat());
-        $this->addElement($stream_format);
-
-        $third_party_api = new Zend_Form_Element_Radio('thirdPartyApi');
-        $third_party_api->setLabel('Allow Remote Websites To Access Show Schedule Info');
-        $third_party_api->setMultiOptions(array("Disabled",
-                                            "Enabled"));
-        $third_party_api->setValue(Application_Model_Preference::GetAllow3rdPartyApi());
-        $this->addElement($third_party_api);
-
-
-		$this->addElement('checkbox', 'UseSoundCloud', array(
-            'label'      => 'Automatically Upload Recorded Shows To SoundCloud',
-            'required'   => false,
-            'value' => Application_Model_Preference::GetDoSoundCloudUpload()
-		));
-
-        //SoundCloud Username
-        $this->addElement('text', 'SoundCloudUser', array(
-            'class'      => 'input_text',
-            'label'      => 'SoundCloud Email:',
-            'required'   => false,
-            'filters'    => array('StringTrim'),
-            'value' => Application_Model_Preference::GetSoundCloudUser()
-        ));
-
-        //SoundCloud Password
-        $this->addElement('password', 'SoundCloudPassword', array(
-            'class'      => 'input_text',
-            'label'      => 'SoundCloud Password:',
-            'required'   => false,
-            'filters'    => array('StringTrim'),
-            'value' => Application_Model_Preference::GetSoundCloudPassword()
-        ));
-
-         // Add the description element
-        $this->addElement('textarea', 'SoundCloudTags', array(
-            'label'      => 'space separated SoundCloud Tags',
-            'required'   => false,
-            'class'      => 'input_text_area',
-            'value' => Application_Model_Preference::GetSoundCloudTags()
-		));
-
-        //SoundCloud default genre
-        $this->addElement('text', 'SoundCloudGenre', array(
-            'class'      => 'input_text',
-            'label'      => 'Default Genre:',
-            'required'   => false,
-            'filters'    => array('StringTrim'),
-            'value' => Application_Model_Preference::GetSoundCloudGenre()
-        ));
-
-        $select = new Zend_Form_Element_Select('SoundCloudTrackType');
-        $select->setLabel('Default Track Type:');
-        $select->setAttrib('class', 'input_select');
-        $select->setMultiOptions(array(
-                "" => "",
-                "original" => "Original",
-                "remix" => "Remix",
-                "live" => "Live",
-                "recording" => "Recording",
-                "spoken" => "Spoken",
-                "podcast" => "Podcast",
-                "demo" => "Demo",
-                "in progress" => "Work in progress",
-                "stem" => "Stem",
-                "loop" => "Loop",
-                "sound effect" => "Sound Effect",
-                "sample" => "One Shot Sample",
-                "other" => "Other"
-            ));
-        $select->setRequired(false);
-        $select->setValue(Application_Model_Preference::GetSoundCloudTrackType());
-        $this->addElement($select);
-
-        $select = new Zend_Form_Element_Select('SoundCloudLicense');
-        $select->setLabel('Default License:');
-        $select->setAttrib('class', 'input_select');
-        $select->setMultiOptions(array(
-                "" => "",
-                "no-rights-reserved" => "The work is in the public domain",
-                "all-rights-reserved" => "All rights are reserved",
-                "cc-by" => "Creative Commons Attribution",
-                "cc-by-nc" => "Creative Commons Attribution Noncommercial",
-                "cc-by-nd" => "Creative Commons Attribution No Derivative Works",
-                "cc-by-sa" => "Creative Commons Attribution Share Alike",
-                "cc-by-nc-nd" => "Creative Commons Attribution Noncommercial Non Derivate Works",
-                "cc-by-nc-sa" => "Creative Commons Attribution Noncommercial Share Alike"
-            ));
-        $select->setRequired(false);
-        $select->setValue(Application_Model_Preference::GetSoundCloudLicense());
-        $this->addElement($select);
+        $soundcloud_pref = new Application_Form_SoundcloudPreferences();
+        $this->addSubForm($soundcloud_pref, 'preferences_soundcloud');
 
         $this->addElement('submit', 'submit', array(
-            'class'    => 'ui-button ui-state-default',
+            'class'    => 'ui-button ui-state-default right-floated',
             'ignore'   => true,
             'label'    => 'Submit',
+            'decorators' => array(
+                'ViewHelper'
+            )
         ));            
-
-        
-        
     }
 }

application/forms/SoundcloudPreferences.php

@@ -0,0 +1,115 @@
+<?php
+
+class Application_Form_SoundcloudPreferences extends Zend_Form_SubForm
+{
+
+    public function init()
+    {
+        $this->setDecorators(array(
+            array('ViewScript', array('viewScript' => 'form/preferences_soundcloud.phtml'))
+        ));
+
+        //enable soundcloud uploads
+        $this->addElement('checkbox', 'UseSoundCloud', array(
+            'label'      => 'Automatically Upload Recorded Shows To SoundCloud',
+            'required'   => false,
+            'value' => Application_Model_Preference::GetDoSoundCloudUpload(),
+            'decorators' => array(
+                'ViewHelper'
+            )
+		));
+
+        //SoundCloud Username
+        $this->addElement('text', 'SoundCloudUser', array(
+            'class'      => 'input_text',
+            'label'      => 'SoundCloud Email:',
+            'required'   => false,
+            'filters'    => array('StringTrim'),
+            'value' => Application_Model_Preference::GetSoundCloudUser(),
+            'decorators' => array(
+                'ViewHelper'
+            )
+        ));
+
+        //SoundCloud Password
+        $this->addElement('password', 'SoundCloudPassword', array(
+            'class'      => 'input_text',
+            'label'      => 'SoundCloud Password:',
+            'required'   => false,
+            'filters'    => array('StringTrim'),
+            'value' => Application_Model_Preference::GetSoundCloudPassword(),
+            'decorators' => array(
+                'ViewHelper'
+            )
+        ));
+
+         // Add the description element
+        $this->addElement('textarea', 'SoundCloudTags', array(
+            'label'      => 'space separated SoundCloud Tags',
+            'required'   => false,
+            'class'      => 'input_text_area',
+            'value' => Application_Model_Preference::GetSoundCloudTags(),
+            'decorators' => array(
+                'ViewHelper'
+            )
+		));
+
+        //SoundCloud default genre
+        $this->addElement('text', 'SoundCloudGenre', array(
+            'class'      => 'input_text',
+            'label'      => 'Default Genre:',
+            'required'   => false,
+            'filters'    => array('StringTrim'),
+            'value' => Application_Model_Preference::GetSoundCloudGenre(),
+            'decorators' => array(
+                'ViewHelper'
+            )
+        ));
+
+        $select = new Zend_Form_Element_Select('SoundCloudTrackType');
+        $select->setLabel('Default Track Type:');
+        $select->setAttrib('class', 'input_select');
+        $select->setMultiOptions(array(
+                "" => "",
+                "original" => "Original",
+                "remix" => "Remix",
+                "live" => "Live",
+                "recording" => "Recording",
+                "spoken" => "Spoken",
+                "podcast" => "Podcast",
+                "demo" => "Demo",
+                "in progress" => "Work in progress",
+                "stem" => "Stem",
+                "loop" => "Loop",
+                "sound effect" => "Sound Effect",
+                "sample" => "One Shot Sample",
+                "other" => "Other"
+            ));
+        $select->setRequired(false);
+        $select->setValue(Application_Model_Preference::GetSoundCloudTrackType());
+        $select->setDecorators(array('ViewHelper'));
+        $this->addElement($select);
+
+        $select = new Zend_Form_Element_Select('SoundCloudLicense');
+        $select->setLabel('Default License:');
+        $select->setAttrib('class', 'input_select');
+        $select->setMultiOptions(array(
+                "" => "",
+                "no-rights-reserved" => "The work is in the public domain",
+                "all-rights-reserved" => "All rights are reserved",
+                "cc-by" => "Creative Commons Attribution",
+                "cc-by-nc" => "Creative Commons Attribution Noncommercial",
+                "cc-by-nd" => "Creative Commons Attribution No Derivative Works",
+                "cc-by-sa" => "Creative Commons Attribution Share Alike",
+                "cc-by-nc-nd" => "Creative Commons Attribution Noncommercial Non Derivate Works",
+                "cc-by-nc-sa" => "Creative Commons Attribution Noncommercial Share Alike"
+            ));
+        $select->setRequired(false);
+        $select->setValue(Application_Model_Preference::GetSoundCloudLicense());
+        $select->setDecorators(array('ViewHelper'));
+        $this->addElement($select);
+    }
+
+
+}
+

application/views/scripts/form/preferences.phtml

@@ -0,0 +1,14 @@
+<form method="post" action="/Preference/update" enctype="application/x-www-form-urlencoded">
+
+    <?php echo $this->element->getSubform('preferences_general') ?>
+
+    <h3 class="collapsible-header"><span class="arrow-icon"></span>SoundCloud settings</h3>
+    <div class="collapsible-content" id="soundcloud-settings" style="display: block;">
+        <?php echo $this->element->getSubform('preferences_soundcloud') ?>
+    </div>
+
+    <div class="button-bar bottom" id="submit-element">
+        <?php echo $this->element->getElement('submit') ?>
+    </div>
+
+</form>

application/views/scripts/form/preferences_general.phtml

@@ -0,0 +1,50 @@
+<fieldset class="padded">
+    <dl class="zend_form">
+
+        <dt id="stationName-label" class="block-display">
+            <label class="required" for="stationName"><?php echo $this->element->getElement('stationName')->getLabel() ?></label>
+        </dt>
+        <dd id="stationName-element" class="block-display">
+            <?php echo $this->element->getElement('stationName') ?>
+        </dd>
+        <dt id="stationDefaultFade-label" class="block-display">
+            <label class="optional" for="stationDefaultFade"><?php echo $this->element->getElement('stationDefaultFade')->getLabel() ?></label>
+        </dt>
+        <dd id="stationDefaultFade-element" class="block-display">
+            <?php echo $this->element->getElement('stationDefaultFade') ?>
+        </dd>
+        <dt id="streamFormat-label" class="block-display">
+            <label class="optional"><?php echo $this->element->getElement('streamFormat')->getLabel() ?></label>
+        </dt>
+        <dd id="streamFormat-element" class="block-display radio-inline-list">
+            <?php $i=0; 
+                  $value = $this->element->getElement('streamFormat')->getValue();
+            ?>
+            <?php foreach ($this->element->getElement('streamFormat')->getMultiOptions() as $radio) : ?>
+                <label for="streamFormat-<?php echo $i ?>">
+                    <input type="radio" value="<?php echo $i ?>" id="streamFormat-<?php echo $i ?>" name="streamFormat" <?php if($i == $value){echo 'checked="checked"';}?>/>
+                        <?php echo $radio ?>
+                    </input>
+                </label>
+                <?php $i = $i + 1; ?>
+            <?php endforeach; ?>
+        </dd>
+        <dt id="thirdPartyApi-label" class="block-display">
+            <label class="optional"><?php echo $this->element->getElement('thirdPartyApi')->getLabel() ?></label>
+        </dt>
+        <dd id="thirdPartyApi-element" class="block-display  radio-inline-list">
+            <?php $i=0; 
+                  $value = $this->element->getElement('thirdPartyApi')->getValue();
+            ?>
+            <?php foreach ($this->element->getElement('thirdPartyApi')->getMultiOptions() as $radio) : ?>
+                <label for="thirdPartyApi-<?php echo $i ?>">
+                    <input type="radio" value="<?php echo $i ?>" id="thirdPartyApi-<?php echo $i ?>" name="thirdPartyApi" <?php if($i == $value){echo 'checked="checked"';}?> />
+                        <?php echo $radio ?>
+                    </input>
+                </label>
+            <?php $i = $i + 1; ?>
+            <?php endforeach; ?> 
+       </dd>
+
+    </dl>
+</fieldset>

application/views/scripts/form/preferences_soundcloud.phtml

@@ -0,0 +1,46 @@
+<fieldset class="padded">
+    <dl class="zend_form">
+        <dd id="UseSoundCloud-element" class="block-display" style=" margin:6px 0 10px 0">
+            <label class="optional" for="UseSoundCloud">
+                <?php echo $this->element->getElement('UseSoundCloud') ?>
+                <strong><?php echo $this->element->getElement('UseSoundCloud')->getLabel() ?></strong>
+            </label>
+        </dd>
+        <dt id="SoundCloudUser-label" class="block-display">
+            <label class="optional" for="SoundCloudUser"><?php echo $this->element->getElement('SoundCloudUser')->getLabel() ?></label>
+        </dt>
+        <dd id="SoundCloudUser-element" class="block-display">
+            <?php echo $this->element->getElement('SoundCloudUser') ?>
+        </dd>
+        <dt id="SoundCloudPassword-label" class="block-display">
+            <label class="optional" for="SoundCloudPassword"><?php echo $this->element->getElement('SoundCloudPassword')->getLabel() ?></label>
+        </dt>
+        <dd id="SoundCloudPassword-element" class="block-display">
+            <?php echo $this->element->getElement('SoundCloudPassword') ?>
+        </dd>
+        <dt id="SoundCloudTags-label" class="block-display">
+            <label class="optional" for="SoundCloudTags"><?php echo $this->element->getElement('SoundCloudTags')->getLabel() ?></label>
+        </dt>
+        <dd id="SoundCloudTags-element" class="block-display clearfix">
+            <?php echo $this->element->getElement('SoundCloudTags') ?>
+        </dd>
+        <dt id="SoundCloudGenre-label" class="block-display">
+            <label class="optional" for="SoundCloudGenre"><?php echo $this->element->getElement('SoundCloudGenre')->getLabel() ?></label>
+        </dt>
+        <dd id="SoundCloudGenre-element" class="block-display">
+            <?php echo $this->element->getElement('SoundCloudGenre') ?>
+        </dd>
+        <dt id="SoundCloudTrackType-label" class="block-display">
+             <label class="optional" for="SoundCloudTrackType"><?php echo $this->element->getElement('SoundCloudTrackType')->getLabel() ?></label>
+        </dt>
+        <dd id="SoundCloudTrackType-element" class="block-display">
+            <?php echo $this->element->getElement('SoundCloudTrackType') ?>
+        </dd>
+        <dt id="SoundCloudLicense-label" class="block-display">
+            <label class="optional" for="SoundCloudLicense"><?php echo $this->element->getElement('SoundCloudLicense')->getLabel() ?></label>
+        </dt>
+        <dd id="SoundCloudLicense-element" class="block-display">
+            <?php echo $this->element->getElement('SoundCloudLicense') ?>
+        </dd>
+    </dl>
+</fieldset>

application/views/scripts/preference/index.phtml

@@ -1,4 +1,5 @@
-<div class="ui-widget ui-widget-content block-shadow simple-formblock clearfix padded-strong">
+<div class="ui-widget ui-widget-content block-shadow simple-formblock clearfix padded-strong preferences">
+<h2>Preferences</h2>
 <?php
     echo $this->statusMsg;
     echo $this->form;